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>