vue.js 自定义指令directives，Vue.directive使用
================================
©Copyright 蕃薯耀 2018年12月06日
http://fanshuyao.iteye.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js 自定义指令directives</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="vueDiv">
<div style="margin-top: 30px;">
<div v-upper-text="text"></div>
</div>
</div>
<div id="innerVueDiv">
<div style="margin-top: 30px;">
<div v-lower-text="innerText"></div>
</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//自定义全局指令
//el：指令属性所在的html标签对象
//binding：包含指令相关信息数据的对象
Vue.directive("upper-text", function(el, binding){
console.log(el);
console.log(binding);
el.textContent = binding.value.toUpperCase();
});
var vueObj = new Vue({
el : "#vueDiv",
data : {
text : "Never Give Up!",
}
});
var innerVueObj = new Vue({
el : "#innerVueDiv",
data : {
innerText : "Never Give Up!（innerText）",
},
directives : {//局部指令，只在当前Vue中才有效
"lower-text" : function(el, binding){
el.textContent = binding.value.toLowerCase();
}
}
});
</script>
</body>
</html>
================================
©Copyright 蕃薯耀 2018年12月06日
http://fanshuyao.iteye.com/