锐客网

  1. 首页 > it技术 > >

Vue（属性&事件绑定）

v-bind（缩写“:” -- 属性绑定 ）
v-mode（双向数据绑定）
v-on（缩写“@”-- 绑定事件）

一、v-bind
缩写“:” （属性绑定）
【Vue（属性&事件绑定）】给标签属性绑定变量属性，否则会按照字符串处理；里面可以写js表达式。
Vue（属性&事件绑定）
文章图片


二、v-mode
（双向数据绑定）
双向绑定：页面标签值被修改时会同步数据层的值。反之，亦然。?案例：计算器
Vue（属性&事件绑定）
文章图片

Vue（属性&事件绑定）
文章图片


三、v-on
缩写“@” （事件绑定）
包括点击事件、鼠标移入、按键事件、改变事件等等。
（1）、点击事件
Vue（属性&事件绑定）
文章图片

（2）、鼠标事件
Vue（属性&事件绑定）
文章图片

（3）、按键事件


全部的键盘别名：
.enter.tab.delete (捕获 “删除” 和 “退格” 键).esc.space.up.down.left.right.ctrl.alt.shift.meta(window系统下是window键，mac下是command键)

Alt + C ：
Ctrl + Click ：点我

注意！！！如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native
比如：

（4）、改变事件
在js的vm的方法里写上 vm.selectOption = "2" 即可默认选中页面2在vm的方法模块中写上 对应的逻辑当切换时就会触发


四、事件修饰符
Vue（属性&事件绑定）
文章图片

1、stop：此时点击里面的按钮会触发外面元素的事件，因此用该属性阻止。
Vue（属性&事件绑定）
文章图片


2、prevent：默认会跳转到百度，因此可以用该属性阻止。
Vue（属性&事件绑定）
文章图片


3、capture：从外到里的执行事件。
Vue（属性&事件绑定）
文章图片


4、self：只有被点击了才会触发事件。
Vue（属性&事件绑定）
文章图片


5、once：只执行一次阻止默认行为事件。即第一次点击链接不会跳转到百度，第二次点击会跳转。
Vue（属性&事件绑定）
文章图片

    推荐阅读


    上一篇：C编程基础|使用C语言实现给字符串去重

    下一篇：Utils|常用工具类（二）（HttpUtil 发送HTTP请求）