vue部分指令总结

Vue相关指令总结

一、v-text

1. 如果不想使用mustache语法展示文本，可以使用v-text的方法展示文本，但v-text 指令不够灵活，会覆盖原有内容,即插值表达式可以把Vue传递过来的数据和前台用户自己定义的数据结合在一起,但是v-text只能显示Vue对象传递过来的数据，会替换掉节点里已有的内容。
2. 用法：

<div id="app">
     <h2>{{message}},顶顶顶顶</h2>
     <h2 v-text="message">,顶顶顶顶</h2>
 </div>
 <script type='text/javascript' src='js/vue.js'></script>
 <script type='text/javascript'>
     const app =new Vue({
         el : "#app",
         data :{
             message :"dddd"
         }
     })
 </script>

二、v-html

1. 解析html标签
2. 用法

<div id="app">
       <h2>{{message}}</h2>
       <h2>{{url}}</h2>
       <!-- v-html用于解析html标签 -->
       <h2 v-html="url"></h2> 
   </div>
   <script type='text/javascript' src='js/vue.js'></script>
   <script type='text/javascript'>
       const app = new Vue({
           el : "#app",
           data :{
               message : "你好啊",
               //若服务器返回一个类似html的内容，使用v-html
               url : "<a href='http://www.baidu.com'>百度一下</a>"
           }
       })

三、v-if/v-else/v-else-if

1. v-if: 根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 template ，将提出它的内容作为条件块。
2. 当和 v-if 一起使用时，v-for 的优先级比 v-if 更高
3. v-else : 前一兄弟元素必须有 v-if 或 v-else-if
4. 用法

<div id="app">
        <!-- v-if的使用:传入一个Boolean值 -->
        <h2 v-if=isShow>{{message}}</h2>
        <!-- v-else的使用 -->
        <h2 v-if=isShow>
            isShow为true时显示我
        </h2>
        <h1 v-else>
            isShow为false时显示我
        </h1>
        <!-- v-else-if的使用，不常用 -->
        <h2 v-if="score>=90">优秀</h2>
        <h2 v-else-if="score>=80">良好</h2>
        <h2 v-else-if="score>=60">及格</h2>
        <h2 v-else>不及格</h2>
    </div>
    <script type='text/javascript' src='js/vue.js'></script>
    <script type='text/javascript'>
        const app = new Vue({
            el : "#app",
            data :{
                message : "dddd",
                isShow : true,
                score : 99
            }
        })
    </script>

四、v-show

6. 根据条件展示元素
7. 注意，v-show 不支持 template 元素，也不支持 v-else
8. v-show值为true,则展示，为false，则不展示

v-show与v-if的区别

• v-if 当条件为false时，包含v-if指令的元素，根本就不会存在于DOM中
• v-show 当条件为false时，v-show只不过是增加了一个行内样式：display:none
• 如何选择应该使用v-if还是v-show：
  当需要在显示和隐藏之间切片很频繁时，使用v-show
  当只有一次切换时，建议使用v-if

9. 用法

<div id="app">
      <h2 v-if="isShow">{{message}}</h2>
      <h2 v-show="isShow">{{message}}</h2>
  </div>
  <script type='text/javascript' src='js/vue.js'></script>
  <script type='text/javascript'>
      const app = new Vue({
          el : "#app",
          data : {
              message : "ssss",
              isShow : true,
          }
      })
  </script>

五、v-for

1. 用法

<div id="app">
        <!-- 1.遍历数组(不需要下标值) -->
        <h2 v-for="item in names">{{item}}</h2>
        <!-- 2.获取索引值的数组遍历-->
        <h2 v-for="(item , index) in names">{{index+1}}.{{item}}</h2>
        <!-- 3.遍历对象 -->
        <ul>
            <!-- 在遍历对象的过程中，如果只获取一个值，那么获取到的是value -->
            <li v-for="item in info">{{item}}</li>
            <!-- 同时获取value和key的值 ：(value , key) in info -->
            <li v-for="(value , key) in info">{{key}}-->{{value}}</li>
            <!-- 获取key,value和index -->
            <li v-for="(value , key , index ) in info">{{key}}-->{{value}}-->{{index}}</li>
        </ul>
        <!-- 4.v-for使用过程添加key属性 -->
        <!-- key属性值要与mustache语法中展示的一一对应 -->
        <h3 v-for="item in letters" :key="item">{{item}}</h3>

    </div>
    <script type='text/javascript' src='js/vue.js'></script>
    <script type='text/javascript'>
        const app = new Vue({
            el :"#app",
            data : {
                names : ['why' , 'ddd' , 'dfff' , 'lll'],
                info : {
                    name : "ddd",
                    age : 18 ,
                    schools : "fff"
                },
                letters : ['A','B','C','D','E']
            }
        })
    </script>

六、v-pre

1. v-pre可以使之不按照mustache语法解析，标签里面内容是什么，那么就显示什么
2. 用法

<div id="app">
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>
    </div>
    <script type='text/javascript' src='js/vue.js'></script>
    <script type='text/javascript'>
        var app = new Vue({
            el:"#app",
            data : {
                message : "sss"
            }
        })
    </script>

七、v-once

1. 只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。即加了v-once的在控制台改变message值时，其不会变
2. 用法

<div id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
    </div>
    <script type='text/javascript' src='js/vue.js'></script>
    <script type='text/javascript'>
        var app = new Vue({
            el:"#app",
            data : {
                message : "sss",
            }
        })
    </script>

八、v-cloak

1. 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
2. 用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-cloak指令的使用</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <!-- v-cloak指令几乎不会用，了解即可 -->
    <div id="app" v-cloak>
        <h2>{{message}}</h2>
    </div>
    <script type='text/javascript' src='js/vue.js'></script>
    <script type='text/javascript'>
    //在Vue解析之前，div中有一个属性v-cloak
    //在Vue解析之后，div中没有v-cloak属性
       setTimeout(function(){
        const app = new Vue({
            el : "#app",
            data : {
                message : "ddd"
            }
        })
       },1000)
    </script>
</body>
</html>