VUE：内置指令与自定义指令
常用的内置指令
1）v:text 更新元素的 textContent
2）v-html 更新元素的 innerHTML
3）v-if 如果为true，当前标签才会输出到页面
4）v-else 如果为false，当前标签才会输出到页面
5）v-show 通过控制display样式来控制显示/隐藏
6）v-for 遍历数组/对象
7）v-on 绑定事件监听，一般简写为@
8）v-bind 强制绑定解析表达式，可以省略v-bind
9）v-model 双向数据绑定
10）ref 指定唯一标识，vue对象通过$els属性访问这个元素对象
11）v-cloak 防止闪现，与css配合：[v-cloak]{display:none}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="example">
<p ref="content">taosir is learning...</p>
<button @click="hint">提示</button>
<!--<p v-text="msg"></p>-->
<p v-cloak>{{msg}}</p>
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
alert('----')
new Vue({
el:'#example',
data:{
msg:'涛先森正在努力学习'
},
methods:{
hint(){
alert(this.$refs.content.innerHTML);
}
}
})
</script>
</body>
</html>
自定义指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.注册全局指令
Vue.directive('my-directive',function(el,binding){
el.innerHTML = binding.value.toupperCase()
})
2.注册局部指令
directives：
'my-directive':{
bind(el,binding){
el.innerHTML = binding.value.toupperCase()
}
}
3.使用指令
v-my-directive='xxx'
-->
<!--
需求：自定义2个指令
1.功能类似于 v-text，但是转换为全大写
2.功能类似于 v-text，但是转换为全小写
--> <div id="test1">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
</div> <div id="test2">
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p>
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
//定义全局指令
//el：指令属性所在的标签对象
//binding：包含指令相关信息数据的对象
Vue.directive('upper-text',function(el,binding){
console.log(el,binding);
el.textContent = binding.value.toUpperCase()
}) new Vue({
el:'#test1',
data:{
msg1:'taosir love java!'
},
//注册局部指令
directives:{
'lower-text'(el,binding){
el.textContent = binding.value.toLowerCase()
}
}
}) new Vue({
el:'#test2',
data:{
msg2:'taosir love Vue!'
}
})
</script>
</body>
</html>