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
>