- 自定义指令介绍 directives
- 钩子函数
- 参数 el,binding,vnode(vnode.context)
- bind,inserted,update,componentUpdated,unbind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<div v-hello="'red'">111111</div>
<!--"red"会被当成变量-->
<div v-hello="'yellow'">2222222</div>
<div v-hello="mycolor">3333333</div>
</div>
<script type="text/javascript">
Vue.directive("hello", {
inserted(el, bind) {
el.style.background = bind.value
},
update(el, bind) {
el.style.background = bind.value
}
})
var vm = new Vue({
el: "#box",
data: {
mycolor: "red"
}
})
</script>
</body>
</html>
vm.mycolor="yellow"
"yellow"
vm.mycolor="blue"
"blue"
vm.mycolor="grey"
"grey"
vm.mycolor="green"
"green"
vm.mycolor="orange"
"orange"