vue的插值语法，vue指令系统，style和class

官网：https://cn.vuejs.org/
文档3：https://cn.vuejs.org/
文档2：https://v2.cn.vuejs.org/

M-V-VM架构

mvvm   前端vue架构
    M：model 数据层
    V：view 用户视图层
    VM：viewmodel 连接数据和视图的中间层

插值语法

渲染变量
    {{  }}              {{ 变量、js语法、三目表达式，函数加括号 }}

    
    
    



    
姓名：{{name}}
    
年龄：{{age}}
    
数组显示：{{list1}}
    
数组取值：{{list1[1]}}
    
对象显示：{{obj1}}
    
对象取值：{{obj1.name}}
    
对象取值：{{obj1['age']}}
    
显示标签：{{link1}}
    
简单js：{{4 + 5 + age}}
    
三目运算符：{{score > 90 ? '优秀' : '不优秀'}}

文本指令

# vue 的指令系统
    -1 写在标签上
    -2 以 v- 开头 都称之为vue的指令，有特殊含义
# 文本指令主要用来操作文本
    v-text:把文字渲染到标签内
    v-html:把文字渲染到标签内，如果是标签会渲染标签
    v-show：控制标签显示与否，隐藏
    v-if：控制标签显示与否，真的删除

    
    
    



    

    

    
555
    
666

事件指令

# 点击，双击，滑动，输入 事件

# 目前先讲点击事件
    v-on:事件名='handleChange'
    v-on:click ='handleChange'
    简写成（用的多）
    @click='handleChange'
    方法必须放在methods中
      methods: {
            handleChange: function () {
                this.show = !this.show  // ! 取反
            }
        }

    
    
    


    

        点击隐藏图片
        

        
        

        
点我带参数
        
点我看参数
    

属性指令

# 控制属性的
v-bind:属性名='值'
# 可以简写成
:属性='值'

    
    
    


    

        
        
555
    

换图片小案例

    
    
    


    

        点击换图片
        

        
    

条件渲染

  v-if  v-else-if  v-else
    就是判断，符合哪个条件，就显示哪个标签

    
    
    



    
优秀
    
良好
    
及格
    
不及格

v-for循环数组，字符串，数字，对象

小案例

    
    
    
    



    

        

        

            
用户名
            
年龄
            
用户身份
        
        
        

        

            
{{ i.username }}
            
{{ i.age }}
            
超级管理员
            
普通管理员
            
普通用户
        
        
    

style和class

小案例：属性指令控制class

    
    
    
    



    点击切换背景颜色
    

        我是div
    

style和class可以绑定的数据类型

    
    
    
    


class可以绑定的类型

    点我是字符串形式
    

        我是div
    
    点我是数组形式
    

        我是div
    
    点我是对象形式
    

        我是div
    
    
style可以绑定的类型
    字符串形式
    

        我是div
    
    数组形式
    

        我是div
    
    对象形式
    

        我是div