本教程分为三部分 ： 基础 进阶 实战 ，深入浅出Vue.js
基础篇持续 更新中

第五章 Vue.JS中的内置指令

------ 基本指令

• v-clock

一般与display:none进行结合使用 作用：解决初始化慢导致页面闪动的最佳实践.
示例代码如下：

  v-clock的应用场景
    <div id="App">
        {{msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        while (true) {

        }
        var APP = new Vue({
            el: '#App',
            data: {
                msg: '有个姑娘叫小花'
            }
        })
    </script>

页面会一直加载 对用户体验不好

image.png

<style>
        [v-click]: {
            display: none
        }
    </style>
  v-clock的应用场景 解决初始化慢导致的页面闪动问题
    <div id="App">
        <p v-clock>{{msg}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        //模拟网速不好  导致页面渲染不出来  
        while (true) {

        }
        var APP = new Vue({
            el: '#App',
            data: {
                msg: '有个姑娘叫小花'
            }
        })
    </script>

隐藏

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

 <div id="App">
        v-clock的应用场景 解决初始化慢导致的页面闪动问题
        <p v-cloak>{{msg}}</p>

        <hr>
        <!-- v-once: -->
        v-once:定义它的元素和组件只渲染一次 <br>
        <span v-once>{{oncedata}}</span>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        //模拟网速不好  导致页面渲染不出来  
        // while (true) {

        // }
        var APP = new Vue({
            el: '#App',
            data: {
                msg: '有个姑娘叫小花',
                oncedata: '长得真漂亮'
            }
        })
    </script>

渲染一次

------ 条件渲染指令

• v­if, v­eles­if ,v­else
  和js中的判判断条件一样 看个小栗子 当6 < 3的时候 就渲染 apple否则当9 > 3的时候就渲染 pingapple 不然就渲染 banana

   <div id="APP">
        v-if后面接的是等号 ：等号后面的内容必须是布尔值
        <p v-if="6<3">{{apple}}</p>
        <p v-else-if="9>3">{{pingapple}}</p>
        <p v-else>{{banana}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#APP',
            data: {
                apple: 'apple',
                banana: 'banana',
                pingapple: 'pinapple'
            }
        })
    </script>

用法： 必须跟着屁股走
v-if的弊端 :
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因此会出现乌龙,只会渲染变化的元素，也就是说，nput元素被复用了

 <div id="APP">
        v-if后面接的是等号 ：等号后面的内容必须是布尔值
        <p v-if="6<3">{{apple}}</p>
        <p v-else-if="9>3">{{pingapple}}</p>
        <p v-else>{{banana}}</p>
        <hr>
        <!-- v-if的实例用法 -->
        v-if的实例用法 需求 ：点击按钮，实现用户名输入框和密码框的切换
        <div v-if="type ==='name'">
            用户名：<input type="text" placeholder="请输入用户名">
        </div>
        <div v-else>
            密码：<input type="text" placeholder="请输入密码">
        </div>
        <button v-on:click="toggleType">点我切换</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#APP',
            data: {
                apple: 'apple',
                banana: 'banana',
                pingapple: 'pinapple',
                type: 'name'
            },
            methods: {
                toggleType: function() {
                    // 三目运算法则
                    this.type = (this.type === 'name' ? 'password' : 'name')
                }
            }
        })
    </script>

乌龙演示

<div v-if="type ==='name'">
            用户名：<input type="text" placeholder="请输入用户名" key='name'>
        </div>
        <div v-else>
            密码：<input type="text" placeholder="请输入密码" key='psd'>
        </div>
        <button v-on:click="toggleType">点我切换</button>

key.gif

• v­-show

只改变了css属性display

<div id="APP">
       
        v-show 用法：-显现-与否取决于布尔值
        <p v-show="9 > a">我被渲染</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#APP',
            data: {
                a: 3
            }
        })
    </script>

v-­if和v­-show的比较
v-­if:
实时渲染：页面显示就渲染，不显示。我就给你移除
v-­show:
v­-show的元素永远存在也页面中，只是改变了css的display的属性

v-show.gif