vue常见内置指令

1. v-bind 简写成:

2. v-model

3. v-for

4. v-on 事件绑定，简写成@

5. v-if 如果是false,元素会被删除，会影响页面性能，不适用于元素被频繁删除新增的场景

6. v-else 必须紧跟在 v-if之后使用，

7. v-show 元素没有被删除，只控制显示和隐藏

8. v-text  不能解析html元素

9. v-html 可以解析html元素，使用不当，会导致xss安全漏洞。

10. v-cloak 只有名，没有值，阻止没有被vue渲染的元素在页面上展示，在vue接管页面的同时，删除元素中的v-cloak属性

11. v-once 模板只被解析一次，后续的变更不会影响此模板，一般用于展示变量的初始值。

12. v-pre 模板不被vue解析

13. 自定义指令

v-text 

1. 直接替换

2. 不会解析html元素,， 比如<h3>wtfff</h3> ,v-text会把这个数据完全展示，而不会把wtfff渲染成h3的格式，

v-html 及其 安全问题 

cookie的工作原理

会解析html元素,， 比如<h3>wtfff</h3> ,v-text会把这个数据展示的同时，会把wtfff渲染成h3的格式。

document.cookie 可以获取 所有httponly 为false的cookie

v-cloak  阻止未经vue渲染的元素在页面上显示。只有名，没有值。

在vue接管页面的同时，删除掉元素里的v-cloak属性。

style{

[v-cloak]: display-one; //表示所有有v-cloak的元素都应用此css

}

有一个js资源，网络不好，花费了5秒才加载完成。

JS阻塞。js代码里如果有一步有阻塞，那么其它的代码必须在这一步执行完后，再执行下面的代码。

v-once

只渲染一次，后续数据的变更不会影响此数据

实践

v-pre 

让vue不解析模板，

实践

显示

自定义指令