前端学习篇 -- Vue API 文档

1、选项

1.1 el 挂载目标

• 类型：string | Element
• 作用：决定Vue实例挂载目标

1.2 data 数据对象

• 类型： Object | Function
  • 组件中 data 必须是一个函数
• 作用：Vue实例中的数据对象

1.3 methods 定义方法

• 类型： { [key: string]: Function }
• 作用：定义属于Vue的方法

1.4 computed 计算属性

与 methods 的区别

computed 有缓存，只要数据没有变化就不会重新计算，性能会更高，计算属性是属性不是方法，所以调用的时候不用加 ()

不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化

methods 不管数据有没有变化，只要调用就会重新计算

• 计算属性一般不写 set 方法，只读属性

• 只有 get 方法，get 方法的返回值就是这个属性的返回值

  info: '',
  conputed: {
        
        
    totalNum: {
        
        
      set(newValue) {
        
        
        this.info = newvalue
      },
      get() {
        
        
        return this.info || '123'
      }
    }
  }
  //等同于
  conputed: {
        
        
    totalNum() {
        
        
      return this.info || '123'
    }
  }
  

简单例子

<div id="app">
  <h2>总价格:{
    
    {
    
    totalPrice}}</h2>
</div>
data: {
    
    
  books: [
    {
    
    id: 1,name: '探索宇宙的奥秘', price: 99},
    {
    
    id: 2,name: '人类的进化史', price: 199},
    {
    
    id: 3,name: '如何做好一个好爸爸', price: 909}
  ]
},
computed: {
    
    
  totalPrice() {
    
    
    let result = this.books.reduce((total,item) => {
    
    
      return total + item.price
    }, 0)
    return result
  }
}
// 总价格:1207

1.5 filters 过滤器

过滤器 ，等同于 Vue.filter，处理一些文本格式化

注意：内部不能使用this

参数：

• {string} id

  扫描二维码关注公众号，回复： 11922334 查看本文章

• {Function} [definition]

• <tr v-for="item of books">
    <td>{
        
        {
        
        item.price | showPrice}}</td>
  </tr>
  
  data: {
        
        
    books: [
      {
        
        
        id: 1,
        name: '《人类进化史》',
        date: '2018-11-11',
        price: 99,
        count: 1
      }
    ]
  },
  // 过滤处理
  filters: {
        
        
    showPrice(price) {
        
        
      return '￥' + price.toFixed(2)
    }
  }
  // ￥99.00
  

1.6 components 局部组件

局部注册的组件只能在挂载的实例下使用，且 data 必须是函数

<div id="app">
  <my-cpn></my-cpn>
</div>
// 1.创建组件构造器对象
const cpnC = Vue.extend({
  template: `<div>我是内容</div>`
})

// 2.注册组件
const app = new Vue({
  el: '#app',
  components: {
    'my-cpn': cpnC
  }
})

// 我是内容

语法糖

<div id="app">
  <my-cpn></my-cpn>
</div>
const app = new Vue({
  el: '#app',
  //注册局部组件
  components: {
    'my-cpn': {
      template: `<div>我是内容</div>`
    }
  }
})

//我是内容

父子组件通信

有时候从服务器请求的数据并非是整个页面的大组件展示，而是需要下面的子组件进行展示，这个时候就不能让子组件再向服务器发请求，而是让父组件将数据传递给子组件

• 通过 props 向子组件传递数据

  props 命名尽量避免驼峰命名，如果使用了那么绑定属性的时候要改成 - 形式

  • 数组写法

    <div id="app">
      <cpn :cmovies="movies"></cpn>
    </div>
    const app = new Vue({
      el: '#app',
      data: {
        movies: ['海王', '盗梦空间', '寒战', '火影']
      },
      //注册局部组件
      components: {
        props: ["cmovies"],
        template: `<div>
                     <ul>
                        <li 
                          v-for="(item, index) in cmovies" 
                          :key="index"
                          >{
           
           {item}}</li>
                    </ul>
                  </div>`
      }
    })
    

  • 对象写法

    props: {
      key: {
        type: String,
        default: 'aaa',
        required: true
      },
      key2: {
        type: Array
      }
    }
    

