第2章 *基础应用-常用命令（4）

官网：https://cn.vuejs.org/v2/api/
其他学习网站：
https://www.w3cschool.cn/aekdgs/nchp4dn1.html
http://www.runoob.com/vue2/vue-tutorial.html

Vue常用命令

文本渲染
v-text innerText
v-html innerHTML
v-once 静态/一次性

v-pre 原样输出
v-cloak 加载完成前隐藏属性名

---

条件渲染
v-if
v-show
v-if和v-show的总结
v-else
v-else-if

---

循环
V-for

---

V-on 事件处理 简写@
V-bind 属性绑定(单向) 简写 :
v-model 双向绑定

v-text　##

文本插值 与{{}}作用一样

v-html

插值内容以html形式显示。
改写上例，把v-text 改为v-html测试下效果

v-pre

跳过这个元素和它的子元素的编译过程,直接输出原始值。加快编译。

{{msg}}

这时并不会输出我们的msg值，而是直接在网页中显示 {{msg}}

v-once

只渲染元素和组件一次，即使数据更新，也不再变化

第一次绑定的值：{{msg}}

v-cloak

防止页面加载进行时出现 vuejs 的变量名
HTML 修改成

  
{{ msg }}

CSS 中添加

[v-cloak] {
  display: none;
}

完整示例

    
    
    


    

        

        

        
v-once:{{msg2}}
        
        
{{msg3}}
        

          
{{ msg }}
        
        
    
    
    

v-show

根据表达式之真假值，切换元素的 display CSS 属性。
v-show指令，等于true的时候显示，false的时候隐藏。

    

    段落
    段落1
    
    

v-if

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是