不努力，谁会可怜你？
不努力，谁会可怜你？

Vue：属性&事件绑定

v-bind（缩写“:” -- 属性绑定 ）

v-mode（双向数据绑定）

v-on（缩写“@”  -- 绑定事件）

 

一、v-bind

缩写“:” （属性绑定）

给标签属性绑定变量属性，否则会按照字符串处理；里面可以写js表达式。

Vue：属性&事件绑定_第1张图片

 

二、v-mode

（双向数据绑定）

双向绑定：页面标签值被修改时会同步数据层的值。反之，亦然。​案例：计算器

Vue：属性&事件绑定_第2张图片

 

三、v-on

缩写“@” （事件绑定）

包括点击事件、鼠标移入、按键事件、改变事件等等。

（1）、点击事件

Vue：属性&事件绑定_第3张图片

（2）、鼠标事件

（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）、改变事件