VUE 2.x 全局API

全局API

Vue.extend

• 参数：{object} options

• 用法：

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

  data选项是特例，需要注意Vue.extend()必须是函数

  <div id="mount-point"></div>
  
  // 创建构造器
  var 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>

  
  

Vue.nextTick

• 参数

  { Function } [callback]

  { Obejct } [context]

• 用法

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

• 实例

  Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新

  <div ref="test">{{testtex}}</div>
  <fan-btn @click="change">修改</fan-btn>
  

  data(){
  	return{
  		testtex:'mytest'
  	}
  }
  

    change(){
           this.testtex='why'
           console.log(this.$refs.test.innerHTML);
  }
  

  打印出来的结果依然是 "mytest"

  dom还没有更新

  
  

  使用this.$nextTick()

    change(){
            this.testtex='why'
  
            this.$nextTick(()=>{
              console.log(this.$refs.test.innerHTML);
            })
          }
  

  输出结果是 "why"

Vue.set

• 参数

  { Object |Array } target

  { String | Number} propertyName/index

  { any } value

• 返回值：设置的值

• 用法

  用于向响应式对象添加property，并确保这个新property同样是响应式的。

  它必须是用于响应式对象上添加新的property，因此Vue无法探测普通的新增property (比如 this.myObject.newProperty = 'hi')

• 实例

  data() {
          return {
               iskan:false,
  
               testlis:[
                 {
                   name:'fan'
                 },{
                   name:'jing'
                 }
               ]
          }
      },
  

  当我们修改响应式对象的内容时候，视图不会跟着变化

   eidt(){
            this.testlis[0]={name:'f'}
          }
  

  使用Vue.set或者我们的this.$set可以使页面响应式

  eidt(){
            this.$set(this.testlis,0,{
              name:'???'
            })
          }
  

  页面也会随着数据的修改而改变

  
  

Vue.delete

• 参数：

  { Object | Array } target

  {String | Number } propertyName/index

• 用法

  删除对象的property。

  如果对象是响应式的，确保删除能触发更新视图。

  这个方法主要用于避开Vue不能检测到property被删除的限制

Vue.dircetive

• 参数：

  {String} id

  {Function | Object} [definition]

• 用法：

  注册或获取全局指令

  Vue.directive全局注册，也可以在组件内directive:{}钩子局部注册

  自定义指令一共有5个钩子函数，他们分别是：bind、inserted、update、componentUpdate和unbind。钩子介绍

• 实例：

  全局

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

  局部

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

  
  

Vue.filter

• 参数：

  {String} id

  {Function} [definition]

• 用法

  可被用于一些常见的文本格式化。

  过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

  <!-- 在双花括号中 多个过滤器可以串联-->
  <!--message为value里面的值 capitalize对其处理-->
  {{ message | capitalize }}  
  
  <!-- 在 `v-bind` 中 -->
  <div v-bind:id="rawId | formatId"></div>
  

  注册或获取全局过滤器

  // 注册Vue.filter('my-filter', function (value) {  // 返回处理后的值})// getter，返回已注册的过滤器var myFilter = Vue.filter('my-filter')
  

  也可以组件内定义过滤器

  filters: {  capitalize: function (value) {    if (!value) return ''    value = value.toString()    return value.charAt(0).toUpperCase() + value.slice(1)  }}
  

Vue.compont

• 参数：

  {String} id

  {Function | Object} [defintion]

• 用法

  注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

  // 注册组件，传入一个扩展过的构造器Vue.component('my-component', Vue.extend({ /* ... */ }))// 注册组件，传入一个选项对象 (自动调用 Vue.extend)Vue.component('my-component', { /* ... */ })// 获取注册的组件 (始终返回构造器)var MyComponent = Vue.component('my-component')
  

  循环遍历全局注册组件

  // 组件列表const allcomponents=[    fanbtn,    faninput,    fandiglog,    fanalert,    fanbadge,    fanlink,    fanimgge,]const install=function(Vue){     // 遍历并注册所有组件     allcomponents.map(component =>{        Vue.component(component.name, component);     })}export default {    install}//main.js文件内Vue.use(fanui) //自动调用install方法
  

  
  

