模板语法
文本
双大括号的文本插值
Message:{{msg}}
v-once指令：一次性的指令，数据改变时，插值处的内容不会改变。
Message:{{msg}}
v-html指令：双括号会将数据解释为文本，v-html输出真正的HTML。
注意
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。
请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
属性
v-bind指令：代表属性，在布尔特性的情况下，它的存在即暗示为 true。
使用JavaScript表达式
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{{number+1}}
{{ok? 'yes':'no'}}
{{ message.split('').reverse().join('')}}
注意
只能访问全局变量的一个白名单，如 Math 和 Date。
不该在模板表达式中试图访问用户定义的全局变量。
指令
带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
现在你看到我了
v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素。
v-modal指令，实现表单输入和应用状态之间的双向绑定
参数
一些指令能够接受一些参数，在指令名称之后，用冒号表示。
动态参数
用方括号括起来的 JavaScript 表达式作为一个指令的参数。
...
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
使用动态参数为一个动态的事件名绑定处理函数。
...
同样地，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus.
修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
缩写
v-bind缩写
...
v-on缩写
...
计算属性和侦听器
计算属性
对于任何复杂逻辑，你都应当使用计算属性。
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
侦听器
通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
class与style绑定
对象语法
当isActive或者hasError变化时，class列表也会相应的进行更新。
class="static" v-bind:class="{active:isActive,'text-danger':hasError}"
>
data:{
isActive:true,
hasError:false,
}
绑定的对象不必内联定义在模板里。
data:{
classObject:{
active:true,
'text-danger':false
}
}
同样可以绑定对象的计算属性
data:{
isActive:true,
error:null
},
computed:{
classObject:function(){
return {
active:this.isActive && !this.error,
'text-danger':this.error && this.error.type === 'fatal'
}
}
}
数组语法
data:{
activeClass: 'active',
errorClass: 'text-danger'
}
根据条件切换列表中的class，可以用三元表达式。
在数组语法中，使用对象语法
绑定内联样式
对象语法
v-bind:style，CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
data:{
activeColor:'red',
fontSize:30
}
直接绑定到样式对象
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
数组语法
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上
多重值
为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
这样写只会渲染数组中最后一个被浏览器支持的值。
在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
条件渲染
v-if,v-else
v-if用于条件性的渲染一块内容。这块内容，只有在指令的表达式返回truthy值的时候被渲染，也可以用v-else添加一个else块。
good
bad
在 元素上使用 v-if 条件渲染分组
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 template 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 template 元素。
Title
Paragraph 1
Paragraph 2
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if
充当 v-if 的“else-if 块”，可以连续使用,v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后.
用 key 管理可复用的元素
input 是两个独立的元素，不复用，label会被复用。
Username
Email
v-show
另一个用于根据条件展示元素的选项,不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
ok
注意，v-show 不支持 template 元素，也不支持 v-else。
列表渲染
v-for把一个数组对应为一组元素,也可以用 of 替代 in 作为分隔符
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
一个对象的 v-for
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
key
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。
变异方法
push() 向数组的末尾添加一个或多个元素，并返回新的长度
pop() 删除并返回数组的最后一个元素
shift() 把数组的第一个元素从其中删除，并返回第一个元素的值
unshift() 向数组的开头添加一个或更多元素，并返回新的长度
splice() 从数组中添加/删除项目，然后返回被删除的项目
sort() 对数组的元素进行排序
reserve() 颠倒数组中元素的顺序
会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
替换数组
filter() 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
concat() 连接两个或多个数组
slice() 从已有的数组中返回选定的元素
split() 方法用于把一个字符串分割成字符串数组
注意事项
由于 JavaScript 的限制，Vue 不能检测以下变动的数组
当你利用索引直接设置一个项时
当你修改数组的长度时
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
解决办法
Vue.set(vm.items, indexOfItem, newValue)||vm.$set()
vm.items.splice(newLength)
对象更改检测注意事项
Vue 不能检测对象属性的添加或删除，对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
Vue.set(vm.UserProfile,'age',27)||vm.$set()
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()
vm.userProfile=Object.assign({},vm.userProfile,{
age:27,
favouriteColor:'pink'
})
显示过滤/排序结果
创建返回过滤或排序数组的计算属性
{{n}}
data:{
numbers:[1,2,3,4,5]
},
computed:{
evenNumbers:function(){
return this.numbers.filter(function(number){
return number%2===0;
})
}
}
在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：
{{n}}
data:{
numbers:[1,2,3,4,5]
},
methods:{
even:function(numbers){
return this.numbers.filter(function(number){
return number%2===0;
})
}
}
一段取值范围的v-for
v-for 也可以取整数。在这种情况下，它将重复多次模板
{{n}}
1,2,3,4,5,6,7,8,9,10
v-for on a template
v-for with v-if 注意
不推荐同时使用 v-if 和 v-for
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：
{{todo}}
//只传递未完成的todo
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 template)上。如：
No todos left!
一个组件的v-for
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的
v-for="(item,index) in items"
v-bind:index="index"
v-bind:item="item"
v-bind:key="item.id"
>
事件处理
监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
事件处理方法
v-on 还可以接收一个需要调用的方法名称
Greet
data: {
name: 'Vue.js'
},
methods: {
greet: function (event) {
alert('Hello ' + this.name + '!')
if (event) {
alert(event.target.tagName)
}
}
}
内联处理器中的方法
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
Say hi
methods: {
say: function (message) {
alert(message)
}
}
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
Submit
methods: {
warn: function (message, event) {
if (event) event.preventDefault()
alert(message)
}
}
事件修饰符（待补充）
.stop
.prevent
.capture
.self
.once
.passive
...
...
注意
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。v-on:click.prevent.self 会阻止所有的点击。v-on:click.self.prevent 只会阻止对元素自身的点击。
按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
按键码
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
表单输入绑定
基础用法
用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件：
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
文本、多行文本
Message is: {{ message }}
在文本区域插值 () 并不会生效，应用 v-model 来代替。
复选框
当个复选框，绑定到布尔值
{{ checked }}
多个复选框，绑定到同一数组
Jack
John
Mike
Checked names: {{ checkedNames }}
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
单选按钮
One
Two
Picked: {{ picked }}
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
下拉框
单选时
请选择
A
B
C
Selected: {{ selected }}
new Vue({
el: '...',
data: {
selected: ''
}
})
多选时绑定到一个数组
用 v-for 渲染的动态选项：
{{ option.text }}
Selected: {{ selected }}
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
值绑定
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：
ABC
复选框
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'
单选按钮
// 当选中时
vm.pick === vm.a
