Vue自定义指令的妙用

什么是自定义指令

vue官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外Vue还允许开发者自定义指令。
分类：私有自定义指令、全局自定义指令

私有自定义指令

在当前组件使用

使用私有定义指令

<h1 v-color="color">App 根组件</h1><p v-color="'blue'">测试</p>

私有自定义指令的节点

directives:{// 定义名为 color 的指令，指向一个配置对象
color:{// 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数// 形参中的 el 表示当前指令所绑定到的那个 DOM 对象//第二个参数为对象bind(el, binding) {console.log('触发了 v-color 的 bind 函数')//通过对象.value就可以拿到对象传递的值el.style.color = binding.value}}
}

directives:{color:
{bind(el, binding) { el.style.color = binding.value}
//bind函数只调用一次:当指令第一次绑定到元素时调用，当DOM跟新时bind函数不会触发。update函数会在每次DOM更新时被调用update(el, binding) {console.log('触发了 v-color 的 update 函数')el.style.color = binding.value}   color(el, binding) {el.style.color = binding.value}}}

优化(函数简写)

 directives: {color(el, binding) {el.style.color = binding.value}}

全局自定义指令

全局自定义指令需要通过"Vue.directive()"进行声明，示例代码如下：

全局声明的自定义指令和过滤函数都需要放在main文件里面

Vue.directive('color', {bind(el, binding) {el.style.color = binding.value},update(el, binding) {el.style.color = binding.value}
})

简写：

Vue.directive('color', function(el, binding) {el.style.color = binding.value
})

Vue自定义指令的妙用相关推荐

vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
vuejs 指令封装 button 加载效果_这些Vue自定义指令，让你的项目开发爽到爆
受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-html 和 v-once等),每个指令都有自身的用途.完整的指令列表可以在这里查看. 这还没完,更棒的是可以开发自定义指令. ...
vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
pyqt5 treeview鼠标右键菜单事件_【动手实践】使用 Vue 自定义指令实现右键菜单...
本文来自于神奇的程序员前言浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就 ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: 一般在需要 DOM 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...
9、Vue自定义指令
Vue自定义指令 1.vue指令和自定义指令 2.使用自定义指令 2.1.全局注册 2.2.局部注册 3.钩子函数 1.vue指令和自定义指令什么是指令? v-model.v-bind.v-on.v ...
vue 自定义指令 directives
原文链接: vue 自定义指令 directives 上一篇: vue 事件修饰符 stop,capture,prevent 下一篇: js 坑... vue 可以自己扩充指令增加一个v-color ...
vue自定义指令directives同时传递多个参数
vue自定义指令directives同时传递多个参数 // 自定义指令v-hClick绑定for循环第二个参数,这里的inx还可以是其他标的,指令中可通过其做出判断在dom,将多个参数通过数组的格式 ...

Vue自定义指令的妙用

什么是自定义指令

私有自定义指令

在当前组件使用

全局自定义指令

全局声明的自定义指令和过滤函数都需要放在main文件里面

Vue自定义指令的妙用相关推荐

最新文章

热门文章