Vue.use

• 参数：

  {object |Function } plugin

• 用法：

  安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

  该方法需要在调用 new Vue() 之前被调用。

  当 install 方法被同一个插件多次调用，插件将只会被安装一次。

  如上方法示例

Vue.mixin

• 参数：

  {Object} mixin

• 用法：

  全局混入的话会影响每一个Vue示例

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

  可以局部的引入混入实例
  mixin.js

  export const mymixin={
      data() {
          return {
              mymixinmessage:'我是混入实例的数据'
          }
      },
      created() {
          console.log('我是混入方法的钩子函数');
      },
  }
  

  Vue实例

  打印 "我是混入方法的钩子函数"

  <template>
    <div>
      
  {{mymixinmessage}} //我是混入实例的数据
  
    </div>
  </template>
  
  <script>
  import {mymixin} from './mixin'
  export default {
      
      mixins:[mymixin],
     
  }
  </script>
  
  <style scoped>
  
  </style>
  

Vue.compile

• 参数：

  {String} template

• 用法：

  将一个模板字符串编译成render函数。

  var res = Vue.compile('<div><span>{{ msg }}</span></div>')new Vue({  data: {    msg: 'hello'  },  render: res.render,  staticRenderFns: res.staticRenderFns})
  

Vue.observable

• 参数：

  {Object} object

• 用法：

  让一个对象可响应。Vue内部会用它来处理data函数返回的对象

  用于组件状态共享，可以注册至全局，也可以单独文件内容引入使用。

  返回的对象可以直接用于渲染函数和计算属性，并且会在发生变更时触发相应的更新。

  const state = Vue.observable({ 	count: 0 })const Demo = {  render(h) {    return h('button', {      on: { click: () => { state.count++ }}    }, `count is: ${state.count}`)  }}
  

数据

data

• 类型：Object | Function

• 限制：组件的定义只接受function

• 详细：

  响应式

  data里面的property会被Object.defineProperty转化为getter/setter，来保证data里面property能够响应式变化。

  一旦被watch函数观察过后无法直接在根数据上添加响应式数据。

  可以通过Vue.set(object,propertyName,value)来添加响应式数据

  对象的property的添加和删除是无法检测的

  数组的直接利用索引改变数组项和修改数组长度Vue都是不能检测到的

  var vm = new Vue({  data: {    items: ['a', 'b', 'c']  }})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的
  

  对于数组可以直接用数组的方法去修改，Vue对数组的方法进行了重写，

  DOM操作

  Vue在更新Dom是异步的。对于数据更改后的DOM操作可以放在nextTick里面进行

  <div id="example">{{message}}</div>

  var vm = new Vue({  el: '#example',  data: {    message: '123'  }})vm.message = 'new message' // 更改数据vm.$el.textContent === 'new message' // falseVue.nextTick(function () {  vm.$el.textContent === 'new message' // true})
  

  
  

  Data为什么是函数形式

  当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！

props

• 类型：Array<string> | Object

• 详细：

  props 可以是数组或对象，用于接收来自父组件的数据。

• 可配置值：

  • type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol
  • dafault：默认值
  • required：Boolean，定义改prop是否是必填项
  • validator：Function，自定义验证函数会将prop作为唯一参数传入。不符合return条件就抛错

propsData

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

• 限制：只能用于new创建的实例中

• 详细：

  创建实例时传递props。主要作用时方便测试

• 示例：

  var Comp = Vue.extend({  props: ['msg'],  template: '<div>{{ msg }}</div>'})var vm = new Comp({  propsData: {    msg: 'hello'  }})
  

  
  

computed

• 类型：{ [key:string]:Function | {get :Function ,set: Function}}

