摘要：指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于。对象形式佐客汤姆咪口修饰符修饰符是以半角句号指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。修饰符修饰符允许你控制由精确的系统修饰符组合触发的事件。
指令
指令(Directives)是带有v-前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
v-if条件判断Title
Paragraph 1
Paragraph 2
元素当做不可见的包裹元素
ABNot A/B/C
v-if是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show显示判断Hello!
与v-if不同，v-show只是进行CSS的变换。
v-bind属性绑定...
绑定url到href，当url有变化可响应dom重渲染，可缩写成
...v-on事件绑定
...
绑定doSomething函数到a标签的点击事件，可缩写成
...v-for循环
可循环渲染动态选项，数组形式
与react不同，react需要使用map方法遍历返回组件，vue直接把循环挂在标签属性上。
对象形式
data: {
options: {
jock: "佐客",
tom: "汤姆",
miko: "咪口"
}
}
修饰符
修饰符(Modifiers)是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用 event.preventDefault()：
事件修饰符.prevent => event.preventDefault()
.stop => event.stopPropagation()
.capture 使用事件捕获
.self 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
.once 事件只触发一次
按键修饰符全部的按键别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
系统修饰键.ctrl
.alt
.shift
.meta
在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
.exact 修饰符.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
鼠标按钮修饰符
.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
计算属性computed基础例子如下
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("")
}
}
})
computed下的reversedMessage方法依赖data下的变量message，当message发生变量，reversedMessage会重新计算结果，与mobx中的computed的作用相同。
以上例子也可通过method属性完成，如下
Reversed message: "{{ reversedMessage() }}"
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split("").reverse().join("")
}
}
不同的是计算属性是基于它们的依赖进行缓存的。
计算属性computed也可同时设置setter和getter方法取代直接写funciton，如下：
computed: {
fullName: {
// getter
get: function () {
return this.firstName + " " + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(" ")
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
侦听器watch
new Vue({
data: {
watchData: ""
},
watch: {
watchData: function (newData, oldData) {
// doSomething
}
}
})
Class与Style
class的对象形式，与classnames模块类似
class数组形式
data: {
activeClass: "active",
errorClass: "text-danger"
}
class对象与数组混合使用
在组件上使用
Vue.component("my-component", {
template: ""
})
结果为：
style对象形式
data: {
activeColor: "red",
fontSize: 30
}
style数组形式
表单输入绑定
v-model指令在表单input及textarea元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。
如:
Message is: {{ message }}
多行文本
Multiline message is:.lazy{{ message }}
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
.trim如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
组件组件 (Component) 是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。
请注意，对于自定义标签的命名Vue.js不强制遵循W3C规则 (小写，并且包含一个短杠)，尽管这被认为是最佳实践。
全局注册组件
Vue.component("my-component", {
// 选项
})
局部注册组件
var Child = {
template: "A custom component!"
}
new Vue({
// ...
components: {
// 将只在父组件模板中可用
"my-component": Child
}
})
由于html元素之间不能随意嵌套，如table、ul、ol，所以在自定义组件中使用这些受限制的元素时会导致一些问题，例如：
自定义组件
但是如果代码来自以下字符串模板，则没有这个限制：