• 通过自定义事件向父组件发送消息

  • 在子组件中，通过 this.$emit() 发射自定义事件
  • 在父组件中，通过 v-on 监听子组件事件

1.7 watch 侦听属性

• 属性发生改变时触发

• 支持异步

• 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值

• 侦听属性必须是data中声明过或者父组件传递过来的props中的数据

data: {
  a: 1
},
watch: {
  a(val, oldVal) {
    console.log(val, oldVal)
  }
}

vm.a = 2 // => 2, 1

1.8 mixins 混入对象

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”

var mixin = {
    
    
  data: function () {
    
    
    return {
    
    
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
    
    
  mixins: [mixin],
  data: function () {
    
    
    return {
    
    
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    
    
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

1.9 directives 局部指令

directives: {
    
    
  focus: {
    
    
    // 指令的定义
    inserted: function (el) {
    
    
      el.focus()
    }
  }
}

// 然后可以在模板中任何元素上使用新的 v-focus:
// 打开页面聚焦
<input v-focus>

1.10 inheritAttrs

• 类型：boolean

• 默认值：true

• 详细：

  默认情况下父组件传的v-bind:attribute属性如果没有被子组件 props 接收将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。通过设置 inheritAttrs 为 false将这些默认行为去掉

• 应用场景：适用于爷传孙组件数据

1.11 model

自定义组件使用v-model

类型：{ prop?: string, event?: string }

详细：

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    value: String,
    checked: {
      type: Number,
      default: 0
    }
  }
})

<my-checkbox v-model="foo"></my-checkbox>

相当于：

<my-checkbox
  :checked="foo"
  @change="val => foo = val"
>
</my-checkbox>

2、指令

2.1 v-once

只渲染一次，不会随数据的改变而改变

message: '你好'
<h2 v-once>{
   
   { message }}</h2>
// 你好

2.2 v-html

将标签数据渲染为普通文本

url: '<a href="https://www.baidu.com">百度</a>'
<h2 v-html="url"></h2>
//百度

2.3 v-text

将数据渲染为源码

url: '<a href="https://www.baidu.com">百度</a>'
<h2 v-text="url"></h2>
//<a href="https://www.baidu.com">百度</a>

2.4 v-pre

将内容原封不动渲染

message: '你好'
<h2 v-pre>{
   
   { message }}</h2>
//{
   
   { message }}

2.5 v-cloak

• vue实例解析之前，div中有一个属性 v-cloak

• vue实例解析之后，div中没有属性 v-cloak

• 可以防止渲染卡顿带来的用户体验差

  <style>
    [v-cloak] {
      display: none;
    }
  </style>
  <div id="app" v-cloak>
    <h2>{
       
       { message }}</h2>
  </div>
  <script>
    setTimeout(function () {
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好'
        }
      })
    }, 1000)
  </script>
  
  

2.6 v-bind

绑定属性，简写 ‘:’

动态绑定 class

• 对象语法：{类名: boolean}
• 数组语法：[‘active’,‘line’]

动态绑定 style

如果过于复杂，可以放在一个 methods 或 computed 中

• 对象语法 :style="{属性名: ‘属性值’}"
  • :style={fontSize: ‘30px’}
• 数组语法 :style="[baseStyle]"
  • baseStyle: {color: ‘red’,fontSize:‘30px’}

<div id="app">
  <h2 :class="{active: isActive}">{
   
   {message}}</h2>
  <button @click="btnClick">切换颜色</button>
</div>
<script>
const app = new Vue({
  el: '#app',
  data: {
    message: '你好',
    isActive: true
  },
  methods: {
    btnClick() {
      this.isActive = !this.isActive
    }
  },
})
</script>

修饰符

