vue2.0 自定义指令详解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue2.2.js"></script>
</head>
<body>
<div id="app">
<div v-lang="color">{{num}}</div>
<p><button @click="add">add</button></p>
</div>
</body>
<script type="text/javascript">
Vue.directive('lang',function(el,binding){
console.log(el)//标签<div v-lang="color">{{num}}</div>
console.log(binding)//输出的是一个对象obj
el.style='color:'+binding.value//binding.value就是color颜色red。
})
var vm = new Vue({
el:"#app",
data:{
num:10,
color:'red'
},
methods:{
add:function(){
this.num++;
}
}
})
</script>
</html>
el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
利用钩子函数：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="vue2.2.js"></script>
</head> <body>
<div id="app">
<div v-lang="color">{{num}}</div>
<p><button @click="add">add</button></p>
</div>
<p>
<button onclick='unbind()'>解绑</button>
</p>
</body>
<script type="text/javascript">
function unbind() {
vm.$destroy();//另外起一个方法解绑
}
Vue.directive('lang', { //五个注册指令的钩子函数
bind: function() { //被绑定
console.log('1 - bind');
},
inserted: function() { //绑定到节点
console.log('2 - inserted');
},
update: function() { //组件更新
console.log('3 - update');
},
componentUpdated: function() { //组件更新完成
console.log('4 - componentUpdated');
},
unbind: function() { //解绑
console.log('5 - bind');
}
})
var vm = new Vue({
el: "#app",
data: {
num: 10,
color: 'red'
},
methods: {
add: function() {
this.num++;
}
}
})
</script> </html>
1、bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3、update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次，指令与元素解绑时调用。
vue2.0 自定义指令详解的更多相关文章
- vue2.0中router-link详解
vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- vue2.0自定义指令
前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...
- Vue.js 源码分析(二十四) 高级应用 自定义指令详解
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上 ...
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- vue2.0自定义指令的使用方法
感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...
- day3 自定义指令详解
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- vue.js自定义指令详解
写在文本前:相信在做vue的项目,你肯定接触了指令,我们常用vue内置的一些指令,比如v-model,v-text,v-if,v-show等等,但是这些内置指令不在本文的讲解范畴,本文想说的是其自定义 ...
- Vue2.0 - 自定义指令 vue-directive
Vue.directive('指令',function(el,binding,vnode){ el.style='color:'+binding.value;}); el : 指令所绑定的元素,可以用 ...
随机推荐
- Linux操作服务器的初识
1,服务器:顾名思义就是提供服务的机器,(超强性能的一台主机, 100G-500G内存) 2,运维自动化 运维人员, 一个人维护上百台服务器 3,CMDB运维资产管理平台 资产收集, 通过web界面, ...
- bzoj1833: [ZJOI2010]count 数字计数&&USACO37 Cow Queueing 数数的梦（数位DP）
难受啊,怎么又遇到我不会的题了(捂脸) 如题,这是一道数位DP,随便找了个博客居然就是我们大YZ的……果然nb,然后就是改改模版++注释就好的了,直接看注释吧,就是用1~B - 1~A-1而已,枚举全 ...
- YTU 2801: 用数字造数字(II)
2801: 用数字造数字(II) 时间限制: 1 Sec 内存限制: 128 MB 提交: 244 解决: 168 题目描述 输入一个3位以上的整数,求其中最大的两个数字之和与最小的数字之和之间的 ...
- BLE广播数据的抓包解析
前言: 报文由数据字节组成同时是按比特传输的,这就免不了牵涉到字节序的问题. 对于各个字节的传输,总是从最低位开始传输.如0x80是按00000001发送的,0x01是按10000000发送的. 同时 ...
- Linux 打包classes
进入项目后 tar -zcvf ~/${HOSTNAME}-${PWD##*/}-$(date +%Y-%m-%d)-classes.tar.gz webapps/ROOT/WEB-INF/class ...
- Masonry tableviewCell布局
前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...
- [九省联考2018]一双木棋chess——搜索+哈希
题目:bzoj5248 https://www.lydsy.com/JudgeOnline/problem.php?id=5248 洛谷P4363 https://www.luogu.org/prob ...
- 《10 minutes to pandas》（转）
原文出处:http://pandas.pydata.org/pandas-docs/stable/10min.html 10 Minutes to pandas This is a short int ...
- Java Socket实战之一：单线程通信
转自:http://developer.51cto.com/art/201202/317543.htm 现在做Java直接使用Socket的情况是越来越少,因为有很多的选择可选,比如说可以用sprin ...
- bzoj 3270: 博物馆【dp+高斯消元】
好像是高斯消元解互相推(?)的dp的例子 首先考虑dp,设f[i][j]为一人在i一人在j的概率,点i答案显然就是f[i][i]: 然后根据题意,得到转移是 \[ f[i][j]=f[i][j]*p_ ...