示例中介绍了全局自定义指令与局部自定义指令的区别
全局自定义指令：可以在任何实例中应用。
局部自定义指令：只能在本身的vue实例中应用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全局自定义指令与局部自定义指令的区别</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--局部自定义-->
<p v-color="msg">局部自定义指令</p>
<!--全局自定义-->
<p v-all v-fs></p>
</div>
<div id="app2">
<!--全局自定义-->
<p v-all></p>
<!--局部自定义-->
<p v-color="msg"></p>
</div>
<script type="text/javascript">
//全局自定义指令：可以应用于任何一个vue实例中
Vue.directive("all",{
inserted:function(el){
el.innerHTML="这是全局自定义指令";
}
});
var vm=new Vue({
el:"#app",
data:{
msg:{
color:"red"
}
},
//局部自定义：可以写多个指令，只能应用于本身的vue实例，不能应用于其他的vue实例
directives:{
//自定义指令名称
color:{
bind:function(el,binding){
el.style.color=binding.value.color;
}
},
fs:{
inserted:function(el){
el.style.fontSize="30px";
}
}
}
});
var vn=new Vue({
el:"#app2"
});
</script>
</body>
</html>