1. .prop

   • v-bind 默认绑定到 DOM 节点的 attribute 上（显示在DOM结构上），使用 .prop 修饰符后，会绑定到 property （不显示在页面结构上）

   <input id="input" value="11" :data="inputData">
   // 标签结构: <input id="input" value="11" data="inputData 的值">
   // input.data === undefined
   // input.attributes.data === this.inputData
       
   <input id="input" value="11" :data.prop="inputData">
   // 标签结构: <input id="input" type="foo" value="11">
   // input.data === this.inputData
   // input.attributes.data === undefined
   
   

   • 用途
     • 通过自定义属性存储变量，避免暴露数据
     • 防止污染 HTML 结构

2. .camel

   • 将 kebab-case 属性名转换为 camelCase

   :kebab-case =>  kebabCase
   
   

3. .sync

   • 语法糖，更新父组件绑定值的 v-on 侦听器

   父组件:
   绑定一个 title 属性，并添加 .sync 修饰符

   <text-document v-bind:title.sync="doc.title"></text-document>
   
   

   子组件:
   触发 emit 方法，必须加上 update: 关键词，可以将 $emit 传递给父组件的值，替换成对应的绑定值

   this.$emit('update:title', newTitle)
   
   

   • .sync 修饰符不允许传入表达式，比如：
     <text-document v-bind:title.sync="doc.title + 'hello'"></text-document>

   <my-div :someValue.sync="doc.title" />
   <!-- 等价于 -->
   <my-div :someValue="doc.title" @update:someValue="doc.title = $event" /> 
   
   

2.7 v-on

绑定事件监听器，简写 ‘@’

• 没有参数，括号可加可不加

• 有一个参数，不加括号，默认返回事件对象event，加括号返回 undefined

  <button @click="btnClick">按钮</button>
  btnClick(e) {
    console.log(e);
  }
  //MouseEvent {isTrusted: true, screenX: 42, screenY: 122, clientX: 42, clientY: 19, …}
  
  

• 两个参数或以上，用 $event 获取事件对象

  <button @click="btnClick(1,$event)">按钮</button>
  btnClick(num,e) {
    console.log(num,e);
  }
  //1,MouseEvent {isTrusted: true, screenX: 42, screenY: 122, clientX: 42, clientY: 19, …}
  
  

修饰符

1. .stop - 调用 event.stopPropagation()

2. .prevent - 调用 event.preventDefault()

3. .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调

   //松开回车键
   <button @keyup.enter="keyup">按钮</button>
   //或者用键代码,13代表回车键
   <button @keyup.13="keyup">按钮</button>
   keyup() {
     console.log('按了回车键');
   }
   //按了回车键
   
   

4. .native - 监听组件根元素的原生事件

   <div id="app">
     <my-component v-on:click.native="clickFun"></my-component>
   </div>
   
   Vue.component('my-component', {
     template: `<a href='#'>click me</a>`
   })
   new Vue({
     el: '#app',
     methods: {
       clickFun() {
         console.log("message: success")
       }
     }
   })
   
   //message: success
   
   

5. .once - 只触发一次回调

6. .self - 当事件是从绑定的元素本身触发时才触发回调

   <p @click.self="btnClick">
     <button @click="btnClick">按钮</button>
   </p>
   //点击button不会触发p的click
   
   

7. .capture - 添加事件侦听器时使用 capture 模式(把默认的冒泡变为捕获)

2.8 v-if、v-else-if、v-else

1. v-if

   有条件地渲染元素，如果为 false 不会存在 DOM 结构上

   div id="app">
     <p v-if="seen">现在你看到我了</p>
   </div>
   const app = new Vue({
     el: '#app',
     data: {
       seen: true
     }
   })
   
   

2. v-else-if

   不常用，一般多条件判断写在 computed 里

   限制：前一兄弟元素必须有 v-if 或 v-else-if

3. v-else

   限制：前一兄弟元素必须有 v-if 或 v-else-if

2.9 v-show

决定元素要不要显示，相当于 display 属性，存在DOM结构上

• 频繁切换用 v-show
• 只有一次切换用 v-if

2.10 v-for

遍历，推荐加一个 :key 属性，高效的更新虚拟DOM

数组写法

<ul>
  <li v-for="(item,index) of movies" :key="item">{
   
   { item }}</li>
</ul>
data: {
  movies: ['海王', '盗梦空间', '寒战', '火影']
}

