Vue 快被大家遗忘的指令

前言

本篇做了一些对不被常用的指令的汇总。了解即可，知道他们能做什么就好了

v-once

• 该指令后面不需要跟任何表达式

• 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

  
  <div id="app">
      message只会渲染一次，数据改变后也不能更新
    <h2 v-once>{{message}}</h2>   
  </div>

这个还是算没那么不常用的，还是有一定的应用的场景。

v-html

• 该指令后面往往会跟上一个string类型
• 会将string的html解析出来并且进行渲染

 
 <div id="app">
   <h2 v-html="url"></h2> //会直接渲染成a标签
 </div>
 <script>
   const app = new Vue({
     el:"#app",
     data:{
       //服务器返回url时，可能不止返回url，可能会把整个a标签返回，如下
       url:'<a href="http://www.baidu.com">百度一下</a>'
     }
   })
 </script>
 

v-text

• v-text作用和Mustache比较相似：都是用于数据显示在界面中
• v-text通常情况下，接受一个string类型
• v-text不够灵活，一般开发中，就是用Mustache语法插值

div id="app">
  <h2>{{message}}</h2>
  <h2 v-text="message"></h2>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"Hello Ting,I am Key!"
    }
  })
</script>

v-pre

• v-pre用于跳过这个元素和它子元素的编译过程，用于显示原来的Mustache语法

<div id="app">
  <p>{{message}}</p>
  <p v-pre>{{message}}</p>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"Hello Ting,I am Key!"
    }
  })
</script>

v-cloak

• 某些情况下，浏览器可能会直接显示出未编译的Mustache标签

 <style>
    [v-cloak]{
      display: none;
    }
  </style>
<template>
<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>
</template>
<script>
  //延迟一秒钟创建app实例对象
  //在vue解析之前，div中有一个属性v-cloak
  //在vue解析之后，v-cloak属性被擦除。 
  setTimeout(function (){
    const app = new Vue({
      el:"#app",
      data:{
        message:"Hello Ting,I am Key!"
      }
    })
  },1000)

</script>