vue:自定义指令
2020-08-14 19:24
190 查看
vue:自定义指令
vue除了内置的指令外,也允许注册自定义指令,当需要对普通DOM元素进行底层操作时,这时候就会用到自定义指令
一个指令定义对象可以提供如下几个钩子函数:
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind:只调用一次,指令与元素解绑时调用。
指令定义对象的钩子函数参数:
el:指令所绑定的元素,可以用来直接操作 DOM。 bindingname:获取到了自定义指令的名称,不包括v-前缀。 value:指令的绑定值,例如:v-demo="1 + 1"中,绑定值为2。 expression:字符串形式的指令表达式。例如v-demo="1 + 1"中,表达式为"1 + 1"。 arg:传给指令的参数,可选。例如v-demo:foo中,参数为"foo"。 modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar中,修饰符对象为{ foo: true, bar: true }。
除了 el之外,其它参数都应该是只读的,切勿进行修改。
<body> <div id="app"> <p v-color>文本</p> </div> <script src="./base/vue.js"></script> </body> <script> Vue.directive("color",{ bind(el,binding){ el.style.background="red" console.log(binding.name) } }) new Vue({ el:"#app", }) </script>
相关文章推荐
- vue 中自定义指令改变data中的值
- Vue 自定义指令(拖拽,右键菜单)
- 【vuejs深入一】深入学习vue指令,自定义指令解决开发痛点
- Vue自定义指令-拖拽
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
- 挖坑指南:Vue.directive()自定义指令的实践(含源码)
- vue-cli怎样写自定义指令的代码?
- vue自定义指令笔记
- Vue的土著指令和自定义指令实例详解
- Vue中自定义指令学习
- Vue自定义指令的语法规则
- 03、Vue.js---自定义指令
- 在Vue中通过自定义指令获取元素
- 自己写个vue.js插件(1):自定义指令的妙用
- Vue自定义指令详解
- 2.Vue自定义指令
- vue 自定义指令
- Vue.js-自定义指令
- Vue之自定义指令
- VUE-自定义指令