对象写法

键值，键名，索引（索引很少用）

<ul>
  <li v-for="(value,key,index) in user" :key="key">{
   
   { value }}-{
   
   {key}}-{
   
   {index}}</li>
</ul>
data: {
  user: {
    name: 'zhangsan',
    age: 18,
    gender: 0
  }
}

//zhangsan-name-0
//18-age-1
//0-gender-2

2.11 v-model

表单与数据双向绑定，实际上完成了两个操作

等同于

<input type="text" :value="message" @input="valueChange"> 
<p>{
   
   {message}}</p>

data: {
  message: 'hello'
},
methods: {
  valueChange(event) {
    this.message = event.target.value;
  }
}

// 或者
<input type="text" :value="message" @input="message = $event.target.value">

修饰符

1. .lazy- 取代 input 监听 change 事件，敲回车或失去焦点数据才更新
2. .number- 输入字符串转为number（表单输入类型默认是string）
3. .trim - 输入首尾空格过滤

2.13 v-slot

限用于

• tempalte标签
• 组件(对于一个单独的带 prop 的默认插槽)
• 简写 #

slot标签暴露（限用于组件中，2.6 已废弃）

<div id="app"> 
  <cpn>哈哈哈</cpn> 
</div>
const app = new Vue({
  el: '#app',
  components: {
    cpn: {
      template: '<div><slot>默认值</slot></div>',
    }
  }
})
//替换插槽就直接往里面加内容就行了
哈哈哈

具名插槽

通过name值判定插到哪个位置

<div id="app"> 
  <cpn>
    <div slot="right">哈哈哈</div>
  </cpn> 
</div>
const app = new Vue({
  el: '#app',
  components: {
    cpn: {
      template: '<div>
                  <slot name="left">左边</slot>
                  <slot name="right">右边</slot>
                </div>',
    }
  }
})

//左边
//哈哈哈

v-slot 写法

<div id="app"> 
  <cpn>
    <template v-slot:right>哈哈哈</template>
  </cpn> 
</div>
const app = new Vue({
  el: '#app',
  components: {
    cpn: {
      template: '<div>
                  <slot name="left">左边</slot>
                  <slot name="right">右边</slot>
                </div>',
    }
  }
})

// 左边
// 哈哈哈

作用域插槽

作用域：父组件的所有东西都会在父级作用域内编译，子组件的所有东西都会在子级作用域内编译

作用： 在父组件中访问子组件内部的一些可用数据

slotValue 可以随便命名

<div id="app">
  <cpn></cpn>
  <cpn>
    <span slot="child" slot-scope="slotValue">{
   
   { slotValue.data + 1 }}</span>
  </cpn> 
</div>

components: {
  cpn: {
    template: '<div><slot :data="name" name="child">{
   
   {name}}</slot></div>',
    data() {
      return {
        name: 'name'
      }
    }
  }
}

// name
// name1

v-solt 写法

slotValue 可以随便命名

<div id="app">
  <cpn></cpn>
  <cpn>
    <template #child="slotValue">
      <div>
        {
   
   {slotValue.data + 1}}
      </div>
    </template>
  </cpn> 
</div>

components: {
  cpn: {
    template: '<div><slot :data="name" name="child">{
   
   {name}}</slot></div>',
    data() {
      return {
        name: 'name'
      }
    },
  }
}

//name
//name1

3、实例

3.1 $set

修改值（数组/对象）, 全局 Vue.set 的别名

参数：

• {Object | Array} target --> 目标对象
• {string | number} propertyName/index --> 键名/索引
• {any} value --> 修改后的值

<button @click="btnClick">按钮</button>
const app = new Vue({
    
    
  data: {
    
    
    list: ['a','b','c']
  },
  methods: {
    
    
    btnClick() {
    
    
      //修改第一个值为 'aaa',如果没有该属性就会追加
      this.$set(this.list,0,'aaa')
    }
  }
})

3.2 $children

返回当前实例的所有直接子组件

类型：Array

注意 $children 并不保证顺序，也不是响应式的，所以不常用

