vue学习笔记（二）

最新推荐文章于 2025-09-07 01:02:55 发布

weixin_34313182

最新推荐文章于 2025-09-07 01:02:55 发布

阅读量64

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/3026577/blog/2872655

本文深入探讨Vue.js中的自定义指令与构造器的使用方法。解析如何创建自定义指令，如v-boblee，及其实现文字颜色变化的功能。同时，详细介绍了自定义指令的生命周期，包括bind、inserted、update、componentUpdated和unbind阶段。此外，文章还讲解了Vue.extend构造器的使用，演示如何创建组件子类并挂载实例。最后，阐述了Vue.set方法的重要性，特别是在外部更新内部data时的必要性。

2019独角兽企业重金招聘Python工程师标准>>>

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