默认 v-text 是没有闪烁问题的，但是 v-text 会覆盖元素中原本的内容，而 v-cloak 只会替换插值表达式，不会把 整个元素的内容清空。
<span v-text="msg"></span> 4、v-htmlv-text 知识插入的纯文本格式内容，而 v-html 可以插入为 html 标签的代码，并解析出来。
<span v-html="msg"></span> ... data: { msg: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>' }, 5、v-bindv-bind 是 Vue中，提供的用于绑定属性的指令。
注意： v-bind: 指令可以被简写为:
<input type="button" value="按钮" v-bind:title="mytitle + '123'"> ... data: { mytitle: '这是一个自己定义的title' },title 里面的内容就不是字符串了，而是会将 data 中的变量进行替换得到一个字符串整体。
6、v-onv-on 是 Vue 中的事件绑定机制。
注意：v-on: 指令可以被简写为@
<input type="button" value="按钮" :title="mytitle + '123'" v-on:click="show"> ... data: { mytitle: '这是一个自己定义的title' }, methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法 show: function () { alert('Hello') } }在点击按钮的时候，会自动调用 methods 中的 show 方法。
案例：字体滚动播放 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="http://www.likecs.com/lib/vue-2.4.0.js"></script> </head> <body> <div> <input type="button" value="摇起来" @click="move"> <input type="button" value="停下来" @click="stop"> <h2 v-text="msg"></h2> </div> <script> var vm = new Vue({ el: "#box", data: { msg: "落霞与孤鹜齐飞，秋水共长天一色。", timeId: null }, methods: { move: function () { if (this.timeId != null) { clearInterval(this.timeId); } var that = this; this.timeId = setInterval(function () { var start = that.msg.substring(0, 1); var end = that.msg.substring(1); that.msg = end + start; }, 200); }, stop: function () { clearInterval(this.timeId); } } }); </script> </body> </html>注意：
1、在 VM 对象实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的 this，就表示 我们 new 出来的 VM 实例对象。
2、VM实例，会自动监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V（即修改 data 的数据，自动同步到 html）， 无法实现数据的双向绑定。
使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定（不仅可以修改 data 的数据，自动同步到 html，也可以修改 html 的代码，同步到 data 数据）。
注意： v-model 只能运用在 表单元素中。
示例：
<input type="text" v-model="msg"> ... data: { msg: 'hello vue.' }, 案例：简单的计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://www.likecs.com/lib/vue-2.4.0.js"></script> </head> <body> <div> <input type="text" v-model="n1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="http://www.likecs.com/">/</option> </select> <input type="text" v-model="n2"> <input type="button" value="=" @click="calc"> <input type="text" v-model="result"> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, result: 0, opt: '+' }, methods: { calc: function() { // 计算器算数的方法 // 逻辑： switch (this.opt) { case '+': this.result = parseFloat(this.n1) + parseFloat(this.n2) break; case '-': this.result = parseFloat(this.n1) - parseFloat(this.n2) break; case '*': this.result = parseFloat(this.n1) * parseFloat(this.n2) break; case 'http://www.likecs.com/': this.result = parseFloat(this.n1) / parseFloat(this.n2) break; } } } }); </script> </body> </html> 8、v-for8.1、v-for 循环普通数组