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

JavaScript05

JS,Vue2,事件处理,计算属性,监视属性,class与style绑定,第1张

用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.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

未发现漏洞

Vue.js 创始人尤雨溪获悉此事后,迅速进行了回应:https://zhuanlan.zhihu.com/p/461720764,他表示 Vue 对于安全问题十分重视,但他们近期并没有收到漏洞报告。而且 Vue 作为开源项目,又是以 JavaScript 源码形式发布的前端项目,每一行代码都公开接受任何安全审计。Vue 2 发布至今已经 5 年多,在全球业界被广泛使用,期间从未有被发现过真正意义上的安全漏洞。