vue学习手册（此文章持续更新中。。。）

第一部分：VUE指令

1.插值表达式

    

        
{{ msg }}
        
{{ led }}
   
    

2.v-html

3.v-show 和v-if

v-show
1. 作用： 控制元素显示隐藏
2. 语法： v-show = "表达式" 表达式值 true 显示， false 隐藏
3. 原理： 切换 display:none 控制显示隐藏
4. 场景： 频繁切换显示隐藏的场景
v-if
1. 作用： 控制元素显示隐藏（条件渲染）
2. 语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
3. 原理： 基于条件判断，是否 创建 或 移除 元素节点
4. 场景： 要么显示，要么隐藏，不频繁切换的场景

4.v-if和v-else 以及v-if v-else-if v-else

Vue 指令 v-else v-else-if
1. 作用： 辅助 v-if 进行判断渲染
2. 语法： v-else v-else-if = "表达式"
3. 注意： 需要紧挨着 v-if 一起使用

    
性别：男♂
    
性别：女♀

    
考试成绩大于90分
    
考试成绩大于80分
    
考试成绩大于60分
    
考试成绩低于60分

5.v-on

1. 作用： 注册事件 = 添加监听 + 提供处理逻辑
2. 语法：
① v-on:事件名 = "内联语句"
② v-on:事件名 = "methods中的函数名"
3. 简写：@事件名
4. 注意：methods函数内的 this 指向 Vue 实例

    -
    {{ count }}
    +




    切换显示影藏
    
看得见我吗？