Vue 内置指令

基本指令

v-pre: 将内容原样输出

<div id="app" v-pre>
    {{message}}
</div>
var vm = new Vue({
    el : '#app',
    data : {
        message : 'hello world'
    }
})

v-cloak: 解决初始化慢导致页面闪动

• v-cloak 指令一般要与 display: none 一起使用

    <style>
        /* v­cloak一般与display：none进行结合使用 */
        [v-­cloak] {
            display:none;
        }
    </style>

   <div id="App">
        <hr>
        v-cloak: 解决初始化慢导致页面闪动 <br>
        <p v-cloak>{{msg}}</p> <br>
    </div>


    <script>
        var App = new Vue({
            el: "#App",
            data: {
                msg: '你好',
            }
        })
    </script>

这样就不会看到页面突然闪了一下;它会等到指令关联的实例结束编译，再一起显示。

v-once: 定义它的元素和组件只渲染一次

  <div id="App">
        <hr>
       v-once : 定义它的元素或组件只渲染一次,后续都不会再重新渲染<hr>
        <span v-once>{{oncedata}}</span>
  </div>

 <script>
var App = new Vue({
     el: "#App",
        data: {
           oncedata:'他好'
        }
 </script>

条件渲染指令

v-if / v-else-if / v-else:跟 js 差不多

    <div id="App">
        v-if后面接的是等于号，等于后的内容必须是布尔值
        <br>
         v-if 的基本用法:
        <p v-if="5 < 2">{{apple}}</p>
        <!-- 判断5<2 是否为 true | false 不渲染  -->
        <p v-else-if="7>3">{{pineapple}}</p>
        <!-- //判断 7>3 是否为 true |true 渲染 凤梨 -->
        <p v-else>{{banana}}</p>

 
    <script >
        var App = new Vue({
            el: "#App",
            data: {
                apple: '苹果',
                banana: '香蕉',
                pineapple: '凤梨',
            },
        })
</script>

v-show: 根据布尔值，来决定是否显示元素

<div id="app">
    <p v-show="6 > 3">{{ text }}</p>  // v-show d的条件是true，所以会显示 text
</div>

var app = new Vue({
  el: '#app',
  data: {
    text: '你好'
  }
})

v-if 只渲染变化的元素

         v-if 的实例：对不想让其复用的标签或者元素，加入 key 即可
         需求:点击按钮，实现用户名输入框和密码框的切换
        <div v-if="type === 'name'">
            <!-- type = name 为true ,渲染用户名 -->
            用户名：
            <input type="text" placeholder="请输入用户名" key="name">
        </div>
        <div v-else>
            密码：
            <input type="text" placeholder="请输入密码" key="password">
        </div>
        <button v-on:click="toggleType">切换</button>


    <script>
        var App = new Vue({
            el: "#App",
            data: {
                type: 'name',  //初始值
            },
            methods: {
                toggleType: function () {
                    //三目运算符
                    this.type = (this.type === 'name' ? 'password' : 'name')
                    //点击之后如果 this.typr = name 就将password 赋值给type，反之this.type ≠ name ,将 name 赋给 type
                }
            },
        })
    </script>

Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染。
要解决 v-if 的复用问题，可以给被复用的元素（这里就是 input）加 key，而且是唯一的 key。

v-if 与 v-show 的比较

• v-if : 实时渲染，DOM页面显示就渲染，不显示，就不渲染。
• v-show: v-show的元素永远存在于DOM页面中，只是改变了css 的 display 的属性。

列表渲染指令

v-for:当需要将一个数组遍历或枚举一个对象属性循环显示时，就会用到列表渲染指令 v-­for。

遍历多个对象（数组中的多个对象）；
遍历一个对象的多个属性。

div id="App">
        <hr> v-for 的用法： v-for 一点是写在要遍历的元素上,v-for 后面接等号 ,类似于item in items
        <br> 1. 遍历多个对象
        <br> 遍历多个对象一定是数组 ：
        <ul>
            <li v-for="vueMth in vueMethods">{{vueMth.name}}</li>
            <!-- vueMth 自己定义的变量  vueMethods 自己定义的数组 -->
        </ul>
        <hr> 带索引的写法：括号的第一个变量,代表item ，第二个代表index
        <ul>
            <li v-for="(vueMth,index) in vueMethods">{{index}}---{{vueMth.name}}</li>
        </ul>
        <br> 2.遍历一个对象多个属性：
        <span v-for="value in nvshen"> {{value}} </span>
        <br> 拿到 value key index 的写法 v-k-i ：
        <div v-for="(value,key,index) in nvshen">第{{index}}个女神：--键是{{key}}：--{{value}} </div>
    </div>

    <script>
        var App = new Vue({
            el: "#App",
            data: {
                //每个对象对应一个 li 
                vueMethods: [
                    { name: '多思考' },
                    { name: '多练习' },
                    { name: '听讲' }
                ],
                nvshen: {
                    girl1: '刘亦菲',
                    girl2: '杨幂',
                    girl3: '舒畅'
                }
            }

        })
    </script>