<div id="app">
  <cpn></cpn>
  <button @click="btnClick">按钮</button>
</div>

const app = new Vue({
  el: '#app',
  methods: {
    btnClick() {
      this.$children[0].show()
    }
  },
  components: {
    cpn: {
      template: '<div>我是子组件</div>',
      methods: {
        show() {
          console.log('show')
        }
      },
    }
  }
})

//show

3.3 $refs

父组件访问子组件， 持有注册过 ref 的所有 DOM 元素和组件实例

类型：Object

<div id="app">
  <cpn></cpn>
  <cpn ref="sub"></cpn>
  <button @click="btnClick">按钮</button>
</div>

const app = new Vue({
  el: '#app',
  methods: {
    btnClick() {
      this.$refs.sub.show()
    }
  },
  components: {
    cpn: {
      template: '<div>我是子组件</div>',
      methods: {
        show() {
          console.log('show')
        }
      },
    }
  }
})

//show

3.4 $parent

返回组件的直接父组件，复用性不强，不常用

类型：Vue instance

<div id="app">
  <cpn></cpn> 
</div>

const app = new Vue({
  el: '#app',
  components: {
    //子组件
    cpn: {
      template: '<div>我是子组件<ccpn></ccpn></div>',
      data() {
        return {
          name: '子组件'
        }
      },
      //孙组件
      components: {
        ccpn: {
          template: '<div>我是孙组件<br><button @click="btnClick">孙组件按钮</button></div>',
          methods: {
            btnClick() {
              console.log(this.$parent.name)
            }
          },
        }
      }
    }
  }
})

//子组件

3.5 $root

当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己 （vue实例）

3.6 $mount

//挂载
new Vue({
  el: '#app'
})

//等同于
new Vue({

}).$mount('#app')

3.7 $router

配置了 vue-router后，全部实例都有这个方法，指向 router 实例

通过代码的方式修改路由 vue-router

<button @click="btnClick"></button>

btnClick() {
  this.$router.push('/home')
  //this.$router.replace('/home')
}

3.8 $route

指向当前活跃的路由，用于动态路由传参，例子参考 vue-router 动态路由

this.$route.path：当前活跃路由的绝对路径（？之前的路径）

this.$route.fullPath：当前活跃路由的完整路径（包括？之后的路径）

this.$route.params：动态路由/router/:id传的参数获取

$route.query：活跃路由？之后传的参数获取

3.9 $delete

删除值（数组/对象），Vue.delete() 的别名

参数：

• {Object | Array} target --> 目标对象
• {string | number} propertyName/index --> 键名/索引

3.10 $el

只读属性，获取组件使用的根 DOM 元素

3.11 $nextTick

参数：

• {Function} [callback]

用法：

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上

3.12 $attrs

类型：{ [key: string]: string }

作用：隔代传参

<!-- parent.vue -->
<div class="parent">
  <son msg="传给孙组件" />
</div>

<!-- son.vue -->
<div class="son">
  <gson v-bind="$attrs" />
</div>

<script>
  export default {
    inheritAttrs: false // 将回退属性去掉
  }
</script>

<!-- gson.vue -->
<div class="son">
  接收 parent 组件传过来的属性： {
   
   { msg }}
</div>

<script>
  export default {
    props: {
      msg: {
        type: String,
        default: ''
      }
    }
  }
</script>

只要孙组件不用 props 接收，就可以一直传下去，直到有组件用 props 接收

3.13 $listeners

类型：{ [key: string]: Function | Array }

详细：

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用

4、全局API

4.1 Vue.set

修改值（数组/对象），等同于 vm.$set

参数：

• {Object | Array} target --> 修改对象
• {string | number} propertyName/index --> 键名/索引
• {any} value --> 修改后的值

<button @click="btnClick">按钮</button>
const app = new Vue({
  data: {
    list: ['a','b','c']
  },
  methods: {
    btnClick() {
      //修改第一个值为 'aaa'
      Vue.set(this.list,0,'aaa')
    }
  }
})

4.2 Vue.filter

注册或获取全局过滤器 ，等同于 filters 选项

