Vue系列十二：指令

痛定思痛。 2022-01-30 06:23 215阅读 0赞

一、内置指令  
 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 \}

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>指令_内置指令</title>
      <style>
        [v-cloak] { display: none }
      </style>
    </head>
    <body>
    <div id="example">
      <p v-cloak>{
       {content}}</p>
      <p v-text="content"></p>   
      <p v-html="content"></p>  
      <p ref="msg">abcd</p>
      <button @click="hint">提示</button>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <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>
    </body>
    </html>

二、自定义指令

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">
      <title>指令_自定义指令</title>
    </head>
    <body>
    
    
    <div id="test">
      <p v-upper-text="msg"></p>
      <p v-lower-text="msg"></p>
    </div>
    
    <div id="test2">
      <p v-upper-text="msg"></p>
      <p v-lower-text="msg"></p>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <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: '#test',
        data: {
          msg: "I Like You"
        },
        // 注册局部指令
        directives: {
          'lower-text'(el, binding) {
            console.log(el, binding)
            el.textContent = binding.value.toLowerCase()
          }
        }
    
      })
    
      new Vue({
        el: '#test2',
        data: {
          msg: "I Like You Too"
        }
      })
    </script>
    </body>
    </html>