海曙网站建设网站,网络创始人 网站建设,网站的域名做邮箱吗,网站找到后台了 如何破解账号 密码在某些情况下#xff0c;我们需要对底层DOM进行操作#xff0c;而内置的指令不能满足需求#xff0c;就需要自定义指令。一个自定义指令由一个包含类似组件的生命周期的钩子的对象来定义#xff0c;钩子函数会接收到指令所绑定的元素作为参数。
定义指令
常用两种方式进行…在某些情况下我们需要对底层DOM进行操作而内置的指令不能满足需求就需要自定义指令。一个自定义指令由一个包含类似组件的生命周期的钩子的对象来定义钩子函数会接收到指令所绑定的元素作为参数。
定义指令
常用两种方式进行自定义指令一种是全局定义另一种在当前组件中定义
// 局部定义
export default {name:test,data(){return {}},directives: {focus: {bind: function(el, bindings, vnode) {/* ... */},inserted: function(el, bindings, vnode) { el.focus(); },update: function(el, bindings, vnode) { /* ... */ },componentUpdated: function(el, bindings, vnode) { /* ... */ },unbind: function(el, bindings, vnode) { /* ... */ }}},methos:{}
};// 全局定义
const app createApp({});
// 使 v-focus 在所有组件中都可用
app.directive(focus, {bind: function(el, bindings, vnode) {/* ... */},inserted: function(el, bindings, vnode) { el.focus(); },update: function(el, bindings, vnode) { /* ... */ },componentUpdated: function(el, bindings, vnode) { /* ... */ },unbind: function(el, bindings, vnode) { /* ... */ }
});// 全局和局部的调用方式相同
input v-focus钩子函数 钩子函数就是拦截模块渲染流程的“挂钩”在不同的节点拦截或监听事件以完成自定义指令的操作。五种钩子拦截的事件分别是初始化、插入节点、渲染完成监听绑定值的变化和销毁节点。
bind只调用一次指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted节点第一次插入到父节点页面中会触发只会触发这一次.update当前元素渲染完成绑定的值发生改变的时候触发componentUpdated当前元素所在的区域全部渲染完成绑定的额值发生改变时触发。unbind只调用一次指令与元素解绑时调用。比如离开页面或销毁组件等
钩子参数
钩子参数即绑定到钩子函数上的参数 el指令绑定到的元素。这可以用于直接操作 DOM。 binding一个对象包含以下属性。 value传递给指令的值。例如在 v-my-directive1 1 中值是 2。oldValue修改前的值仅在 beforeUpdate 和 updated 中生效。无论是否修改都可以访问。arg传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中参数是 foo。modifiers一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中修饰符对象是 { foo: true, bar: true }。instance使用该指令的组件实例。 dir指令的定义对象。 vnode代表绑定元素的底层 VNode。 prevNode代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。
传递参数
传递钩子参数的方式有如下几种
实例化一个指令但没有参数 v-xxx。例如上面提到的 v-focus传递值的指令 v-xxx“value”。value 值是变量一般会绑定到 bingdings 的 value 上传递字符串的指令 v-xxx“‘string’”例如 v-htmlpContent/p传递参数的指令 v-xxx:arg1value1值arg1和value1分别绑定到bingdings的arg和value传递动态参数的指令 v-xxx:[arg]value1变量 arg 可以实现动态指令参数使用修饰符(modifier)的指令 v-xxx:arg.m1“value”m1会被绑定到 bingdings的modifier上。允许多个修饰符用逗号连接绑定。例如 a.b.c 对应的是{a:true,b:true,c:true}
函数简写
在很多时候你可能想在 bind 和 update 时触发相同行为而不关心其它的钩子。比如这样写
Vue.directive(color-swatch, function (el, binding) { el.style.backgroundColor binding.value
})对象字面量
如果指令需要多个值可以传入一个 JavaScript 对象字面量。记住指令函数能够接受所有合法的 JavaScript 表达式。
div v-demo{ color: white, text: hello! }/divrender函数使用自定义指令
在vue当时我们使用指令一般是如下的方式
templatedivel-button typeprimary v-norepeat.disabled{time:3000} clickdoUpdateItem保存/el-button/div
/template但是我们想在render函数里面写上面的指令改怎么写呢 首先想到的就是下面的写法但是报错了
1.使用创建虚拟节点的函数
export default {render(h) {const time 3000; // 这里是 v-norepeat.disabled 的值return h(div,[h(el-button,{props: {type: primary},directives: [{name: norepeat,value: {time }, // value 是指令绑定的值arg: null, // arg 是指令的参数modifiers: {disabled: true // modifiers 是指令的修饰符}}],on: {click: this.doUpdateItem}},保存)]);},methods: {doUpdateItem() {console.log(Button clicked!);// 这里放置点击后的操作}}
};
jsx写法
export default {render() {const time 3000; // 这里是 v-norepeat.disabled 的值const directives [{name: norepeat,value: {time}, // value 是指令绑定的值arg: null, // arg 是指令的参数modifiers: {disabled: true // modifiers 是指令的修饰符}}]return (divel-button typeprimary {...{directives}} onClick{this.doUpdateItem}保存/el-button/div)},methods: {doUpdateItem() {console.log(Button clicked!);// 这里放置点击后的操作}}
};