参数：

• {string} id
• {Function} [definition]

用法： 可以用在两个地方：双花括号插值和 v-bind 表达式 ， 可被用于一些常见的文本格式化

<!-- 在双花括号中 -->
{
   
   { message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

//文本框输入的第一个字母为大写
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

4.3 Vue.extend

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象 （少用）

<div id="mount-point"></div>
// 创建构造器
const Profile = Vue.extend({
  template: '<p>{
   
   {firstName}} {
   
   {lastName}} aka {
   
   {alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
//渲染结果
<p>Walter White aka Heisenberg</p>

4.4 Vue.component

注册或获取全局组件，data 必须是函数。注册还会自动使用给定的 id 设置组件的名称。可以在任何地方使用

参数：

• {string} id
• {Function | Object} [definition]

<div id="app">
  <my-cpn></my-cpn>
</div>
//1.创建组件构造器对象
const cpnC = Vue.extend({
  template: `<div>我是内容</div>`
})

//2.注册组件
Vue.component('my-cpn',cpnC)

//我是内容

语法糖

<div id="app">
  <my-cpn></my-cpn>
</div>

//注册全局组件
Vue.component('my-cpn',{
  template: `<div>我是内容</div>`
})

//我是内容

script/template 标签创建组件

<script type="text/x-template" id="cpn">
  <div>我是内容</div>
</script>

//或者
<template id="cpn">
  <div>我是内容</div>
</template>

Vue.component('my-cpn',{
  template: `#cpn`
})

//我是内容

4.5 Vue.use

参数：

• {Object | Function} plugin

安装 Vue.js 插件， 该方法需要在调用 new Vue() 之前被调用

import Router from 'vue-router'
Vue.use(Router)

内部执行 install 方法

4.6 Vue.mixin

全局混入， 使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

4.7 Vue.directive

注册或获取全局指令

参数：

• {string} id
• {Function | Object} [definition]

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

钩子函数

1. bind：只调用一次，指令第一次绑定到元素时调用
2. inserted：被绑定元素插入父节点时调用
3. update：所在组件的 VNode 更新时调用
4. componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
5. unbind：只调用一次，指令与元素解绑时调用

4.8 Vue.delete

全局删除值（数组/对象）

参数：

• {Object | Array} target
• {string | number} propertyName/index

4.9 Vue.nextTick

参数：

• {Function} [callback]
• {Object} [context]

用法：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
    
    
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    
    
    // DOM 更新了
  })

5、内置组件

5.1 kepp-alive

正常情况下，路由跳转都会销毁之前的组件，kepp-alive 可以使被包含的组件保留状态，避免重新渲染

• router-view 也是一个组件，如果包含在 kepp-alive 里，所有路径匹配到的视图组件都会被缓存

App.vue
<kepp-alive>
  <router-view/>
</kepp-alive>

Home.vue
activated() {
  this.$router.push(this.path)
},
beforeRouteLeave (to, from, next) {
  this.path = this.$route.path
  next()
}

• 属性：

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
  • max - 数字。最多可以缓存多少组件实例

  <keep-alive exclude="User,Profile">
      <router-view/>
    </keep-alive>
  
  

  排除User,Profile(组件 name 属性)组件，每当跳转这两个组件都会重新创建销毁

5.2 slot

用于命名插槽

5.3 component

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染

<!-- componentId 是 components 里注册的组件名 -->
<component :is="componentId"></component>

5.4 transition

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡（适用于单元素动画）

• 条件渲染 (使用 v-if)

• 条件展示 (使用 v-show)

• 动态组件

• 组件根节点

• Props:

  • name - string，组件过渡类名，默认为v

例子

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

过度的类名

1. v-enter：定义进入过渡的开始状态
2. v-enter-active：定义进入过渡生效时的状态
3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态
4. v-leave：定义离开过渡的开始状态
5. v-leave-active：定义离开过渡生效时的状态
6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态

5.5 transition-group

多元素动画，必须加:key属性，默认被渲染成一个span标签，tag属性可以改

<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {
   
   { item.text }}
  </li>
</transition-group>