JS，Vue2，事件处理，计算属性，监视属性，class与style绑定

Posted 2023-03-18

参考技术A

用v-on指令或者@监听DOM事件，并在触发时运行一些javascript代码；

参考：JS，Vue2，介绍，与Vue3区别，MVVM设计模式，模板语法，数据绑定

Vue中的事件修饰符：

1、prevent：阻止默认事件（常用）；

2、stop：阻止事件冒泡（常用）；

3、once：事件只触发一次（常用）；

4、capture：使用事件的捕获模式；

5、self：只有event.target是当前操作的元素时才触发事件；

6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

Vue中常用的按键别名：

回车 => enter、删除 => delete (捕获“删除”和“退格”键)、退出 => esc、空格 => space、换行 => tab (特殊，必须配合keydown去使用)、上 => up、下 => down、左 => left、右 => right等。

代码案例

模板内的表达式是非常便利的，用于简单的运算。当其过长或逻辑过于复杂时，会难以维护，因此，当遇到复杂的逻辑时应该使用计算属性，用computed计算属性。

代码案例

通过watch来响应数据的变化。

代码案例

class样式，写法:class="xxx" ，其中xxx可以是字符串、对象、数组。

1、字符串写法适用于：类名不确定，要动态获取。

2、对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

3、数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

style样式，写法：:style="fontSize: xxx"，其中xxx是动态值；:style="[a,b]"其中a、b是样式对象。

代码案例

Vue基础(中)：数据代理事件处理计算和监视属性class与style绑定