vue - 自定义指令
1.v-test绑定的是bgcolor
var app = new Vue({
el: '#app',
data: {
num: 123,
color: 'red',
age: 12,
bgcolor:'#f00'
}
})
2.我建议：一些非组件外的事件方法，采用ES6写法
举例：
(组件) => es5
add:function(){
}
(非组件) => es6
add();
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Vue入门之自定义指令</title>
7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
8 </head>
9
10 <body>
11 <div id="app">
12 <!-- <div v-test="color">
13 {{num}}{{age}}
14 </div> -->
15
16 <div v-test="bgcolor">
17 {{num}}{{age}}
18 </div>
19 </div>
20 <button onclick="unbindApp()">解绑</button>
21
22 <script type="text/javascript">
23 // 解绑
24 function unbindApp() {
25 app.$destroy();
26 }
27
28 // 自定义指令,官方写法：Vue.directive( id, [definition] )
29 Vue.directive("test", {
30
31 /*
32 我建议：一些非组件外的事件方法，采用ES6写法
33 举例：
34
35 (组件) => es5
36 add:function(){
37
38 }
39 (非组件) => es6
40 add();
41 */
42
43 //1-被绑定
44 bind: function (el, binding, vnode) {
45 console.log("1-bind 被绑定");
46
47 console.log("el:", el, '\n');
48 /*
49 el:#app，所以指的是#app下的所有元素
50 */
51
52 console.log("binding:", binding);
53
54
55 console.log("vnode:", '\n', vnode);
56
57 // id为#app的style.color.
58
59 // el.style.color = binding.value;
60 el.style.background= binding.value;
61 },
62
63 //2-被插入
64 inserted: function (el, binding, vnode) {
65 console.log("2-inserted 被插入");
66 },
67
68 //3-更新
69 update: function (el, binding, vnode) {
70 console.log("3-update 更新");
71 },
72 //4-更新完成
73 componentUpdated: function (el, binding, vnode) {
74 console.log("4-componentUpdated 更新完成");
75 },
76 //5-解绑(一旦解绑以后，再无关联)
77 unbind: function (el, binding, vnode) {
78 console.log("5-unbind 解绑");
79 }
80 });
81
82 var app = new Vue({
83 el: '#app',
84 data: {
85 num: 123,
86 color: 'red',
87 age: 12,
88 bgcolor:'#f00'
89 }
90 })
91 </script>
92 </body>
93
94 </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之自定义指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <div v-test="color">
{{num}}{{age}}
</div> -->
<div v-test="bgcolor">
{{num}}{{age}}
</div>
</div>
<button onclick="unbindApp()">解绑</button>
<script type="text/javascript">
// 解绑
function unbindApp() {
app.$destroy();
}
// 自定义指令,官方写法：Vue.directive( id, [definition] )
Vue.directive("test", {
/*
我建议：一些非组件外的事件方法，采用ES6写法
举例：
(组件) => es5
add:function(){
}
(非组件) => es6
add();
*/
//1-被绑定
bind: function (el, binding, vnode) {
console.log("1-bind 被绑定");
console.log("el:", el, '\n');
/*
el:#app，所以指的是#app下的所有元素
*/
console.log("binding:", binding);
console.log("vnode:", '\n', vnode);
// id为#app的style.color.
// el.style.color = binding.value;
el.style.background= binding.value;
},
//2-被插入
inserted: function (el, binding, vnode) {
console.log("2-inserted 被插入");
},
//3-更新
update: function (el, binding, vnode) {
console.log("3-update 更新");
},
//4-更新完成
componentUpdated: function (el, binding, vnode) {
console.log("4-componentUpdated 更新完成");
},
//5-解绑(一旦解绑以后，再无关联)
unbind: function (el, binding, vnode) {
console.log("5-unbind 解绑");
}
});
var app = new Vue({
el: '#app',
data: {
num: 123,
color: 'red',
age: 12,
bgcolor:'#f00'
}
})
</script>
</body>
</html>
