天天看点

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

v-on对象处理

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

事件修饰符

阻止事件冒泡

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

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

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

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

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

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

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

阻止事件冒泡 -- stop

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

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

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

方法处理器内联处理器

v-model 双向数据绑定

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

select --下拉

v-for -- 循环

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

数组使用

循环对象

对象重新渲染

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

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

给计划内的对象重新赋值
数组重新渲染

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

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

splice 是一个好方法

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

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

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

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

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!