• 详细：

  注意如果为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过仍然可以将其实例作为函数的第一个参数来访问。

  computed: {  aDouble: vm => vm.a * 2}
  

  计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。

  如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。

• 示例

  var vm = new Vue({  data: { a: 1 },  computed: {    // 仅读取    aDouble: function () {      return this.a * 2    },    // 读取和设置    aPlus: {      get: function () {        return this.a + 1      },      set: function (v) {        this.a = v - 1      }    }  }})vm.aPlus   // => 2vm.aPlus = 3vm.a       // => 2vm.aDouble // => 4
  

  
  

watch

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

• 详细：

  一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

• 示例：

  var vm = new Vue({
    data: {
      a: 1,
      b: 2,
      c: 3,
      d: 4,
      e: {
        f: {
          g: 5
        }
      }
    },
    watch: {
      a: function (val, oldVal) {
        console.log('new: %s, old: %s', val, oldVal)
      },
        
      // 方法名
      b: 'someMethod',
        
      // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
      c: {
        handler: function (val, oldVal) { /* ... */ },
        deep: true
      },
        
      // 该回调将会在侦听开始之后被立即调用
      d: {
        handler: 'someMethod',
        immediate: true
      },
        
      // 你可以传入回调数组，它们会被逐一调用
      e: [
        'handle1',
        function handle2 (val, oldVal) { /* ... */ },
        {
          handler: function handle3 (val, oldVal) { /* ... */ },
          /* ... */
        }
      ],
        
      // watch vm.e.f's value: {g: 5}
      'e.f': function (val, oldVal) { /* ... */ }
    }
  })
  vm.a = 2 // => new: 2, old: 1
  

• 属性：

  handler：回调函数

  deep：深度监听，当监听对象的时候，里面数据的变化也能触发函数，deep无法监听到数组的变动和对象的新增，只有以响应式的方式触发才会被监听到。

  immediate：是否初始化的时候执行handler的函数。

• 注意：不应该使用箭头函数。箭头函数绑定的是父级作用域的上下文，所以this将不会按照期望指向Vue实例。

methods

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

• 详细：

  methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

• 示例：

  var vm = new Vue({  data: { a: 1 },  methods: {    plus: function () {      this.a++    }  }})vm.plus()vm.a // 2
  

三者区别

methods和computed

理论上computed能实现的methods也能实现

var app = new Vue({  el: '#app',  data: {    a:'fan',  },  computed:{    getmya:function(){      return this.a +"fan"    }  },  methods: {    getmya2(){      return this.a+"fan"    }  },})

 <div id="app">       {{ getmya }}  <!--fanfan-->       {{getmya2()}} <!--fanfan--> </div>

但重点在于computed有缓存，如果结果不变化就返回缓存结果

computed: {  now: function () {    return Date.now()  }}

同样，上面的计算属性也不会更新，因为Date.now()不是响应式依赖

computed和watch

computed支持缓存，只有依赖数据改变，才会触发重新计算，watch对应data或者props里面的数据，数据变化就会触发操作。

computed不支持异步，当computed里面有异步操作时会失效，无法监听数据的变化 ， 而watch支持异步

DOM

el

• 类型：string |Element

• 限制：只能用new创建实例才生效

• 详细：

  提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

  在实例挂载之后，元素可以用 vm.$el 访问。

template

• 类型：string

• 详细：

  一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

render

• 类型：(createElement:()=>VNode) =>VNode

• 详细：

  字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

  <script>
  var app = new Vue({
    el: '#app',
    name:'myrender',
  render(h) {
    return h('p',{
      //DOM属性
      domProps:{
        innerHTML:'render??'  
      },
      //css
      style:{
        color:'red'
      },
      // 正常的 HTML 特性
    attrs: {
      id: 'firstP'
    }, 
    })
  },
  
  })
  </script>
  

  
  

选项/生命周期钩子

生命周期图

beforeCreate

• 详细：

  在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

created

• 详细：

  在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

beforeMount

• 详细：

  在挂载开始之前被调用：相关的 render 函数首次被调用。

  实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

  该钩子在服务器端渲染期间不被调用。

mounted

• 详细：

  实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。

  模板中的HTML渲染到HTML页面中

  mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick

  mounted: function () {  this.$nextTick(function () {    // 仅在整个视图都被渲染之后才会运行的代码  })}
  

beforeUpdate

• 详细：

  在数据发生改变后，DOM 被更新之前被调用。

  可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程。

updated

• 详细：

  在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

  应该避免在此期间更改状态，因为这可能会导致更新无限循环

  updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick

activated

• 详细：

  被keep-alive缓存的组件激活调用

deactivated

• 详细：

  被 keep-alive 缓存的组件失活时调用。

beforeDestory

• 详细：

  实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

• 详细：

  实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

选项/组合

parent

• 详细

  指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。

  节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的 应急方法。更推荐用 props 和 events 实现父子组件通信

mixin

• 详细：

  同上

• 示例：

  var mixin = {
    created: function () { console.log(1) }
  }
  var vm = new Vue({
    created: function () { console.log(2) },
    mixins: [mixin]
  })
  // => 1
  // => 2
  

extends

• 详细：

  同上

• 示例：

  var CompA = {   created: function () { console.log(1) }}// 在没有调用 `Vue.extend` 时候继承 CompAvar CompB = {  extends: CompA,  ...}
  

provide/inject

• 详细：

  这对选项需要一起使用，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

  provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。

  inject 选项应该是：

  • 一个字符串数组，或
  • 一个对象，对象的 key 是本地的绑定名，value 是：
    • 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
    • 一个对象，该对象的：
      • from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
      • default property 是降级情况下使用的 value

  provide 和 inject 绑定并不是可响应的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

• 示例：

  // 父级组件提供 'foo'var Provider = {  provide: {    foo: 'bar'  },  // ...}// 子组件注入 'foo'var Child = {  inject: ['foo'],  created () {    console.log(this.foo) // => "bar"  }  // ...}
  

  inject也可以有默认项

  const Child = {  inject: {    foo: { default: 'foo' }  }}
  

选项/其他

name

• 限制：只作为组件选项时起作用

• 详细：

  允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。

delimiters

• 默认：[ "{{" , "}}" ]

• 作用：可以改变插入纯文本的方式

• 示例：

  new Vue({  delimiters: ['${', '}']})// 分隔符变成了 ES6 模板字符串的风格
  

model

• 详细：

  允许一个自定义组件在使用v-model时定制prop和event。默认情况下，一个组件的v-model会把value用作prop且把input用作event，

  但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

  <input v-model="test">

  本质上是：

  <input :value="test" @input="test = $event.target.value">

• 示例：

  Vue.component('my-checkbox', {  model: {    prop: 'checked',    event: 'change'  },  props: {    // this allows using the `value` prop for a different purpose    value: String,    // use `checked` as the prop which take the place of `value`    checked: {      type: Number,      default: 0    }  },  // ...})
  

实例 property

vm.$data

• 使用：

  可以this.$data去调用属性，默认this也指向$data

vm.$props

• 使用：

  this.props调用传入属性

vm.$el

vm.$options

• 详细：

  用于当前Vue实例的初始化选项（data外的属性）。需要在选项中包含自定义property时会有用处

  new Vue({  customOption: 'foo',  created: function () {    console.log(this.$options.customOption) // => 'foo'  }})
  

vm.$parent

• 使用：

  访问父实例

vm.$root

• 使用：

  当前组件树的根Vue实例，如果当前实例没有父实例，则指向自己

vm.$children

• 使用：

  当前实例的直接子组件。**$children 并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

vm.$slots

• 使用：

  用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。

vm.$refs

• 使用：

  持有注册过 ref attribute]的所有 DOM 元素和组件实例。

  <mychild ref="fanfan"> </div>

  this.$refs.fanfan.xxx

vm.$attrs

• 使用：

  包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。

  传入子组件的props中没有被使用的就是vm.$attrs的内容

  可以通过 v-bind="$attrs" 传入内部组件

vm.$listeners

• 使用：

  包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
  存储的父实例传入的方法

实例方法/数据

vm.$watch

• 用法：

  观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。

• 示例：

    watch:{
        function(){
           //当fan或者xi发生变化时候会触发
          return this.fan+this.xi
        },
        //或者回调函数形式一个个触发
         fan:[
               //methods的函数名 
              'show',
              'logsome',
               function(){
                      ...
                }
       ]
          
      },
          
          
  

  vm.$watch 返回一个取消观察函数，用来停止触发回调：

  var unwatch = vm.$watch('a', cb)// 之后取消观察unwatch()
  

vm.$set

• 用法：

  用于向响应式对象添加属性

  如果是this.myobj.fan='ismyname'，虽然数据能被加载上去，但没有响应式getter/setter，但再次去改变这个值的时候this.myobj.fan='change'，数据发送了变化，但页面视图将不会变化

  当使用this.$set(this.myobj,'fan','ismyname')，新增的属性也变成了响应式的，页面也能够响应视图的变化

vm.$delete

• 用法：

  用于删除对象的property。能够确保删除会触发更新视图

  this.$delete(myobj,'fan')

实例方法/事件

vm.$on

• 用法：

  监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

• 示例：

  vm.$on('test', function (msg) {  console.log(msg)})vm.$emit('test', 'hi')// => "hi"
  

  一般和props一起作用于父子传参

  parent

  <child :title="title"  @childback="toremove"></child>methods:{	toremove(value){		...	}}
  

  child

  <template>	...</template>somechange:function(){	this.$emit('childback',myvalue)}
  

vm.$once

• 用法：

  监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

vm.$off

• 用法：

  移除自定义事件监听器。

  • 如果没有提供参数，则移除所有的事件监听器；
  • 如果只提供了事件，则移除该事件所有的监听器；
  • 如果同时提供了事件与回调，则只移除这个回调的监听器。

vm.$emit

• 用法：

  触发当前实例上的事件。附加参数都会传给监听器回调。

  配合v-on使用

实例方法/生命周期

vm.$mount

• 返回值：vm 实例本身

• 用法：

  如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

• 示例：

  vm.$forceUpdate()var MyComponent = Vue.extend({  template: '<div>Hello!</div>'})// 创建并挂载到 #app (会替换 #app)new MyComponent().$mount('#app')// 同上new MyComponent({ el: '#app' })// 或者，在文档之外渲染并且随后挂载var component = new MyComponent().$mount()document.getElementById('app').appendChild(component.$el)
  

vm.$forceUpdate()

• 示例：

  迫使Vue实例重新渲染，触发updated生命周期。它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

vm.$nextTick()

• 用法：

  将回调延迟到下次DOM更新循环后，用于数据修改后，对DOM操作时候使用。

vm.$destory()

• 用法：

  完全销毁一个实例。清理它与其他实例的连接，解绑它的全部指令以及事件监听器。**触发beforeDestory和destoryed**的钩子。

指令

v-text

• 详细：

  更新元素的tetxContent

• 示例：

  <span v-text="msg"></span>
  <!-- 和下面的一样 -->
  <span>{{msg}}</span>
  

v-html

• 详细：

  更新元素的innnerHTML

• 示例

  <div v-html="myhtml"> </div>
  

v-show

• 详细：

  切换元素的display，当条件变化时该指令触发过渡效果。

  更适合用于组件频繁切换显示与隐藏。

v-if

• 用法：

  在切换时元素及它的数据绑定 / 组件被销毁并重建。

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

v-else

• 用法：

  配合v-if或者v-else-if使用

v-for

• 用法：

  用于多次渲染元素或模块化。

• 示例：

  <div v-for="(item, index) in items"></div><div v-for="(val, key) in object"></div><div v-for="(val, name, index) in object"></div>
  

v-on

• 缩写：@
• 修饰符：
  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • .left - (2.2.0) 只当点击鼠标左键时触发。
  • .right - (2.2.0) 只当点击鼠标右键时触发。
  • .middle - (2.2.0) 只当点击鼠标中键时触发。
  • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

v-bind

• 缩写：:

• 修饰符：

  • .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
  • .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
  • .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

• 用法：

  <!-- 绑定一个 attribute --><img v-bind:src="imageSrc"><!-- 动态 attribute 名 (2.6.0+) --><button v-bind:[key]="value"></button><!-- 缩写 --><img :src="imageSrc"><!-- 动态 attribute 名缩写 (2.6.0+) --><button :[key]="value"></button><!-- 内联字符串拼接 --><img :src="'/path/to/images/' + fileName"><!-- class 绑定 --><div :class="{ red: isRed }"></div><div :class="[classA, classB]"></div><div :class="[classA, { classB: isB, classC: isC }]"><!-- style 绑定 --><div :style="{ fontSize: size + 'px' }"></div><div :style="[styleObjectA, styleObjectB]"></div><!-- 绑定一个全是 attribute 的对象 --><div v-bind="{ id: someProp, 'other-attr': otherProp }"></div><!-- 通过 prop 修饰符绑定 DOM attribute --><div v-bind:text-content.prop="text"></div><!-- prop 绑定。“prop”必须在 my-component 中声明。--><my-component :prop="someThing"></my-component><!-- 通过 $props 将父组件的 props 一起传给子组件 --><child-component v-bind="$props"></child-component><!-- XLink --><svg><a :xlink:special="foo"></a></svg>
  

  
  

  v-model

  • 限制：

    • <input>
    • <select>
    • <textarea>
    • componets

  • 修饰符：

    .lazy：不会实时跟随变化（input事件），等失焦后变化（change事件）

    .number：输入字符串转化为有效数字。

    .trim：输入首位空格过滤。

v-slot

• 缩写：#

• 用法：

  提供具名插槽或者需要接收prop的默认插槽。

• 示例：

  <!-- 具名插槽 --><base-layout>  <template v-slot:header>    Header content  </template>  Default slot content  <template v-slot:footer>    Footer content  </template></base-layout><!-- 接收 prop 的具名插槽 --><infinite-scroll>  <template v-slot:item="slotProps">    <div class="item">      {{ slotProps.item.text }}    </div>  </template></infinite-scroll><!-- 接收 prop 的默认插槽，使用了解构 --><mouse-position v-slot="{ x, y }">  Mouse position: {{ x }}, {{ y }}</mouse-position>
  

v-pre

• 用法：

  跳过这个节点和子节点的编译过程，可以用来显示原始的Mustache标签，跳过大量没有指令的节点会加快编译。

• 示例：

  <span v-pre>{{ this will not be compiled }}</span>

v-cloak

• 用法：

  这个指令保持在元素上直到关联实例结束编译。

  当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题

• 示例：

  [v-cloak] {
    display: none;
  }
  <div v-cloak>
    {{ message }}
  </div>
  

  直到编译完成才会显示

v-once

• 详细：

  只渲染元素和组件 一次，随后的渲染，元素和子节点会被当做静态元素并跳过渲染。用于优化性能。

特殊attribute

key

• 用法：

  用于vue的虚拟DOM算法中，对于新旧树的差异，使用key会尽量替代和交换位置，而不是直接修改。

  如下场景时它可能会很有用：

  • 完整地触发组件的生命周期钩子
  • 触发过渡

  例如：

  <transition>
    <span :key="text">{{ text }}</span>
  </transition>
  

  当 text 发生改变时，<span> 总是会被替换而不是被修改，因此会触发过渡。

ref

• 用法：

  ref被用来给元素或者子组件注册引用信息。被注册的对象可以在父组件的$refs对象上使用。

• 示例：

  <!-- `vm.$refs.p` will be the DOM node -->
  <p ref="p">hello</p>
  
  <!-- `vm.$refs.child` will be the child component instance -->
  <child-component ref="child"></child-component>
  

  关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定

is

• 用法：

  用于动态组件且基于DOM内模板的限制来工作。

• 示例：

      <!-- 当 `currentView` 改变时，组件也跟着改变 -->    <component v-bind:is="currentView"></component>    <!-- 这样做是有必要的，因为 `<my-row>` 放在一个 -->    <!-- `<table>` 内可能无效且被放置到外面 -->    <table>      <tr is="my-row"></tr>	</table>
  

内置的组件

component

• 用法：

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

  <!-- 动态组件由 vm 实例的 `componentId` property 控制 --><component :is="componentId"></component><!-- 也能够渲染注册过的组件或 prop 传入的组件 --><component :is="$options.components.child"></component>
  

keep-alive

• props:

  include -字符或者正则表达式。只有匹配的组件会被缓存。

  exclude -字符串或正则表达式。匹配的组件将不会被缓存。

  max -数字。最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

   	// 1. 将缓存 name 为 test 的组件  	<keep-alive include='test'>      <router-view/>    </keep-alive>	// 2. 将不缓存 name 为 test 的组件	<keep-alive exclude='test'>  	  <router-view/>	</keep-alive>	// 3. 使用正则表达式，需使用 v-bind	<keep-alive :include='/a|b/'>  	  <router-view/>	</keep-alive>	
  

• 用法：

  <keep-alive>包裹的动态组件时，会缓存不活动的组件实例，而不是销毁它们。

  当组件在kepp-alive里面切换时，会触发activated和deactivated生命周期函数。

transition

• props:

  name：用于自动生成CSS过度类名。

  appear：是否在过度时使用渲染。

  css：是否使用CSS过度类。

  
  • enter-class - string
  • leave-class - string
  • appear-class - string
  • enter-to-class - string
  • leave-to-class - string
  • appear-to-class - string
  • enter-active-class - string
  • leave-active-class - string
  • appear-active-class - string

  type：指定过度事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。

  mode：控制离开/进入过度的时间序列。有效的模式有out-in和in-out；默认同时进行。

  duration：{ enter: number, leave: number } 指定过渡的持续时间。

• 事件：

  • before-enter
  • before-leave
  • before-appear
  • enter
  • leave
  • appear
  • after-enter
  • after-leave
  • after-appear
  • enter-cancelled
  • leave-cancelled (v-show only)
  • appear-cancelled

• 用法：

  <transition> 元素作为单个元素/组件的过渡效果

  <transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

  <!-- 简单元素 -->
  <transition>
    <div v-if="ok">toggled content</div>
  </transition>
  
  <!-- 动态组件 -->
  <transition name="fade" mode="out-in" appear>
    <component :is="view"></component>
  </transition>
  
  <!-- 事件钩子 -->
  <div id="transition-demo">
    <transition @after-enter="transitionComplete">
      <div v-show="ok">toggled content</div>
    </transition>
  </div>
  

  new Vue({  ...  methods: {    transitionComplete: function (el) {      // 传入 'el' 这个 DOM 元素作为参数。    }  }  ...}).$mount('#transition-demo')
  

  
  

transiton-group

• props:

  • tag - string，默认为 span
  • move-class - 覆盖移动过渡期间应用的 CSS 类。
  • 除了 mode，其他 attribute 和 <transition> 相同。

• 事件：

  • 事件和 <transition> 相同。

• 用法：

  <transition-group> 元素作为多个元素/组件的过渡效果。<transition-group> 渲染一个真实的 DOM 元素。默认渲染 <span>，可以通过 tag attribute 配置哪个元素应该被渲染。

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