一、基础知识回顾

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 不支持