复习

# 1 属性指令
	-v-bind:属性名=属性值
    -:属性名=属性值
    -src，href，id，name，自定义属性
    
# 2 class和style属性
	-字符串，数组，对象
    -class使用数组，style使用对象（对象的key可以不加引号，如果不加引号，使用驼峰）
    
# 3 条件渲染
	-v-if=条件
    -v-else-if=条件
    -v-else
    -如果复合期中某一个，显示某个标签
# 4 列表渲染
	-v-for
    -对象   item in book_list：item指的是value
    	   value,index in book_list:value和index值和key
    -数组   
    -数字
    -字符串
    
# v-for控制购物车商品展示

# key值的解释：加快虚拟dom的替换
# 数组的检测与更新

# 数据双向绑定  input    v-model绑定
	-只要input的value属性发生变化，绑定的js变量也变化
    
# 事件处理
# 过滤案例：input的事件
	-input：只要input发生变化，就会触发
    -change：只要value值变化，就会触发
    -blur：只要失去焦点，就会触发
# 事件修饰符：stop（阻止事件冒泡，加在子组件上），
    -self阻止事件冒泡，加在父组件上），
    -prevent（阻止a标签跳转），
    -once（只点击依次）
    
# 按键修饰符
	-@keyup=函数
    -只要键按下弹起，就会触发
    -@keyup.enter=函数 :只要enter键，弹起，就会触发
    

    
  

今日内容

1 表单控制之checkbox，单选，多选

    
    
    



    

        
用户名：
        
密码：


        男
        女
        保密

        
记住密码

        
选择爱好(多选)
        
足球
        
篮球
        
乒乓球
        

您选择的性别：{{radio}}
        

您选择的爱好是：{{checkMany}}

    

2 购物车案例(普通)

    
    
    



    

        

            
商品名称
            
商品价格
            
商品数量
            
选中/不选中
        
        

            
{{item.name}}
            
{{item.price}}
            
{{item.count}}
            

        
    

    
您选中的商品有：{{checkGroup}}
    
总价格为(由于数据的双向绑定，只要变量变了，页面也会变)：{{getPrice()}}

3 购物车案例(全选，全不选)

    
    
    



    

        

            
商品名称
            
商品价格
            
商品数量
            
选中/不选中 
        
        

            
{{item.name}}
            
{{item.price}}
            
{{item.count}}
            

        
    

    
您选中的商品有：{{checkGroup}}
    
总价格为(由于数据的双向绑定，只要变量变了，页面也会变)：{{getPrice()}}

4 购物车案例（数量加减）

    
    
    



    

        

            
商品名称
            
商品价格
            
商品数量
            
选中/不选中 
        
        

            
{{item.name}}
            
{{item.price}}
            
-{{item.count}} +
            

        
    

    
您选中的商品有：{{checkGroup}}
    
总价格为(由于数据的双向绑定，只要变量变了，页面也会变)：{{getPrice()}}

5 v-model进阶

lazy:懒对应
number：只要以数字开头，就只保留数字
trim：截掉前后的空格

    
    
    



    
    
    


    

    
    


    

    

    {{name}}

6 生命周期钩子

6.1 延迟和定时任务

# 8个
	-created
    -mounted
    -updated

    
    
    



    
    


    删除子组件
    显示子组件

7 跟后端交互

    
    
    

    









    
电影名为：{{data.name}}
    
导演：{{data.director}}