Vue基础篇（四）

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

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

------ 基本指令

• v-clock

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

  v-clock的应用场景
    

        {{msg}}
    
    
    

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

image.png

这个时候 要优化一下 ！

  v-clock的应用场景 解决初始化慢导致的页面闪动问题
    

        
{{msg}}
    
    
    

隐藏

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

 

        v-clock的应用场景 解决初始化慢导致的页面闪动问题
        
{{msg}}

        

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

        {{oncedata}}
    


    
    

渲染一次

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

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

   

        v-if后面接的是等号 ：等号后面的内容必须是布尔值
        
{{apple}}
        
{{pingapple}}
        
{{banana}}
    
    
    

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

 

        v-if后面接的是等号 ：等号后面的内容必须是布尔值
        
{{apple}}
        
{{pingapple}}
        
{{banana}}
        

        
        v-if的实例用法 需求 ：点击按钮，实现用户名输入框和密码框的切换
        

            用户名：
        
        

            密码：
        
        点我切换
    
    
    

乌龙演示

v-if的弊端 :
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因
此会出现乌龙
只会渲染变化的元素，也就是说，input元素被复用了
解决方案 ：加·key，唯一，提供key值可以来决定是否复用该元素

            用户名：
        
        

            密码：
        
        点我切换

key.gif

• v­-show

只改变了css属性display

       
        v-show 用法：-显现-与否取决于布尔值
        
我被渲染
    
    
    

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

v-show.gif