vue自定义指令用法

1、vue中的指令有：
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-pre
v-cloak
v-once

2.自定义指令语法：


// 注册一个全局自定义指令,例如 `v-focus`
Vue.directive('指令名字', 钩子)                   //注意：自定义指令名字不用加v-了。钩子里传一个参数，在参数中做事情。一般用来操作DOM，否则没什么意义。

3.注册自定义指令分类全局注册和局部注册两种：

局部注册：
directives: {focus: {// 指令的定义inserted: function (el) {el.focus()}}
}

全局注册：
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus()}
})

然后我们就可以在标签中愉快的调用啦：

<input v-focus>

4.钩子函数（钩子函数有如下几种：）

* bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。* inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。* update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。* componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。* unbind：只调用一次，指令与元素解绑时调用。

5.钩子函数参数

* el：指令所绑定的元素，可以用来直接操作 DOM 。* binding：一个对象，包含以下属性：* name：指令名，不包括 v- 前缀。* value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。* oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。* expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1"中，表达式为 "1 + 1"。* arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。* modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
* vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
* oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

6.如果我们只关心bind还有update触发的话，原先写钩子处直接写一个函数就行，这是我们最常用的方法。
例如：我们定义一个把字体颜色变为红色的自定义指令。(v-red)

Vue.directive('red',{inserted（el,binding){el.style.color = "red"}
})调用：
<div v-red>你好</div>

例2：使用binding(v-color=“red”)

Vue.directive('color',{inserted（el,binding){console.log(binding)el.style.color = "red"}
})const vm =new Vue（{el：‘root’，data：{red：‘xxx’}
}）调用：
<div v-color="red">你好</div>

*如何区分express和value

上面的例子，
Vue.directive('color',{inserted（el,binding){console.log(binding.express）   //打印1+1console.log(binding.value）       //打印2}
})调用：
<div v-color="1+1">你好</div>

例3：v-color:blue

Vue.directive('color',{inserted（el,binding){el.style.color = binding.arg}
})调用：
<div v-color:blue>你好</div>

例4：使用函数 (v-font:size="‘50px’")

Vue.directive('color',function(el,binding){let {arg,value} =bindingel.style[_.camelCase('font-'+org)]=value
})调用：
<div v-font:size="'50px'">你好</div>
<div v-font:weight="'700'">你好</div>

vue自定义指令用法相关推荐

vuejs 指令封装 button 加载效果_这些Vue自定义指令，让你的项目开发爽到爆
受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-html 和 v-once等),每个指令都有自身的用途.完整的指令列表可以在这里查看. 这还没完,更棒的是可以开发自定义指令. ...
Vue自定义指令介绍及原理
Vue自定义指令 Vue指令: 在使用Vue框架进行前端开发时,我们经常会使用一些特殊指令来快速实现一些效果或功能. 常见指令如:v-bind.v-if (v-else).v-show.v-html等 ...
Vue自定义指令及实现图片懒加载指令
一. 速识概念: 在我们使用 Vue 的过程中,遇到了很多方便我们操作的vue内置指令,以 v-xxx 表示.比如有 v-module,v-for,v-if,v-show 等等,每个指令都能实现一 ...
15个Vue自定义指令，让你的项目开发爽到爆
这15个Vue自定义指令,让你的项目开发爽到爆李中凯老师,8年前端开发,前端负责人,擅长JavaScript/Vue. 受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-ht ...
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
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 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...

vue自定义指令用法

vue自定义指令用法相关推荐

最新文章

热门文章