1.vue插值语法

# 语法:
    {{变量名 或 简单的js变量取值}}   # 是放在标签内容里

    
    
    





    我的名字是：{{name}}
    

    我的年龄:{{age}}
    

    {{list1[0]}}
    

    {{obj1.name}}---->{{obj1['age']}}
    

    {{link1}} 处理了xss攻击
    

    运算(简单的js语法)：{{10+20+30+40}}
    

    三目运算符：{{10 < 20?'是':'否'}}

2.文本指令

# 指令就是写在标签里  带有 v- 前缀的特殊属性 都是vue的指令，指令用于在表达式的值改变时，将某些行为应用到 DOM上。

# 语法：    ="变量名"
    v-html	让文本内容渲染成HTML标签 (用于输出html代码)
    v-text	让该标签里的内容显示为js变量对应的值  （很像插值）
    v-show	放1个布尔值：为真 标签就显示；为假 标签就不显示 (只是隐藏该标签)
    v-if	放1个布尔值：为真 标签就显示；为假 标签就不显示  (从dom中直接移除该标签)

    
    
    
    
    
    





    {{link1}}
    

    文本指令之 v-html：
    

    

    文本指令之 v-text：
    

    

    文本指令之 v-show：
    
 我是div
    

    文本指令之 v-if：
    
 我是div

3.事件指令

# 给原生html标签 绑定事件 

# 语法：     @事件名="事件变量名"
    v-on:click=''   # 老语法
    @click=''       # 新语法，简写成@

    
    
    
    
    
    






    
    
    
     点我显示不显示

    

        我是div
    

    
     传递参数--变量
    
     传递事件

5.属性指令

# 给原生html标签 绑定属性

# 语法：    :html属性名 ="变量名"
    v-bind：  直接写js的变量或语法（不推荐）
      :	      直接写js的变量或语法（简写，推荐）  # eg:  :class='变量名'  :src='变量名'

    
    
    

    




    
    
    

        我是div
    
	点我变色
    
    


    

6.属性指令之style和class

# 语法：
    :class='字符串、js数组、对象{red: true}、三目运算符'
    
    :style='js变量、字符串、js数组[{backgreound: ‘red’},]、js对象{background: ‘red’} 、三目运算符'

    
    
    


    




    
    
	
    

        我是div
    

    

    
    
    
    

        我是style的div
    
    点我变色

7.条件指令(条件渲染)

# 给原生html标签 绑定if判断

# 语法：
    v-if	相当于： if
    v-else	相当于：else
    v-else-if	相当于：else if

    
    
    


    





    
优秀
    
良好
    
及格
    
不及格

8.循环指令(列表渲染)

# 给原生html标签 绑定for循环

# 语法：
    v-for：循环显示
    
    
  # 提供第二个的参数为键名
    
  # 第三个参数为索引
    
    
  # 也可以循环整数

    
    
    
    




    点我刷新购物车
    点我加入购物车
    点我删除一个

    

        购物车空空如也
    

    

        

            
商品名称
            
价格
        
        

            
{{good.name}}
            
{{good.price}}
        
    

1.v-for循环数字、数组、对象

    
    
    



    
循环数字
    
数字为：{{i}}
    

    
    
循环数组
    
人名为：{{item}},索引为：{{i}}
    


    
循环对象
    
key值是：{{key}}，value值是：{{value}}
    

	







# vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）

# 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
    页面更新之后，会加速DOM的替换（渲染）
    :key="变量"

# 实测：
    不能写属性为key ，换一个 id或者其他属性

2.检测与更新

    
    
    



    点我变化
    
{{item}}
    

    
    点我变化1
    
{{item}}






# 注意：
    1.js中对象(字典)的key，可以不用加引号

# vue中，数组或对象的部分方法，才会自动检测及时更新，但有部分方法不会
# 故采用：
    Vue.set(数组, 索引, 值)  # 会被及时检测更新
    Vue.set(对象, key, 值)  # 会被及时检测更新