一、自定义指令

vue 作者允许开发者自己创建一些指令，指令的类型分为全局自定义指令和局部自定义指令

指令的生命周期钩子函数：
1.bind(el,binding){} 指令第一次绑定到元素的时候触发，el表示当前绑定指令的元素，binding表示参数对象(可选项)，该生命周期中无法获取到父节点
2. inserted(el,binding){} 表示绑定指令的元素插入到父节点的时候触发，该生命周期可以获取到父节点
3. update(el,binding){} 绑定指令的元素上的数据发生更新的时候触发
4. componentUpdated(el,binding){} 绑定指令的元素节点更新时,触发
5. unbind(el,binding){} 表示当前指令解除绑定的时候触发

二、全局自定义指令

Vue.directive(指令名, {生命周期钩子函数})，全局指令可以在不同的组件实例中使用

这段代码，在vue上定义了全局指令v-color，使用该指令将元素字体颜色调为对应颜色，例如<p v-color='"red"'>{{msg}}</p>将p标签字体调为红色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="js/vue.js"></script></head><body><div id="app"><p v-color='"red"'>{{msg}}</p></div></body>
</html>
<script>Vue.directive("color", {bind(el, binding) {el.style.color = binding.value;console.log(el.parentNode);},inserted(el, binding) {console.log(el.parentNode);},update() {},componentUpdated() {},unbind() {},});const vm = new Vue({el: "#app",data: {msg: "白日依山尽",},});
</script>

三、局部自定义指令

局部指令 directives: {指令名1: {生命周期钩子函数}, 指令名2: {生命周期钩子函数},…}，局部指令只能在当前的组件中使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="js/vue.js"></script></head><body><div id="app"><p v-green='"green"'>{{msg}}</p><p v-red>{{msg}}</p></div><hr /><div id="app2"><p v-green='"green"'>{{msg}}</p><p v-red>{{msg}}</p></div></body>
</html>
<script>Vue.directive("red", {bind(el) {el.style.color = "red";},});const vm = new Vue({el: "#app",data: {msg: "欲穷千里目",},methods: {},directives: {green: {bind(el, binding) {el.style.color = binding.value;},inserted(el, binding) {},update() {},componentUpdated() {},unbind() {},},},});const vm2 = new Vue({el: "#app2",data: {msg: "欲穷千里目",},});
</script>

vue中directive相关推荐

Vue中directive的使用
一.钩子函数一个指令定义对象可以提供如下几个钩子函数 (均为可选): bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inserted:被绑定元素插入父节点时调 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
vue中点击事件的写法_vue中的事件：原生事件与自定义事件__Vue.js
模板编译 processAttrs 对于ast attributes处理(v-on/@) 利用onRE与dirRE来捕获事件这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称 ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
Vue 中常见的面试题/知识点整理
看看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚 ...
vue中防止按钮重复点击提交的方法
vue中防止按钮重复点击提交的方法 vue中防止按钮重复点击提交的方法一.自定义全局指令二.自定义局部指令三.动态控制disabled属性 vue中防止按钮重复点击提交的方法经常会遇到的一个问 ...
vue中directives的用法
Vue中directives的用法关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释当前文章主要讲述directives怎么用,directiv ...

vue中directive