一、基础知识回顾
1.v-bind、v-model、v-html它们什么时候使用以及区别
它们原本的写法以及简化后的写法
v-bind绑定，简写: v-on监听，简写@
2.数据和方法
当一个vue实例被创建时，它向vue的响应式系统中加入其data对象中能找到的所有属性，当这些属性的值发生改变时，视图就会产生响应，即匹配更新为新的值，当这些数据改变时，视图会重新渲染。值得注意的是`只有当实例被创建时data中存在的属性才是响应式的。
3.生命周期钩子
4.v-once数据改变，内容不会更新
5.v-bind可以动态的绑定data中的数据，如果是父子组件那么就可以给子组件传值，如果是普通的标签，那么就会显示冒号后面的属性。
6.使用javascript表达式
对于所有数据绑定，Vue.js都提供了完全的javascript表达式支持。
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} 复制代码
<div v-bind:id="'list-' + id"></div> 复制代码
二、计算属性缓存和方法的区别
(1)写法不同
计算属性：
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }}) 复制代码
方法：
<p>Reversed message: "{{ reversedMessage() }}"</p>// 在组件中 复制代码
methods: { reversedMessage: function () { return this.message.split('').reverse().join('') }} 复制代码
从上面代码中我们会发现，计算属性直接在双大括号中写变量名即可，并且代码写在computed中，方法是需要在变量名后面加括号，表示调用这个方法，代码写在methods中。
(2)缓存不同
计算属性是基于它们的依赖进行缓存的，只有相关依赖改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。假设我们有一个性能开销比较大的计算属性 ，它需要遍历一个巨大的数组并做大量的计算，我们一般会采用计算属性。
三、计算属性的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 也会相应地被更新。
四、class和style绑定
属性绑定分为两种，一种是标签自带的属性，一种是自定义属性。前者绑定的属性可以直接在标签中显示出效果，比如id、class等，后者一般用在自定义组件中，用于父子组件传值。
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。注意：只是针对class 和 style，如果是其他属性还是字符串，除了父子组件传值。
class绑定
第一种是class绑定字符串。
第二种是class绑定对象，对象的属性是class名，值为布尔值。
第三种是class绑定数组，数组中的元素可以是字符串、三目运算、变量名、对象。
如果在组件上写class类，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。
style绑定
v-bind:style的对象语法十分直观，看着非常像css，但其实是一个javascript对象。
第一种是style绑定对象，对象的属性是样式名，值为样式的值。
css属性名可以用驼峰式或短横线分隔(需要用单引号括起来)来命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> 复制代码
第二种是style绑定数组：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
注意：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。v-show 不支持
