一、文本
1.1、使用“Mustache”语法 (双大括号) 进行数据绑定
1.2、使用 v-text指令
1.3、使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
<span v-once>这个将不会改变: {{ msg }}</span>
二、HTML
使用 v-html 指令
三、Attribute
使用 v-bind 指令，v-bind指令能够接收一个“参数”，在指令名称之后以冒号表示
四、表单输入绑定
用 v-model 指令可以在表单 <input>、<textarea> 及 <select>元素上创建双向数据绑定
五、事件处理
v-on 指令监听 DOM 事件
六、条件渲染
6.1、v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染，也可以用 v-else 添加一个“else 块”，2.1.0 新增v-else-if。
6.2、另一个用于根据条件展示元素的选项是 v-show 指令。
6.3、两者区别
- v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
- 不推荐同时使用 v-if 和 v-for，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级,当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中,而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素。
- v-show 不支持 元素，也不支持 v-else。
- 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
七、列表渲染
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for 还支持一个可选的第二个参数，(item, index) in items index即当前项的索引。
v-for 迭代的也可以是一个对象 (value, name, index) in object,在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
八、修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
事件修饰符
- .stop .prevent .capture .self .once .passive
- 键盘事件：.enter .tab
- 键盘事件：.left .right .middle
表单修饰符
- .lazy 触发方式 input事件 -> change事件
- .number 返回数字
- .trim 过滤首尾的空格
九、计算属性 （computed）和 侦听器 （watch ）
9.1、可以使用计算属性（computed）来对某些值进行复杂处理
- 相较于使用方法，计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。每当触发重新渲染时，调用方法将总会再次执行函数
- 相较于侦听属性，计算属性某些场景下可以简化逻辑代码。
9.2、虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<div id="app">
{{message}}
<br>
{{reversedMessage}}
<br>
<input type="input" v-model="inputValue">
<span v-text="pText"></span>
</div>
<script type="text/javascript">
var app = new Vue({
el : '#app',
data :{
message: 'lazyrabbit',
inputValue: ' init value',
pText: 'init text'
},
computed: {
// 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
// getter
// get: function () {
// ...
// },
// setter
// set: function (newValue) {
// ...
// }
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
watch: {
inputValue: function(newValue, oldValue) {
this.pText = newValue;
}
}
});
</script>
十、其他
10.1、语法糖
v-bind:缩写为 : 如 v-bind:id -> :id
v-on 缩写为 @ 如 v-on:click -> @click
10.2、对象语法
下面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness
<div v-bind:class="{ active: isActive }"></div>
10.3、数组语法
可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
},
activeClass: 'active',
errorClass: 'text-danger'
}
10.4、更新检测
Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
- vm.items[indexOfItem] = newValue
- 当你修改数组的长度时，例如：vm.items.length = newLength
为了在响应式系统内触发状态更新，可以使用以下方法：
// 设置一个数组项
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
// 修改数组的长度
vm.items.splice(newLength)
Vue 不能检测对象属性的添加或删除：
对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性
10.5、动态参数
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写。
# 以上内容的一个样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
v:model 双向绑定: <input type="input" v-model="inputValue"><br>
<span> Mustache：{{inputValue}}</span><br>
<span v-text="'v-text:'+inputValue "></span><br>
<hr>
<span>{{testHtml}}</span><br>
<span v-html="testHtml"></span><br>
<hr>
<button v-bind:disabled="isButtonDisabled">Button</button>
<hr>
<span v-text="'v-model 数组：'+checkedNames"></span><br>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<hr>
<button v-on:click="changeButtonDisabled">Button2</button>
<hr>
<span v-if="showTest">s1</span><br>
<span v-show="showTest">s2</span>
<hr>
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el : '#app',
data :{
inputValue: 'lazyrabbit',
testHtml: '<a href=\'http:\/\/lazyrabbit.xyz\'>lazyrabbit</a>',
isButtonDisabled: true,
checkedNames: [],
showTest: false,
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
},
methods: {
changeButtonDisabled: function(){
this.isButtonDisabled = !this.isButtonDisabled;
}
}
});
</script>
</html>