vue 学习笔记（二）directive

API

1.Vue.directive 自定义指令

Vue.directive 属于全局 API，可以用于自定义一些属于自己的指令，比如定义一个 v-boblee 的指令，作用是让文字变成红色

Vue.directive('boblee',function(el,binding,vnode){
	//el:指令所绑定的元素，可以用来直接操作 dom
	//binding:一个对象，包含指令的很多信息
	//vnode:Vue编译生成的虚拟节点
	el.style = 'color:' + binding.value;
});

自定义指令的生命周期：

共五个，分别是bind,inserted,update,componentUpdated,unbind

• bind 只调用一次，指令第一次绑定到元素时调用，可以定义一个绑定时执行一次的初始化事件
• inserted 被绑定元素插入父节点时调用
• update 被绑定元素所在的模板更新时调用，通过比较更新前后的绑定值，可以忽略不必要的模板更新
• componentUpdated 被绑定元素所在模板完成一次更新周期时调用
• unbind 只调用一次，指令与元素解绑时调用

2.Vue.extend 构造器

Vue.extend(options) 参数为一个包含组件选项的对象，用于创建一个子类

// 创建构造器
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')

3.Vue.set

Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法，外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。

为什么要使用 Vue.set?

由于Javascript的限制，Vue不能自动检测以下变动的数组:

• 当你利用索引直接设置一个项时，vue不会为我们自动更新
• 当你修改数组的长度时，vue不会为我们自动更新

我们在外部更新内部data时，需要用 Vue.set 来进行设置