摘要：指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于。对象形式佐客汤姆咪口修饰符修饰符是以半角句号指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。修饰符修饰符允许你控制由精确的系统修饰符组合触发的事件。
指令
指令(Directives)是带有v-前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
v-if条件判断Title
Paragraph 1
Paragraph 2
元素当做不可见的包裹元素
v-if是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 与v-if不同，v-show只是进行CSS的变换。 绑定url到href，当url有变化可响应dom重渲染，可缩写成 绑定doSomething函数到a标签的点击事件，可缩写成 可循环渲染动态选项，数组形式 与react不同，react需要使用map方法遍历返回组件，vue直接把循环挂在标签属性上。 对象形式 修饰符(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 修饰符允许你控制由精确的系统修饰符组合触发的事件。 .left .right .middle 这些修饰符会限制处理函数仅响应特定的鼠标按钮。 基础例子如下 Original message: "{{ message }}" Computed reversed message: "{{ reversedMessage }}" computed下的reversedMessage方法依赖data下的变量message，当message发生变量，reversedMessage会重新计算结果，与mobx中的computed的作用相同。 Reversed message: "{{ reversedMessage() }}" 不同的是计算属性是基于它们的依赖进行缓存的。 计算属性computed也可同时设置setter和getter方法取代直接写funciton，如下： 结果为： v-model指令在表单input及textarea元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。 Message is: {{ message }} 多行文本 {{ message }} 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步： 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符： 组件 (Component) 是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。 全局注册组件 局部注册组件 由于html元素之间不能随意嵌套，如table、ul、ol，所以在自定义组件中使用这些受限制的元素时会导致一些问题，例如： 自定义组件 但是如果代码来自以下字符串模板，则没有这个限制：
A
B
Not A/B/CHello!
...
...
v-on事件绑定
...
...
v-for循环
data: {
options: {
jock: "佐客",
tom: "汤姆",
miko: "咪口"
}
}
修饰符
鼠标按钮修饰符
var vm = new Vue({
el: "#example",
data: {
message: "Hello"
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split("").reverse().join("")
}
}
})
以上例子也可通过method属性完成，如下// 在组件中
methods: {
reversedMessage: function () {
return this.message.split("").reverse().join("")
}
}
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数组形式
表单输入绑定
如:
Multiline message is:
.lazy
.number
请注意，对于自定义标签的命名Vue.js不强制遵循W3C规则 (小写，并且包含一个短杠)，尽管这被认为是最佳实践。Vue.component("my-component", {
// 选项
})
var Child = {
template: "
A custom component!"
}
new Vue({
// ...
components: {
//
<
阅读需要支付1元查看