展台设计灵感网站,网站宣传片,广州万户网络科技有限公司,马鞍山网站制作公司自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。在vue中使用directive来创建自定义指令
钩子函数
指令定义函数提供了几个钩子函数#xff08;可选#xff09;#xff1a; bind: 只调用一次#xff0c;指令第一次绑定到元素时调用可选 bind: 只调用一次指令第一次绑定到元素时调用用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用父节点存在即可调用不必存在于 document 中。 update: 被绑定元素所在的模板更新时调用而不论绑定值是否变化。通过比较更新前后的绑定值可以忽略不必要的模板更新详细的钩子函数参数见下。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次 指令与元素解绑时调用。 这些钩子函数中的this并没有被维护成vm因为所绑定的元素以及参数在钩子函数中都能获取到 。
钩子函数参数
钩子函数的参数有
el: 指令所绑定的元素可以用来直接操作 DOM 。binding: 一个对象包含以下属性 name: 指令名不包括 v- 前缀。value: 指令的绑定值 例如 v-my-directive1 1, value 的值是 2。oldValue: 指令绑定的前一个值仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression: 绑定值的表达式或变量名。 例如 v-my-directive1 1 expression 的值是 1 1。arg: 传给指令的参数。例如 v-my-directive:foo arg 的值是 foo。modifiers: 一个包含修饰符的对象。 例如 v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。 示例
div idapp v-runoob:hello.a.bmessage
/divscript
Vue.directive(runoob, {bind: function (el, binding, vnode) {var s JSON.stringifyel.innerHTML name: s(binding.name) br value: s(binding.value) br expression: s(binding.expression) br argument: s(binding.arg) br modifiers: s(binding.modifiers) br vnode keys: Object.keys(vnode).join(, )}
})
new Vue({el: #app,data: {message: 菜鸟教程!}
})
/script
简写
如果不需要使用钩子函数也能使用简写形式
Vue.directive(runoob, function (el, binding) {// 设置指令的背景颜色el.style.backgroundColor binding.value.color
})
用于只需要处理指令的inserted或bind钩子函数的简单场景。
生命周期
定义
Vue的生命周期就是实例从创建到销毁的一个过程即从创建、初始化数据、编译模板、挂载Dom-渲染、更新-渲染卸载等一系列的过程。 Vue的生命周期分为八个阶段
1beforeCreate 在实例初始化(new Vue())后执行此时的数据监听和事件绑定机制都未完成获取不到DOM节点。
2created 这个阶段vue实例已经创建以下内容已被配置完毕数据侦听、计算属性、方法、事件/侦听器的回调函数。但挂载阶段还没开始仍然获取不到DOM元素。在此阶段初始化完成时的事件写在这里可以进行异步请求
3beforeMount 在这个阶段完成了DOM的初始化但仍然无法获取到具体的DOM元素因为vue还没有进行根节点挂载但是根节点已经创建完成下面Vue对DOM的操作将围绕这个根节点进行beforeMount这个阶段是过渡性的在项目中使用得比较少
4mounted 在这个阶段实例已经被挂载完成了也就是能获取到数据和DOM元素了。
5beforeUpdate 在数据发生改变但页面还没有完成更新时执行的操作在此阶段视图的数据和DOM元素的数据没有保持同步。这里适合在现有 DOM 将要被更新之前访问它比如移除手动添加的事件监听器
6updated 这个时候数据发生了改变并且视图页面也已经完成了更新因此该阶段看到的DOM元素的内容是最新内容。
7beforeDestroy 此阶段Vue实例仍然完全可用也就是还能访问到页面的响应式数据和事件。可以在这里注销eventBus等事件
8destroyed DOM元素被销毁此时对应 的Vue 实例所有指令都被解绑所有的事件监听器被移除所有的子实例也都被销毁。
