标签：控制 date() 浏览器 cti 元素 doc 文档 基础语法 hello
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新！
我们还可以使用v-bind来绑定元素特性!
<!DOCTYPE html> <html xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>狂神说Java</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="app"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div> <script type="text/javascript"> var app = new Vue({ el: ‘#app‘, data: { message: ‘页面加载于 ‘ + new Date().toLocaleString() } }) </script> </body> </html>
你看到的 v-bind 等被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
如果你再次打开浏览器的 JavaScript 控制台，输入 app.message = ‘新消息‘，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>vue</title> </head> <body> <div id="app"> <h1 v-if="sore >= 90">A</h1> <h1 v-else-if="sore >= 80 && sore <90">B</h1> <h1 v-else-if="sore >= 70 && sore <80">C</h1> <h1 v-else-if="sore >= 60 && sore <70">D</h1> <h1 v-else-if="sore < 60">F</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> var vm = new Vue({ el:"#app", data:{ sore: 52 } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>for</title> </head> <body> <div id="app"> <li v-for="item in message"> {{item}} </li> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> var vm = new Vue({ el: "#app", data:{ message: ["java","前端","Linux"] } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>vue</title> </head> <body> <div id="app"> <button v-on:click="sayHi">点击俺</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> var vm = new Vue({ el:"#app", data:{ message: "hello, Vue12!" }, methods:{ //方法必须定义在Vue的Method对象中，v-on: 事件 sayHi: function (even) { alert(this.message); } } }); </script> </body> </html>
可去官方文档详细学习
标签：控制 date() 浏览器 cti 元素 doc 文档 基础语法 hello
原文地址：https://www.cnblogs.com/FondWang/p/12344207.html
