vue学习笔记（二）

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 来进行设置