当前位置：首页 > news >正文

Vue-自定义指令

news 来源：原创 2025/6/6 17:54:59

自定义指令

简单写法

v-twoAge

功能：当前年龄翻倍
注意：指令方法名称 小写

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>自定义指令</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>自定义指令</h1><div><h2>年龄：<span v-text="age"></span></h2><button @click="addAge">age+1</button><h2>年龄x2：<span v-twoAge="age"></span></h2></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",age:18},methods: {addAge(){this.age++;}},directives:{/**指令函数调用时机1. 指令与元素成功绑定时（初始化）2. 指令所在的模板被重新解析时*/twoage(element,bindObj){console.log(element)console.log(bindObj)/**1. element: 是HtmlElement,dom对象2. bindObj：绑定对象 v-twoAge 指令的值、名称等*/element.innerText = bindObj.value * 2}}});</script>
</html>

效果

在这里插入图片描述

标准写法

v-focus-input

功能： input 框内 展示当前年龄且聚焦
注意：指令方法名称 小写 或者 加引号
格式：‘filterName’:{bind(e,b){},inserted(e,b)(),update(e,b){}}

bind：指令与元素成功绑定时调用
inserted：指令所在元素被插入页面时调用
update：指令所在的模板被重新解析时调用

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>自定义指令</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>自定义指令</h1><h2>年龄：<span v-text="age"></span></h2><button @click="addAge">age+1</button><h2>年龄x2：<span v-two-age="age"></span></h2><br><input type="text" v-focos-input:value="age"></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",age:18},methods: {addAge(){this.age++;}},directives:{/**指令函数调用时机1. 指令与元素成功绑定时（初始化）2. 指令所在的模板被重新解析时*/'two-age'(element,bindObj){console.log(element)console.log(bindObj)/**1. element: 是HtmlElement,dom对象2. bindObj：绑定对象 v-twoAge 指令的表达式、名称、值等*/element.innerText = bindObj.value * 2},'focos-input':{// 指令与元素成功绑定时bind(element,bindObj){console.log("bind")element.value = bindObj.value},// 指令所在元素被插入页面时inserted(element,bindObj){console.log("inserted")// 操作dom插入后的一些操作element.focus(); // input聚焦},// 指令所在的模板被重新解析时update(element,bindObj) {console.log('update')element.value = bindObj.valueelement.focus(); // input聚焦}},}});</script>
</html>

效果

在这里插入图片描述

全局指令

格式：

Vue.directive(‘filterName’,function(e,b){})
Vue.directive(‘filterName’,{bind(e,b){},inserted(e,b)(),update(e,b){}})
注意：全局过滤器声明必须在Vue实例化之前

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>自定义指令</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>自定义指令</h1><h2>年龄：<span v-text="age"></span></h2><button @click="addAge">age+1</button><h2>年龄x2：<span v-two-age="age"></span></h2><br><input type="text" v-focos-input:value="age"></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.directive('two-age', function(element,bindObj){console.log(element)console.log(bindObj)/**1. element: 是HtmlElement,dom对象2. bindObj：绑定对象 v-twoAge 指令的表达式、名称、值等*/element.innerText = bindObj.value * 2});Vue.directive('focos-input',{// 指令与元素成功绑定时bind(element,bindObj){console.log("bind")element.value = bindObj.value},// 指令所在元素被插入页面时inserted(element,bindObj){console.log("inserted")// 操作dom插入后的一些操作element.focus(); // input聚焦},// 指令所在的模板被重新解析时update(element,bindObj) {console.log('updated')element.value = bindObj.valueelement.focus(); // input聚焦}});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",age:18},methods: {addAge(){this.age++;}},directives:{/**指令函数调用时机1. 指令与元素成功绑定时（初始化）2. 指令所在的模板被重新解析时*/// 'two-age'(element,bindObj){//   console.log(element)//   console.log(bindObj)//   /**//     1. element: 是HtmlElement,dom对象//     2. bindObj：绑定对象 v-twoAge 指令的表达式、名称、值等//   *///   element.innerText = bindObj.value * 2// },// 'focos-input':{//   // 指令与元素成功绑定时//   bind(element,bindObj){//     console.log("bind")//     element.value = bindObj.value//   },//   // 指令所在元素被插入页面时//   inserted(element,bindObj){//     console.log("inserted")//     // 操作dom插入后的一些操作//     element.focus(); // input聚焦//   },//   // 指令所在的模板被重新解析时//   update(element,bindObj) {//     console.log('updated')//     element.value = bindObj.value//     element.focus(); // input聚焦//   }// },}});</script>
</html>