Vue过滤案例、按键修饰符、数据双向绑定

一、v-for能循环的类型

1. 数组、带索引
2. 对象、默认value值、也可以是key值
3. 字符串、带索引
4. 数字、带索引
   

二、js的几种循环方式

1. js的循环基于索引的循环
2. js的in循环拿到的是索引
3. es6语法 of循环
4. 数组的方法 forEach循环
5. jQuery的循环 循环数组、对象

三、key值的解释

之前我们用v-for放在标签上，其实标签上还可以放key，但是key值必须是唯一，不然就程序报错，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟DOM的替换。想要专业一些那就尽量写这个方式

{{item}}

四、数组、对象的检测与更新

对象，新增一个key-value，发现页面没有变化，以后设置下即可。

Vue.set(this.info，"hobby’，'篮球') 

五、input的几个事件

六、事件修饰符

七、按键修饰符

类似于键盘映射，按了键盘的那个键就会触发其对应的函数并执行下面介绍一下具体用法


箭头函数写法演变过程

定义函数
@keyup="handleKeyUp"
按键修饰符
@keyup.enter # 可以是键盘对应的英文单词
@keyup.13 # 或数字对应关系也是可以的

# keycode对照表链接
https://www.cnblogs.com/guochaoxxl/p/16753266.html

八、表单控制

1. radio 单选
2. checkbox 单选和多选

九、过滤案例

    
    
    


    
filter example
    pls enter sth: 
    

        
{{item}}
    

十、购物车案例

    
    
    

    


    
SHOPPING CAR LIST
    

        

            

            

                

                    

                    

                        
goods
                        
price
                        
quantity
                        
select
                        

                        
                    
                    
                    

                    

                        
{{shopping.name}}
                        
{{shopping.price}}
                        

                        

                    
                    
                

                    total:{{summary}}RMB