刘大钰

模板语法
插值
绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新 Message: {{ msg }}
一次性地插值，当数据改变时，插值处的内容不会更新 这个将不会改变: {{ msg }}
​
原始 HTML
v-html会保留原始html的属性
rawHtml = This should be red.
​

Using mustaches: {{ rawHtml }}

输出: Using mustaches: This should be red.

Using v-html directive:

输出 Using v-html directive: This should be red(文字颜色为红色). ​ attributes v-bind实现 Mustache 语法作用在 HTML attributes上 Button 对于布尔特性 (它们只要存在就意味着值为 true) Button 如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被渲染进入 元素中 ​ 使用 JavaScript 表达式 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}

​ 不会生效的case {{ var a = 1 }} {{ if (ok) { return message } }} 模板表达式只能访问全局变量白名单，如 Math 和 Date 。不能在模板表达式中访问用户定义的全局变量。 ​ 指令

现在你看到我了

​ 参数 ... ... ​ 动态参数:用方括号括起来后, 可以使用 JavaScript 表达式作为一个指令的参数 ... attributeName会被当作JavaScript表达式进行动态求值，求得的值将会作为最终的参数来使用。 例如，如果vue instance 有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href ​ 同样地，你可以使用动态参数为一个动态的事件名绑定处理函数： ... 当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus ​ 值的约束 动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。 ​ 表达式的约束 动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的。同样，在 DOM 中使用模板时你需要回避大写键名。 ... 变通的办法是使用没有空格或引号的表表达式，或用计算属性替代这种复杂达式。 ​ 另外，如果你在 DOM 中使用模板 (直接在一个 HTML 文件里撰写模板)，需要留意浏览器会把特性名全部强制转为小写： ... ​ 修饰符 修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

...

​ v-bind 缩写 ... ... ​ v-on 缩写 ... ... ​ 计算属性 模板内的表达式只适用于简单运算,对于任何复杂逻辑，你都应当使用计算属性 HTML:

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

​ JS: var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) console.log(vm.reversedMessage) // => 'olleH' ​ methods和computed区别 computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加() ​ 两种方法的缓存方式也不同，computed计算属性是是基于它的响应式依赖进行缓存.只在响应式依赖发生改变时它们才会重新求值。 这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。 这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖： computed: { now: function () { return Date.now() } } 而methods方式是每次进入页面都要执行该方法，在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式 methods: { now: function () { return Date.now() } } 如果用computed计算属性的话，每次进入页面将一直沿用第一次的信息，不会再触发now ​ 侦听属性: watch是命令式的回调,不推荐使用

{{ fullName }}

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) ​ 相比,计算属性是 var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) ​ 计算属性的 setter 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ： ​ // ... 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] } } } // 现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。 ​ 侦听器 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。 ​ 例如： HTML

Ask a yes/no question:

{{ answer }}

​ 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象，以动态地toggle class：

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。 ​ 你可以在对象中传入更多属性来动态toggle多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板和data:

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' } } } ​ 数组语法 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表： ​

data: { activeClass: 'active', errorClass: 'text-danger' } 渲染为：

如果你也想根据条件切换列表中的 class，可以用三元表达式： ​

这样写将始终添加 errorClass，在 isActive 是 truthy[1] 时添加 activeClass。 不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

​ 用在组件上 ​ 当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。 ​ 例如，如果你声明了这个组件： ​ Vue.component('my-component', { template: '

Hi

' }) 然后在使用它的时候添加一些 class： ​ HTML 将被渲染为:

Hi

​ 对于带数据绑定 class 也同样适用： 当 isActive 为 truthy[1] 时，HTML 将被渲染成为：

Hi

​ 绑定内联样式 对象语法

data: { activeColor: 'red', fontSize: 30 } 直接绑定到一个样式对象通常更好，这会让模板更清晰： ​

data: { styleObject: { color: 'red', fontSize: '13px' } } 同样的，对象语法常常结合返回对象的计算属性使用。 ​ 数组语法 v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上： ​

自动添加前缀 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。 ​ 从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如： ​

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。 ​ ----条件渲染---- 在