标签：vue2x 自定义 标签 xxx Vue 指令 bind

自定义指令

Vue模板语法有两大类:

1. 插值语法:

1. 功能:用于解析标签体内容。
2. 写法:{{xxx}},xxx是js表达式，且可以直接读取到data中所有的属性.

2.指令语法:

1. 功能:用于解析标签(包括:标签属性、标签体内容、事件绑定…)
2. 举例:v-bind:href='xxx’或简写为 :href=“xxx”，xxx同样要写js表达式,且可以直接读取到data中所有的属性。
3. 备注:Vue中有很多的指令，且形式都是:v-???

自定义指令

你需要对普通dom元素进行底层操作，可以选择使用指令实现。比如 事件绑定 样式的消失和出现

一、局部指令

1. new Vue({
   directives:{指令名:配置对象}
   })
2. new Vue({
   directives:{指令名:回调函数} 这样写只有bind和update 2个回调
   })
3. 全局指令

• Vue.directive(指令名,配置对象) 或者 Vue.directive(指令名,回调函数)

配置对象中常用的三个回调

1. bind:指令与元素成功绑定时调用。
2. inserted: 指令所在元素被插入页面时调用
3. update:指令所在的模板结构被重新解析时调用
4. 都会接收到参数 element(当前对象) binding(一些数据) 例如:binding.value当前接收的值。vnode第三个参数,vnode.context可以获取组件的this
5. 这些中this的指向是window

备注:

1. 指令定义时不加v-,但是使用时要加
2. 指令如果是多个单词,要使用kebab-case命名方式，不要使用小驼峰命名方式

标签：vue2x,自定义,标签,xxx,Vue,指令,bind
来源： https://blog.csdn.net/weixin_45802907/article/details/121471786

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。