vue参考---vue指令
一、总结
一句话总结：
vue中系统指令有v-text、v-html、v-bind、v-for、v-cloak等等，除了内置指令之外，我们还可以自定义指令，全局的或局部的
1、vue中如何操作dom？
指定标识：用ref关键字，具体操作的话在vue的$refs中
<div id="example"> <p ref="msg">abcd</p> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { content: '<a href="http://www.baidu.com">百度一下</a>' }, methods: { hint () { alert(this.$refs.msg.innerHTML) } } }) </script>
2、为什么v-cloak指令可以解决 vue代码闪现的问题？
因为vue中的指令解析之前有，在解析完之后，dom里面就没有指令了，那被v-cloak（v-cloak的值是display:none）隐藏的元素就显示出来了
<style> [v-cloak] { display: none } </style> <p v-cloak>{{content}}</p>
3、vue中系统指令有哪些？
vue中系统指令有v-text、v-html、v-bind、v-for、v-cloak等等
常用内置指令
v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
4、vue中自定义指令分类？
在vue中，我们可以自定义全局的指令和局部的指令
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'
5、vue中如何定义全局自定义指令？
用Vue.directive方法，具体数据的话binding对象里面有：Vue.directive('my-directive', function(el, binding){ 具体操作代码 })
1. 注册全局指令
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
2. 实例
Vue.directive('upper-text', function (el, binding) {
console.log(el, binding)
el.textContent = binding.value.toUpperCase()
})
6、vue中如何定义局部自定义指令？
在vue对象里面指定directives属性，这样可以指定多个局部指令
1. 注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
2. 使用指令
v-my-directive='xxx'
3. 局部指令实例
new Vue({
el: '#test',
data: {
msg: "I Like You"
},
// 注册局部指令
directives: {
'lower-text'(el, binding) {
console.log(el, binding)
el.textContent = binding.value.toLowerCase()
}
}
})
二、vue指令
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>12_指令_内置指令</title> 6 <style> 7 [v-cloak] { display: none } 8 </style> 9 </head> 10 <body> 11 <!-- 12 常用内置指令 13 v-text : 更新元素的 textContent 14 v-html : 更新元素的 innerHTML 15 v-if : 如果为true, 当前标签才会输出到页面 16 v-else: 如果为false, 当前标签才会输出到页面 17 v-show : 通过控制display样式来控制显示/隐藏 18 v-for : 遍历数组/对象 19 v-on : 绑定事件监听, 一般简写为@ 20 v-bind : 强制绑定解析表达式, 可以省略v-bind 21 v-model : 双向数据绑定 22 ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象 23 v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none } 24 --> 25 <div id="example"> 26 <p v-cloak>{{content}}</p> 27 <p v-text="content"></p> <!--p.textContent = content--> 28 <p v-html="content"></p> <!--p.innerHTML = content--> 29 <p ref="msg">abcd</p> 30 <button @click="hint">提示</button> 31 </div> 32 33 <script type="text/javascript" src="../js/vue.js"></script> 34 <script type="text/javascript"> 35 new Vue({ 36 el: '#example', 37 data: { 38 content: '<a href="http://www.baidu.com">百度一下</a>' 39 }, 40 methods: { 41 hint () { 42 alert(this.$refs.msg.innerHTML) 43 } 44 } 45 }) 46 </script> 47 </body> 48 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>12_指令_自定义指令</title> 6 </head> 7 <body> 8 9 <!-- 10 1. 注册全局指令 11 Vue.directive('my-directive', function(el, binding){ 12 el.innerHTML = binding.value.toupperCase() 13 }) 14 2. 注册局部指令 15 directives : { 16 'my-directive' : { 17 bind (el, binding) { 18 el.innerHTML = binding.value.toupperCase() 19 } 20 } 21 } 22 3. 使用指令 23 v-my-directive='xxx' 24 --> 25 <!-- 26 需求: 自定义2个指令 27 1. 功能类型于v-text, 但转换为全大写 28 2. 功能类型于v-text, 但转换为全小写 29 --> 30 31 <div id="test"> 32 <p v-upper-text="msg"></p> 33 <p v-lower-text="msg"></p> 34 </div> 35 36 <div id="test2"> 37 <p v-upper-text="msg"></p> 38 <p v-lower-text="msg"></p> 39 </div> 40 41 <script type="text/javascript" src="../js/vue.js"></script> 42 <script type="text/javascript"> 43 // 注册一个全局指令 44 // el: 指令所在的标签对象 45 // binding: 包含指令相关数据的容器对象 46 Vue.directive('upper-text', function (el, binding) { 47 console.log(el, binding) 48 el.textContent = binding.value.toUpperCase() 49 }) 50 new Vue({ 51 el: '#test', 52 data: { 53 msg: "I Like You" 54 }, 55 // 注册局部指令 56 directives: { 57 'lower-text'(el, binding) { 58 console.log(el, binding) 59 el.textContent = binding.value.toLowerCase() 60 } 61 } 62 63 }) 64 65 new Vue({ 66 el: '#test2', 67 data: { 68 msg: "I Like You Too" 69 } 70 }) 71 </script> 72 </body> 73 </html>