vue 自定义指令 directive

一、用法：注册或获取全局指令

  Vue.directive(id,[definition])

二、钩子函数:
一个指令定义对象可以提供如下几个钩子函数(均为可选)：

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

// 注册
Vue.directive('my-directive',{bind:  function () {},         inserted: function () {},update: function () {},componentUpdated: function () {},unbind: function() {}
})

使用property的自定义钩子样例：

<template><div class="content"><div id="hook-arguments-example" v-demo:foo.a.b="message"></div></div>
</template>  <script>
export default {name: 'Content',data(){return{message: 'hello!'}},directives: {demo:{bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: '       + s(binding.name) + '<br>' +'value: '      + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: '   + s(binding.arg) + '<br>' +'modifiers: '  + s(binding.modifiers) + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ')}}}
}
</script>

全局指令
在main.js总注册：

Vue.directive('focus',{// 当绑定元素插入到 DOM 中inserted: function(el) {el.focus();}
})
new Vue({router,store,render: h => h(App),
}).$mount('#app')

页面引入：

<template><div class="content"><input type="text" v-focus/></div>
</template>

2.局部指令

<template><div class="content"><input type="text" v-focus/></div>
</template>  <script>
export default {name: 'Content',directives: {focus: {// 指令的定义inserted: function(el) {el.focus();}}}
}
</script>

1、vue.directive的作用

vue.directive是我们除了内置的指令（如v-model和v-show）之外的自定义指令。自定义指令是对普通DOM元素进行的底层操作，它是一种有效的的补充和扩展，不仅可以用于定义任何的dom操作，并且是可以复用的，

2、vue.directive的使用场景
例如在图片加载完成前，用随机的背景色占位，图片加载完成后直接渲染出来，用自定义指令可以方便的实现该问题。还有高亮类的操作，可以将其封装为自定义指令。
3、使用vue.directive的3个demo

<template><div><div id="app"><input v-focus /></div><hr><p style="width:200px;height:200px" v-pin='colors'>trying</p> <hr><div id="app" v-demo:foo.a.b="message"></div></div>
</template>
<script>
import Vue from "vue"; // 1、输入框聚焦
Vue.directive("focus", {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus();},
});// 2、绑定背景颜色
Vue.directive('pin', function(el, binding) { //背景颜色el.style.background = binding.value
})// 3、文字显示
Vue.directive('demo', {bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: '       + s(binding.name) + '<br>' +'value: '      + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: '   + s(binding.arg) + '<br>' +'modifiers: '  + s(binding.modifiers) + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ')}
})export default {name: "directive",data() {return {colors:"",//定义变量接收message:'left',}},created(){this.colors="pink"}
}
</script>

3.2、使用vue.directive的图片加载

<template><div><div v-img="url" style="width: 500px; height: 500px;"></div></div>
</template>
<script>
import Vue from "vue"; //需要引入
Vue.directive("img", {bind:function(el){    var color = Math.floor(Math.random() * 1000000);el.style.backgroundColor = "#" + color;},inserted: function (el, binding) {var img = new Image();img.src = binding.value;img.onload = function () {el.style.backgroundImage = "url(" + binding.value + ")";};},
});export default {name: "directive",data() {return {url: "../../../1.jpg",//据具体图片存储文件夹而定};},
};
</script>

4、vue.directive的官方概念

1、vue.directive 有两个参数：id（string）和definition

2、vue.directive有5种钩子函数，分别是：bind, inserted ,update, componentUpdated, unbind

2.1、bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置

2.2、inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定被插入文档中）

2.3、update:所在组件的vnode更新时调用，但是可能发生在其子vnode更新之前，指令的值可能发生了变化，也可能没有

2.4、componentUpdate：指令所在组件的vnode及其子vnode全部更新后调用

2.5、unbind：只调用一次，指令与元素解绑时调用

3、钩子函数参数

el，binding（name,value,oldValue,expression,arg,modifiers）， vnode，oldvnode

4、动态指令参数

指令的参数可以是动态的，例如，v-myDirective:[argument]="value"中，argument参数可以根据组件实例数据进行更新

5、对象字面量

指令需要多个值，可以传入一个js对象字面量，指令函数接受所有合法的js表达式

5、vue.directive使用体验

5.1、增长了不同的知识点，

5.2、update组件更新前的状态。componentUpdated组件更新后的状态

5.3、bind时父节点为null，bind是在dom书绘制前调用

5.4、inserted时父节点存在，在dom树绘制后调用

vue 自定义指令 directive相关推荐

29.VUE自定义指令directive和inserted
VUE自定义指令directive和inserted 1.什么事自定义指令 1.2使用自定义指令的方式 2.设置自定义组件 2.1 设置全局指令 2.2 设置私有指令 2.3 钩子函数 3. 案例 1 ...
html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: 一般在需要 DOM 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...
vue 自定义指令 directive 全局 directives 局部 inserted update
vue 自定义指令需求效果全局 - 自定义指令代码局部 - 自定义指令代码自定义命令传值效果代码问点需求获取标签,扩展额外的功能效果全局 - 自定义指令代码 // mai ...
Vue 自定义指令(directive)
气温骤降,南京又开始了降温速冻模式,这谁受得了. 进入主题: vue自带了很多的指令,v-once.v-model.v-for等,这些指令对我们的代码带来了很多的帮助,也让他们的编写简单了不少,但是 ...
vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
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 也 ...
第三十九篇自定义指令 - directive
前面讲了关于在Vue中如何来进行封装swiper组件的内容,本篇内容讲到使自定义组件,讲这块内容也是同样为了后续再次回顾封装swiper组件变化做铺垫内容,那么什么是自定义指令,在前面的内容讲过了好些 ...
9、Vue自定义指令
Vue自定义指令 1.vue指令和自定义指令 2.使用自定义指令 2.1.全局注册 2.2.局部注册 3.钩子函数 1.vue指令和自定义指令什么是指令? v-model.v-bind.v-on.v ...

vue 自定义指令 directive

vue 自定义指令 directive相关推荐

最新文章

热门文章