Vue学习笔记

一 介绍

与JQuery相比，Vue可以方便的进行组件开发。Vue组件相当于扩展的html元素，使用十分方便。

• vue能够操作文本、属性和结果，也提供了在元素被vue插入、更新、删除时的过渡效果(transition effects)
• 在vue中，我们并不直接操纵DOM，而是修改vue实例数据，让vue来修改dom。
• 模板中的数据绑定，一般可以绑定vue实例的大部分属性，只要这个属性不太复杂，vue会使用stringify()将之转化为string
• vue中重要关键词：数据绑定、虚拟DOM、响应式系统、响应式对象、DOM template、String template
• 虚拟DOM在应用到DOM时，会使用patch/reuse的算法减少DOM的操作。这种行为在你的输出结果不考虑子组件或DOM状态（如input值）时最合适。使用key属性指定唯一值可以取消这种行为。
• template和对应的html都存在时，template优先级高。
• 组件必须只存在一个根元素
• v-bind不使用指令参数，且值为对象，会将对象属性绑定到元素（组件上）

二 指令(directive)

vue指令以v-开始，用于渲染DOM或绑定数据，定义在元素或组件上。

• {{message}}：绑定vue实例数据data到文本上。（非指令，占位符）
• v-bind：将vue实例数据绑定到元素属性上。
• v-if：vue实例数据为true则显示该元素。
• v-for：遍历数组，产生多个该属性对应的html元素（及其子元素）。
• v-on：绑定vue实例方法到html元素事件上。
• v-model：实现input的value属性与vue实例数据的双向绑定，即value属性值改变也会影响vue实例数据。使用v-bind只能单向绑定inptu的value属性。

指令详细见第四章。注意，指令的值一般可以是表达式。

三 组件

• 组件本质上是一个vue实例，含有预定义好的选项。但有些选项是特定于根组件的,如（el），根组件只能使用new创建。

3.1 组件实例

• 组件实例化有三种方式：

  • html元素：在html，则将组件名当作新的html标签，然后创建该元素。但这种实例方式不能作为根组件，需要放入额外一个Vue实例下。

    注意，组件作为

    的子元素实例化会出现问题，因此需使用is，如：

     <ul>
        <li
          is="todo-item"
          v-for="(todo, index) in todos"
          v-bind:key="todo.id"
          v-bind:title="todo.title"
          v-on:remove="todos.splice(index, 1)"
        >li>
    ul>
    

    is指定组件，实例化后该组件会取代li元素。

  • Vue实例：在javascript中，与new Vue({...})类似，new一个组件，并传入选项对象，绑定到一个html元素上(使用el选项)。此时被绑定的元素会被模板template替代。

  • Vue子类实例：Vue实例只能用于根组件，而Vue子类实例可以用于其他组件。Vue.extend()中传入选项对象，返回一个Vue子类。然后实例化，并用$mount挂载到DOM上。如下所示：

    <div id="mount-point">div>
    

    // create constructor
    var Profile = Vue.extend({
      template: '
    {{firstName}} {{lastName}} aka {{alias}}
    ',
      data: function () {
        return {
          firstName: 'Walter',
          lastName: 'White',
          alias: 'Heisenberg'
        }
      }
    })
    // create an instance of Profile and mount it on an element
    new Profile().$mount('#mount-point')
    

    注意data为函数。
    如果想手动销毁实例，则使用$destroy生命周期方法，但DOM元素仍未去除。

• 定义组件：

  //定义一个叫todo-item的组件，成为新的html元素。还传入了一个选项对象。
  Vue.component('todo-item', {
      //该组件作为html元素可以接收的属性。
      props: ['todo'],
      //组件使用的html模板
      template: '
  {{ todo.text }}
  '
  })
  

  现在可以将组件名作为html元素使用：

  <ol>
    
    <todo-item>todo-item>
  ol>
  

• 组件之间数据作用域是隔开的，父子组件通过props通信

3.2 Data and Methods

• vue实例被创建时，会将data对象的属性添加到vue实例上和响应式系统中，即这些属性改变，视图也会改变。而之后vue实例添加的属性不会存在于响应式系统中。
• 除了选项对象提供的data,methods，vue实例也有一些有用的属性和方法，以$为开头。部分如下：
  • $data：选项对象中的data
  • $el：挂载在DOM中的html元素

3.3 生命周期

