<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app1">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
</div>
<div id="app2">
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p>
</div>
<script type="text/javascript">
// 定义全局指令
// el:指属性所在的标签对象
// binding:包含指令相关信息的数据对象
Vue.directive('upper-text',function(el,binding){
// console.log(el,binding)
el.textContent=binding.value.toUpperCase()
})
new Vue({
el:'#app1',
data:{
msg1:"I LOVE YOU VERY MUCH"
},
// 注册局部指令 只在vm管理的范围内有效
directives:{
'lower-text':function(el,binding){
el.textContent=binding.value.toLowerCase()
}
}
})
new Vue({
el:'#app2',
data:{
msg2:"I LOVE YOU"
}
})
</script>
</body>
</html>