常用內置指令
- v-show : 通過控制 display 樣式來控制顯示/隱藏
- v:text : 更新元素的 textContent
- v-html : 更新元素的 innerHTML
- v-if : 如果爲 true, 當前標籤纔會輸出
- v-else: 如果爲 false, 當前標籤纔會輸出到頁面
- v-for : 遍歷數組/對象
- v-on : 綁定事件監聽, 一般簡寫爲@
- v-bind : 強制綁定解析表達式, 可以省略 v-bind
- v-model : 雙向數據綁定
- ref : 指定唯一標識, vue 對象通過$els 屬性訪問這個元素對象
- v-cloak : 防止閃現, 與 css 配合: [v-cloak] { display: none }
自定義指令
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'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.min.js"></script>
<style>
[v-cloak] {
display: none
}
</style>
</head>
<body>
<div id="test">
<p v-text="url"></p>
<p v-html="url"></p> <img :id="myid" :src="imageSrc">
<p><span ref="message">atguigu.com</span> <button @click="showMsg">顯示左側文本</button> </p>
<p v-cloak>{{url}}</p>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.19.0/moment.js"></script>
<script>
alert('模擬加載慢')
new Vue({
el: '#test',
data: {
url: '<a href="http://www.atguigu.com">尚硅谷</a>',
myid: 'abc123',
imageSrc: 'http://cn.vuejs.org/images/logo.png'
},
methods: {
showMsg: function () {
alert(this.$refs.message.textContent)
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.min.js"></script>
</head>
<body>
<div id="demo1">
<p v-upper-text="msg"></p>
<p v-lower-text="msg"></p>
</div>
<div id="demo2">
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p>
<!--局部指令, 此處不能使用-->
</div>
</body>
<script>
//註冊全局指令
Vue.directive('upper-text', function (el, binding) {
el.innerHTML = binding.value.toUpperCase()
})
new Vue({
el: '#demo1',
data: {
msg: 'NBA love this game!'
},
directives: { // 註冊局部指令
'lower-text': {
bind(el, binding) {
el.innerHTML = binding.value.toLowerCase()
}
}
}
})
new Vue({
el: '#demo2',
data: {
msg2: 'I Like You'
}
})
</script>
</html>