Vue绑定事件，双向数据绑定，只是循环没那么简单

v-on对象处理

 对象形式 

 对象形式 

    
    
    
    



    
对象形式

v-on:keyup监听按键触发常见的按键别名：

    '.enter'
    '.tab'
    '.delete'(捕获“删除”和“退格”键)
    '.esc'
    '.space'
    '.up'
    '.down'
    '.left'
    '.right'

按键序号网址查询:'http://www.cnblogs.com/wuhua1/p/6686237.html'

Vue.config.keyCodes.f1 = 112

Do something

A

    
    
    
    



    
    
对象形式

事件修饰符

    '.stop'      -- 阻止事件冒泡
    '.prevent'   -- 阻止默认事件
    '.capture'   -- 添加事件侦听器时使用事件捕获模式
    '.self'      --只当事件在该元素本身（比如不是子元素）触发时触发回调
    '.once'      --事件只触发一次
    'native'     -- 给组件绑定点击事件

阻止事件冒泡

实现捕获触发事件的机制 -- capture

冒泡是从向外依次触发，使用capture，就变成了从先显示外面，在显示里面

打印结果最外层div最内层div

只会阻止自己身上冒泡行为 -- self只会阻止自己身上冒泡行为 ,当有多层嵌套的时候，只会阻止有self 冒泡行为

这是触发了 btn 按钮 的点击事件这是触发了 outer div 的点击事件

阻止默认事件 -- prevent1.例如a标签默认事件就是点击跳转页面，为了阻止a标签的默认事件触发我们绑定的事件，可以使用prevent2.图片的默认事件禁止拖拽，如果想给图片设置拖拽效果的话记得做阻止默认行为

    
    
    
    



    百度

只触发一次默认行为1.只触一次规定的默认行为2.下面的案例第二次点击就会跳转页面

    
    
    
    



    百度

阻止事件冒泡 -- stop

事件冒泡从里向外阻止事件冒泡使用stop

v-on -- 方法处理器和内联处理器两者区别写法上，带不带括号

没有括号不支持传参但只带event由于带括号支持传参，但必须$evnet 当参数传入才有evet事件

方法处理器内联处理器

v-model 双向数据绑定

修饰符
        .lazy :失去焦点同步一次
        .number :格式化数字
        .trim : 去除首尾空格

checked -- 多选框(用数组接收)

    
    
    
    



    爱好
    

    足球
    篮球
    {{msg}}

select --下拉

    
    
    
    



    
        
            {{ option.text }}
        
    
    Selected: {{ selected }}

v-for -- 循环

支持循环数组|对象|数字|字符串，Array | Object | number | string

数组使用

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

循环对象

{{value}}-{{key}}-{{index}}

{{item}}

对象重新渲染

怎么保证不在计划内的值也被重新渲染1.调用Vue的静态方法：set2.调用实例上的方法 ：$set3.给计划内的对象重新赋值：vm.object = {key:'新的'}4.添加指定属性重新构建赋值：Object.assign()

第一种解决方法 -- set/$set




    
    
    
    



    

$set ($set 是实例方法因此也是this在内部直接调用)

给计划内的对象重新赋值

vm.object = {key:'新的'}




    
    
    
    



    

Object.assign({},this.object,{key,value})




    
    
    
    



    

数组重新渲染

    'push()'
    'pop()'
    'shift()'
    'unshift()'
    'splice()'
    'sort()'
    'reverse()'
        
filter(), concat() 和 slice() ,map()

依旧支持set/$set

splice是个好方法会常用

解决vm.items[indexOfItem] = newValue不能被渲染的问题

使用方法set 是Vue静态方法，通过Vue调用使用Vue.set( array, indexOfItem, newValue)

    
    
    
    



    
{{i}}
    
    提交

splice 是一个好方法

v-for 为什么要配合v-bind:key

    
    
    


  


    

      Id:
        
      

      Name:
        
      

      
    

    
    
    
    

      {{item.id}} --- {{item.name}}
    
  

  

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的简书！

这是一个有质量，有态度的博客