Vue指令使用(v-once、v-cloak、v-pre、v-slot与v-on)（二）

vue中指令的使用

1、v-once

• 只会渲染元素或组件一次，即使后续的数据修改了，也不会渲染到页面上；
• 它后面不需要跟任何表达式,比如<div v-once>{ {dvText}}</div>

 <div id="app">
        <!-- 每次修改passage，页面都会更新 -->
        <h1>{
  {passage}}</h1>
        <!-- 页面只会渲染一次，再次修改txt，页面不会更新 -->
        <h2 v-once>{
  {txt}}</h2>
        <!--页面不受影响-->
        <h3 v-once="onceTest"></h3>
 </div> 

    <script>
        let app = new Vue({
   
            el:"#app",
            data:{
   
               passage:"后面的小朋友们跟上啊",
               txt:"来了来了",
               onceTest:"hello"
            }
        });
    </script>

2、v-cloak
需要配合css使用
可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，
从绑定的 HTML 元素上被移除。
当网络缓慢，此时网页还在加载 Vue代码，页面来不及渲染，页面上就会闪现vue源代码。
我们可以使用 v-cloak 指令来解决这一问题。

  <style>
      [v-cloak] {
          display:none;
     }
  </style>

 <div id="app" v-cloak>
     <div v-cloak>{
  {dvTxt}}</div>
 </div>

 <script>
        let app = new Vue({
   
            el: "#app",
            data: {
   
               dvTxt:"学习vue指令",
            }
        });
 </script>

3、v-pre
编译时，直接忽略这个元素和它子元素内容