Vue基础之指令的用法和注意事项

一、指令

1、什么是指令?

就是一系列用 ‘v-’ 开头的自定义属性。

2、v-cloak解决插值表达式的闪动问题

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

实现原理是:先让插值表达式隐藏,当VUE编译结束后把结果显示在页面。

3、v-text / v-html / v-pre注意点

① v-text::可替代v-cloak, 用法比v-cloak简洁;

<span v-text="msg"></span>

② v-html:可解析html标签,但是如果是跨域动态渲染的话不推荐使用,因为容易遭受XSS攻击。

XSS 即(Cross Site Scripting)中文名称为:跨站脚本攻击。XSS的重点不在于跨站点,而在于脚本的执行。
那么XSS的原理是:恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候,那么嵌入到web页面中script代码会执行,因此会达到恶意攻击用户的目的。那么XSS攻击最主要有如下分类:反射型、存储型、及 DOM-based型。 反射性和DOM-baseed型可以归类为非持久性XSS攻击。存储型可以归类为持久性XSS攻击。

<div v-html="<h2>hello</h2>"></div>

③ v-pre:显示原始信息跳过编译过程。我们都知道Vue的代码运行到浏览器上必须通过Vue框架编译,将Vue语法编译成原始的js代码。

<span v-pre>{{ this will not be compiled }}</span>

4、v-once

因为Vue的数据具有响应式的特点,如果绑定了v-once后,数据只渲染一次,这样可以提高一定的性能。

5、事件修饰符

.stop: 阻止冒泡行为
.prevent: 阻止默认行为,比如submit和链接跳转
.self: 只触发元素本身的事件

注意:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而
v-on:click.self.prevent 只会阻止对元素自身的点击。

6、按键修饰符

<input v-on:keyup.enter="submit">

7、自定义按键修饰符

自定义的名称可以是自己定义的,但是对应的值必须是event.keyCode对应的值。比如:

Vue.config.keyCodes.f1 = 112

8、v-model的底层实现原理

<input type="text" v-bind:value="msg" v-on:input="handle">

从视图到数据是通过input事件触发,在触发函数中将输入框的内容赋值给data中的数据。
从数据到视图通过v-bind绑定value值。

9、v-show和v-if的区别

v-show主要是控制style样式display: none的有无,是会渲染到页面的。
v-if如果值为false则不会渲染到页面,如果值为true将渲染到页面。实质上是控制DOM元素的增加和删除,对性能的开销比较大。
总结:如果仅仅是对样式进行控制,最好使用v-show。

10、v-for

v-for最好和:key一起使用,这样可以给每循环创建的每一个标签添加特定的标识符,帮助Vue区分不同的元素,从而提高性能。
可以和v-if结合使用。
既可以遍历数组也可以遍历对象。

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页