vue自定义全局和局部指令
一、介绍
1、除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。
2、自定义指令的分类
1、全局指令
2、局部指令
3、自定义全局指令格式
Vue.directive(指令ID,指令定义对象)
4、 自定义局部指令格式
略
二、指令对象中的钩子函数（一个指令定义对象可以提供如下几个钩子函数）
1、bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
2、inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
3、update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
4、componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
5、unbind：只调用一次，指令与元素解绑时调用。
三、钩子函数参数（指令钩子函数会被传入以下参数：）
1、el：指令所绑定的元素，可以用来直接操作 DOM 。
2、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 }。
3、vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
4、oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
注释：除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
四、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="itany">
<!-- <h3 v-hello>{{msg}}</h3> -->
<button @click="change">更新数据</button> <h3 v-world:wbs17022.hehe.haha="username">{{msg}}</h3> <!-- <p v-world>网博，专业的前端培训</p> --> <!-- <h3 v-wbs>网博</h3> --> <input type="text" v-model="msg" v-focus>
</div> <script>
/**
* 自定义全局指令
* 注：使用指令时必须在指令名称前加前缀v-，即v-指令名称
*/
Vue.directive('hello',{
bind(){ //常用！！
alert('指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作');
},
inserted(){
alert('被绑定元素插入到DOM中时调用');
},
update(){
alert('被绑定元素所在模板更新时(前)调用');
},
componentUpdated(){
alert('被绑定元素所在模板完成一次更新周期时调用');
},
unbind(){
alert('指令与元素解绑时调用，只调用一次');
}
});
//钩子函数的参数
Vue.directive('world',{
bind(el,binding){
// console.log(el，binding); //第一个参数表示指令所绑定的元素，是个dom对象，第二个参数是个对象
// el.style.color='red'; console.log(binding); //name
}
});
//传入一个简单的函数，bind和update时都会调用
Vue.directive('wbs',function(){
alert('wbs17022');
}); var vm=new Vue({
el:'#itany',
data:{
msg:'welcome to itany',
username:'alice'
},
methods:{
change(){
this.msg='欢迎来到南京网博'
}
},
directives:{ //自定义局部指令
focus:{
//当被绑定元素插入到DOM中时获取焦点，其他用法和自定义全局指令用法相同
inserted(el){
el.focus();//让这个元素获得焦点
}
}
}
});
</script> </body>
</html>
vue自定义全局和局部指令的更多相关文章
- VueJS自定义全局和局部指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 使用directive自定义全局指令 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面 ...
- vue 自定义全局方法
import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...
- 11 vue 自定义全局方法
//global.js// 定义vue 全局方 // 定义vue 全局方法 建议自定义的全局方法加_ 以示区分 export default { install(Vue, options = ...
- Vue自定义组件实现v-model指令
Tips: 本文所描述的Vue均默认是Vue2版本 在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定 那么,什么是双向绑定?通俗 ...
- vue自定义全局组件(自定义插件)
有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用elemen ...
- Vue 自定义全局消息框组件
消息弹框组件,默认3秒后自动关闭,可设置info/success/warning/error类型 效果图: 文件目录: Message.vue <template> <transit ...
- vue自定义全局公共函数
单独零散的函数 在main.js里进行全局注册 Vue.prototype.ajax = function (){} 在所有组件里可调用 this.ajax() 多个函数定义在一个对象里 // xx. ...
- Vue自定义全局Toast和Loading
如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件 ...
- vue 自定义全局按键修饰符
在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: JS部分: Vue.config.keyCodes = { f2:113, } var app ...
随机推荐
- 记centos 安装 mysql5.7.23.tar.gz教程
1.下载tar包,这里使用wget从官网下载 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.22-linux-glibc2. ...
- django 模板报错
"Requested setting TEMPLATE_DEBUG, but settings are not configured. You must either define the ...
- 解决微信小程序中Date.parse()获取时间戳IOS不兼容的问题(IOS为NaN的问题)
前端同事在做微信小程序时发现IOS获取的时间戳为空的问题,后来通过跟踪发现,原来是因为IOS系统不支持2017-01-01格式的时间导致的, var mydata = '2017-01-01 11:0 ...
- shell变量自增 || Python脚本接收参数
一.shell变量自增a=1a=$(($a+1))a=$[$a+1]a=`expr $a + 1`let a++ let a+=1 ((a++)) echo $a 二.python脚本接收参数 fro ...
- C++ 类的多态三（多态的原理--虚函数指针--子类虚函数指针初始化）
//多态的原理--虚函数指针--子类虚函数指针初始化 #include<iostream> using namespace std; /* 多态的实现原理(有自己猜想部分) 基础知识: 类 ...
- 重载(Overload)
重载(Overload) 重载(overloading) 是在一个类里面,方法名字相同,而参数不同.返回类型可以相同也可以不同. 每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表. 最 ...
- java 理解java的三大特性之继承
继承定义了类如何相互关联,共享特性.对于若干个相同或者相识的类,我们可以抽象出他们共有的行为或者属相并将其定义成一个父类或者超类,然后用这些类继承该父类,他们不仅可以拥有父类的属性.方法还可以定义自己 ...
- String.Join
在指定 String 数组的每个元素之间串联指定的分隔符 String,从而产生单个串联的字符串.(来源于MSDN) 有两个重载函数:[C#]public static string Join( ...
- Java并发框架——AQS之怎样使用AQS构建同步器
AQS的设计思想是通过继承的方式提供一个模板让大家能够非常easy依据不同场景实现一个富有个性化的同步器.同步器的核心是要管理一个共享状态,通过对状态的控制即能够实现不同的锁机制. AQS的设计必须考 ...
- 图像增强：直方图均衡和小波变换【matlab】
直方图均衡:统计图像像素灰度的直方图分布.对其进行重新分配以使图像的直方图分布更加均衡. 小波变换:图像轮廓主要体现在低频部分,可以通过对低频分解系数进行增强处理,对高频分解系数进行衰减处理,达到图像 ...