vue允许在vue实例生命周期的某个阶段（如红色方框所示）上挂载用户自定义的函数，称为hook，如：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` points to the vm instance
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

四 模板语法

• 即html模板，允许你声明式的绑定渲染后的DOM到vue实例的数据上。
• vue会编译模板到虚拟DOM渲染函数中。结合响应式系统，当vue实例状态改变时，vue会智能地计算最少的组件去渲染和应用最少的DOM操作。

4.1 插值

即将vue实例的数据插入到模板中，也称为数据绑定。

4.1.1 文本插值

数据被双花括号围绕{{data}}。如

<span>Message: {{ msg }}span>

这里的数据msg，来自选项对象中的data和？？谁？每当msg改变，view会被更新。

当使用v-once指令时，该元素只会插值一次：

<span>Message: {{ msg }}span>

4.1.2 Raw HTML

插入生的html，不被vue解析。如

<span v-html="rawHtml">span>

此时span的innerHTML使用属性rawHtml替换。

4.1.3 属性

使用指令v-bind,在需要插入数据的html属性上加上该指令。

4.1.4 表达式

前面都是绑定一些简单的属性值，也可以绑定表达式。表达式可以使用一些vue规定的全局变量如Math、Date，不能是自定义的全局变量。

4.2 指令

指定是特殊的属性，以v-开头。指令属性值期待一个js表达式（除了for）。指令的作用是当表达式值改变时，运用这些副作用（DOM的改变）到DOM中。

4.2.1 参数

指令是有参数的，指令与参数冒号分隔，如

<a v-bind:href="url"> ... a>

v-bind指令的参数是href，即将url绑定到href属性上。

4.2.2 动态参数

指定的参数可以是动态给出的，以[]为标识，js表达式给出参数值，如：

<a v-bind:[attributeName]="url"> ... a>

这里的attributeName是js表达式，表达式值必须为string，null表示删除绑定。

限制：[]内不能存在spaces, quotes, <, >, / or =

4.2.3 Modifiers

modifiers是指令的特殊后缀，以.表示，指示指令绑定的一些行为。如：

<form v-on:submit.prevent="onSubmit"> ... form>

表示触发事件时也执行event.preventDefault()

貌似可以叠加多个Modifiers

4.3 缩写

有的指令有缩写，如

• v-bind的缩写：:
• v-on的缩写：@
• v-slot的缩写：#

此时不需要冒号分隔指令与参数。

五 computed、watch

• computed：computed中的属性是data中属性进过计算后得到的属性。
  • computed中属性是一个get方法，也可以额外设置set方法。
  • computed中属性会放入vue实例中。
  • 一个例子：

  var vm = new Vue({
    el: '#demo',
    data: {
      firstName: 'Foo',
      lastName: 'Bar'
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
  

  • 含有set方法的computed中属性例子：

  // ...
  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]
      }
    }
  }
  

// …
```

• 方法：模板中也可以执行方法，达到和computed属性同样的效果。但computed属性会根据它用到的依赖缓存起来，只有依赖改变时才重新计算。而方法在每一次re-rende发生时会执行。
• watch：监听vue实例属性，改变时调用回调函数。data中一些属性的改变是基于其他属性的，可在watch中配置，如：

  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
      }
    }
  })
  

  上面配置了firstName和lastName改变时如何影响fullName改变。

六 class和style数据绑定

html的class和style都是属性，因此可以使用v-bind来绑定vue属性，并且不仅string、还可以绑定object or array到html属性上。

6.1 class数据绑定

• 文本绑定：

  <div v-bind:class="activeClass">div>
  

  这里的activeClass为vue实例属性。
• 对象绑定语法：
  • 例子一

  <div v-bind:class="{ active: isActive }">div>
  

  对象的key为class名，对象的vlue为boolean值，true则class存在。这里的value值是vue对应的属性值。注意指令的值是表达式，可以计算的。
  • 例子二
    可以与HTML的class混合使用

  <div
    class="static"
    v-bind:class="{ active: isActive, 'text-danger': hasError }"
  >div>
  

  • 例子三
    可直接指定vue实例属性名：

  <div v-bind:class="classObject">div>
  

• 数组绑定语法：

  <div v-bind:class="[activeClass, errorClass]">div>
  

  数组中元素都是vue实例属性，class属性值；想要类不存在，修改属性为""即可：

  <div v-bind:class="[isActive ? activeClass : '', errorClass]">div>
  
  <div v-bind:class="[{ active: isActive }, errorClass]">div>
  

