<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
</div>
<div id="test1">
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//定义全局指令
//el表示指令所在的标签对象
//binding 包含指令相关信息的对象
Vue.directive('upper-text', function(el, binding){
el.textContent = binding.value.toUpperCase();
})
new Vue({
el: '#test',
data(){
return {
msg1: 'The Basket I Love'
}
},
directives: { //注册局部指令
'lower-text'(el, binding) {// 一般不加单引号，但是这里有-就必须加单引号了
el.textContent = binding.value.toLowerCase();
}
}
}),
new Vue({
el: '#test1',
data(){
return {
msg2: 'Just Do It!'
}
},
})
</script>
</html>
Here the definition of a global and a local command instruction when the instruction is noted that the definition does not include v-the