vue列表渲染-v-for指令，vue事件处理，数据双向绑定，表单控制

es6对象语法

列表渲染-v-for指令

v-for基本使用

    
    
    



    
{{item}}

显示购物车案例

    
    
    



    
购物车
    
购物车什么都木有
    

        

        

            
商品id
            
商品名字
            
商品数量
            
商品价格
            
商品图片
        
        
        

        

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

        
        
    
    加载购物车

v-for可以循环的类型

    
    
    



    
循环数组
    

        
        
{{item}}---{{index}}
    
    
循环对象
    

        
        
{{value}}---{{key}}
    
    
循环字符串
    

        
        
{{value}}---{{index}}
    
    
循环数字
    

        
        
{{item}}--->{{index}}
    

js的循环方式

事件处理

input 表示的事件

    -blur ：失去焦点
    -focus：得到焦点
    -change ：内容发生变化
    -input： 只要输入内容就触发

基本使用

    
    
    



    
v-mode指令
    用户名： --- {{name}}
    
blur：失去焦点
     --- {{data01}}
    
focus：得到焦点
     --- {{data02}}
    
change：内容发生变化
     --- {{data03}}
    
input：只要输入内容就触发
     --- {{data04}}

过滤案例

补充1 数组的过滤

补充2 判断子字符串是否在字符串中

补充3 箭头函数

过滤案例

    
    
    



    
过滤案例
    
    

        
{{item}}
    

事件修饰符

修饰点击事件的 修饰符
    once：只点击一次
    prevent：阻止a的跳转
    self：父签上用 ，只处理自己的事件，子控件冒泡的事件不处理
    stop：子标签上用只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）

    
    
    



    
事件修饰符
    
once 只点击一次
    点我弹窗<
    
prevent 阻止a的跳转
    点我看美女
    
stop，子标签上用只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
    

        
li001--不让事件往上冒泡了
        
li002
    
    
self，父签上用 ，只处理自己的事件，子控件冒泡的事件不处理
    

        
li001
        
li002
    

按键修饰符

按键是个事件--》keyup  keydown

    
    
    



    
按键事件
    
    
按键修饰符
    
    

数据双向绑定

# v-model 指令，只针对于input标签

# 使用v-model绑定后，只要变量发生变化，页面就变化，只要页面变化，变量就变化

表单控制

checkbox选中，单选，多选,radio

input 标签，使用 v-model 双向绑定  
    text
    password
    checkbox
    file
    radio

    
    
    




    
checkbox
    
用户登录示例
    
用户名：
    
密码：
    
记住密码：
    
爱好：

        篮球
    足球

    乒乓球

    

    男
    女
    保密
    登录