• 涉及组件
  组件内模板中绑定class，是绑定组件实例的属性。但下面的例子中：

  <my-component v-bind:class="{ active: isActive }">my-component>
  

  这里绑定的是父组件的实例属性。并且该class会被添加到组件模板的根元素上。

6.2 styles数据绑定

• 对象绑定语法

  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">div>
  

  对象的key是样式名，使用驼峰命令法；value是vue实例属性。
• 数组语法
  数组允许绑定多个vue实例的style对象

  <div v-bind:style="[baseStyles, overridingStyles]">div>
  

• 自动添加前缀
  有些样式在不同浏览器中有不同的前缀的，vue会自动添加。
• 一些样式的属性也有前缀，但需要自己手动添加，略。

七 条件性渲染

7.1 v-if

• 含有v-if指令的元素，只有在属性值为true时才会被渲染。
• 如果需要一个v-if指令条件渲染多个html元素，可使用template包裹起来：

  <template v-if="ok">
    <h1>Titleh1>
    <p>Paragraph 1p>
    <p>Paragraph 2p>
  template>
  

• 可像其他语言一样，有v-else,v-else-if
• vue实例数据改变时，会导致虚拟DOM重新渲染。但为了提高效率，虚拟DOM应用到DOM时，会复用已有的元素。使用key属性阻止这里行为：

  <template v-if="loginType === 'username'">
    <label>Usernamelabel>
    <input placeholder="Enter your username" key="username-input">
  template>
  <template v-else>
    <label>Emaillabel>
    <input placeholder="Enter your email address" key="email-input">
  template>
  

  但label还是会被复用

7.2 v-show

含v-show的元素还是会被渲染到dom中，但会条件性的选择是否显示它，使用了css的display属性。因此隐藏或显示后，事件监听器还是存在的。

八 list渲染

8.1 v-for与数组

使用方式如下

• v-for可以将数组映射为Elements，最基本形式如下：

    <li v-for="item in items">
      {{ item.message }}
    li>
  

  items为vue实例的数组属性，也可以是一个表达式；item为数组中的一项。然后可以使用{{data}}进行文本插值。
• 含有索引

    <li v-for="(item, index) in items">
  	{{ index }} - {{ item.message }}
    li>
  

• 使用of，而不是in

  <div v-for="item of items">div>
  

8.2 v-for与对象

• 基本形式：

    <li v-for="value in object">
      {{ value }}
    li>
  

  会遍历object的所有可遍历属性，value表示对象的属性。
• 取出属性名：

  <div v-for="(value, key) in object">
    {{ key }}: {{ value }}
  div>
  

• 再添加索引：

  <div v-for="(value, key, index) in object">
    {{ index }}. {{ key }}: {{ value }}
  div>
  

• 范围遍历

  <div>
    <span v-for="n in 10">{{ n }} span>
  div>
  

8.3 key

这里再次强调一下，虚拟DOM应用到DOM时会patch/reuse元素，达到对DOM的最少操作。元素（如input）或组件的内部状态可能会被保存，使用key属性可以将防止这种优化，如：

<div v-for="item in items" :key="item.id">
  
div>

8.4 数组中元素改变探测

对下面的话，做个总结：简而言之，vue检测不到data中数组属性中元素的修改，需要其他手段。对于对象也是同样的道理

我们知道，选项对象的data中的属性会被添加到响应式系统，这些属性的改变会造成视图的重新渲染。但如果data中存在数组属性，对数组元素的修改不会造成数据本身引用地址的改变（参考c++引用），因此vue不能通过数组属性检查数组元素是否改变。检测方法如下：

• 可变方法：数组操作通常是调用可变方法进行的，vue代理（wrap）了这些方法以检测数组元素的更改。这些方法有：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
• 替换数组属性：有些方法不会改变原有数组，而是返回新数组，我们可以直接将新数组替换原有数组：

  example1.items = example1.items.filter(function (item) {
    return item.message.match(/Foo/)
  })
  

  替换数组属性不会造成视图全部更新，有优化的~
• 其他：由于javascript限制，直接使用索引修改数组值，和直接修改数组属性，vue是检测不到的。解决方法如下：
  • 使用Vue.set()来设置属性（索引）值

    Vue.set(vm.items, indexOfItem, newValue)
    

    vue实例也有该方法vm.$set()

  • 使用可变方法splice()

    vm.items.splice(indexOfItem, 1, newValue)
    

    它在删除元素的同时也在对应位置添加了newValue

8.5 对象中属性更改检测

理由同上，解决方法

• 使用set方法
• 覆盖原对象

8.6 其他

• v-for也可以使用