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结合使用。
既可以遍历数组也可以遍历对象。