1. 全局注册自定义指令

在main.js 中定义

Vue.directive('focus', {inserted: function(el){//el表示指令所绑定的元素el.focus()}})//在组件中使用<input type="text" v-focus></input>

自定义指令传参 :

在main.js 中定义

Vue.directive('color', {bind: function(el, binding){//根据指令的参数设置背景颜色el.style.backgroundColor = binding.value;   //value就是绑定的值,是字符串red}
})//在组件中使用
<div v-color="color"></div>data() {return {color:"red"}
}

2.局部指令

组件中定义使用

<input type="text" v-focus></input>directives: {focus:{inserted: function(el){//el表示指令所绑定的元素el.focus()} }
}

3.自定义指令钩子函数

钩子函数 :

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

指令钩子函数会被传入以下参数

el: 指令所绑定的元素，可以用来直接操作 DOM，就是放置指令的那个元素。
binding: 一个对象，里面包含了几个属性
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

Vue自定义指令注册相关推荐

Vue自定义指令原来这么简单
本篇学习目标能够了解组件进阶知识能够掌握自定义指令创建和使用能够完成tabbar案例的开发 1. 组件进阶 1.0 组件进阶 - 动态组件目标: 多个组件使用同一个挂载点,并动态切换,这就是动 ...
Vue自定义指令-实时时间转换指令 v-time开发
目录前言 1. 新建html.index.js文件 2. 时间转换逻辑 3. 新建 time.js 文件 4 总结前言为了显示出实时性 ,在一些社交类产品中,比如WX朋友圈或微博等地方,作者发 ...
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 也 ...
9、Vue自定义指令
Vue自定义指令 1.vue指令和自定义指令 2.使用自定义指令 2.1.全局注册 2.2.局部注册 3.钩子函数 1.vue指令和自定义指令什么是指令? v-model.v-bind.v-on.v ...
vue自定义指令基础
今天,我们讲讲vue自定义指令基础知识,主要包括指令如何创建,如何注册,以及指令的相关属性钩子函数. 指令的注册我们通过以下方法注册一个全局自定义指令 Vue.directive(name,defi ...
vue鼠标右键自定义菜单_使用Vue自定义指令实现右键菜单
前言浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就想着能不能像vue的内置指 ...

Vue自定义指令注册

1. 全局注册自定义指令

2.局部指令

3.自定义指令钩子函数

指令钩子函数会被传入以下参数

Vue自定义指令注册相关推荐

最新文章

热门文章