1、vue指令和自定义指令

什么是指令？
v-model、v-bind、v-on、v-show、v-if 等这些由 v- 开头的都是Vue中的核心内置指令，他们的作用就是在元素的整个生命周期的某个阶段对DOM进行内容或者样式上的操作。
自定义指令：
当Vue中的核心内置指令不能够满足我们的需求时，我们可以定制自定义的指令用来满足开发的需求。

2、使用自定义指令

2.1、全局注册

注册一个自定义指令有全局注册与局部注册，全局注册注册主要是用过Vue.directive方法进行注册。
Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数。
举例：刷新页面自动获取焦点：

<div id="app">账号：<input type="text">密码：<input v-focs type="text"></div><script src="./Vuejs/vue2-6-12.js"></script><script>// Vue.directive("id",{对象或者函数})// 定义全局指令Vue.directive("focs",{inserted:function(el){console.log(el);el.focus();}});new Vue({el:"#app",data:{msg:"刷新页面获取焦点"}})</script>

2.2、局部注册

局部注册通过在组件options选项中设置directives属性。

<div id="app">账号：<input type="text">密码：<input v-focs type="text"></div><script src="./Vuejs/vue2-6-12.js"></script><script>new Vue({el:"#app",data:{msg:"刷新页面获取焦点"},directives:{'focs':{inserted:function(el){console.log(el);}}}})</script>

3、钩子函数

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

binding：一个对象，包含以下 property：
①：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 编译生成的虚拟节点。
⑧：oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

举例：自定指令完成类似v-text属性，但是输入的内容自动变成大写：

  <!-- 需求：定义两个指令，和v-text类似，但是输入的text内容为大写，另外一个为小写--><div id="app"><p v-textu="msg"></p></div><script src="./Vuejs/vue2-6-12.js"></script><script>var vm = new Vue({el:"#app",data:{msg:"zhangjianhua",},directives:{'textu':{inserted:function(el,binding){//  console.log(binding) el.innerHTML = binding.value.toUpperCase();}}}})</script>

注意的是，我们这里的binding当p标签中v-textu没有绑定msg时，那么它value属性就为undefined，只有当它绑定了msg后，才有value属性。
当没有使用v-textu=”msg”时：

 <div id="app"><p v-textu></p></div><script src="./Vuejs/vue2-6-12.js"></script><script>var vm = new Vue({el:"#app",data:{msg:"zhangjianhua",},directives:{'textu':{inserted:function(el,binding){console.log(binding);console.log(binding.value);}}}})</script>

我们可以看到它的value属性值为undefined，当我们绑定msg时：

 <p v-textu = "msg"></p>

举例：自我练习，使用input输入框输入内容，将内容以大写方式写在input框下面。

<div id="app"><input type="text" v-model="msg"><p v-input-upper="msg"></p></div><script src="./Vuejs/vue2-6-12.js"></script><script>var vm = new Vue({el:"#app",data:{msg:"",},directives:{"input-upper":function(el,binding){el.innerHTML = binding.value.toUpperCase();}}})</script>

9、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 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...
vue 自定义指令 directives
原文链接: vue 自定义指令 directives 上一篇: vue 事件修饰符 stop,capture,prevent 下一篇: js 坑... vue 可以自己扩充指令增加一个v-color ...
vue自定义指令directives同时传递多个参数
vue自定义指令directives同时传递多个参数 // 自定义指令v-hClick绑定for循环第二个参数,这里的inx还可以是其他标的,指令中可通过其做出判断在dom,将多个参数通过数组的格式 ...
vue自定义指令基础
今天,我们讲讲vue自定义指令基础知识,主要包括指令如何创建,如何注册,以及指令的相关属性钩子函数. 指令的注册我们通过以下方法注册一个全局自定义指令 Vue.directive(name,defi ...

9、Vue自定义指令

Vue自定义指令