Vue的指令

什么是指令？

• 指令的本质就是自定义属性
• 指令的格式：以v-开始。

1. v-cloak

防止页面加载时出现闪烁问题

• 如何解决该问题：使用v-cloak指令
• 解决该问题的原理：先隐藏，替换好值之后再显示最终的值

​​​​​​​2. v-text 填充纯文本

• v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题；
• 如果数据中有HTML标签会将html标签一并输出；
• 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。

. v-html 填充HTML片段

• 本网站内部数据可以使用，来自第三方的数据不可以用
• 用法和v-text 相似 但是他可以将HTML片段填充到标签中；
• 可能有安全问题, 一般只在可信任内容上使用 v-html ，永不用在用户提交的内容上；
• 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

4. v-pre 填充原始信息

•  显示原始信息，跳过编译过程（分析编译过程）；
• 跳过这个元素和它的子元素的编译过程；
• 一些静态的内容不需要编译加这个指令可以加快渲染

5. v-once 只编译一次

• 显示内容之后不再具有响应式功能；（执行一次性的插值【当数据改变时，插值处的内容不会继续更新】）。

6. v-model

• 双向数据绑定

• 当数据发生变化的时候，视图也就发生变化

• 当视图发生变化的时候，数据也会跟着同步变化

• v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用

7. v-on

• 用来绑定事件的

• 形式如：v-on:click 缩写为 @click;

8. v-bind属性绑定

• 动态处理属；

• v-bind 指令被用来响应地更新 HTML 属性；

• v-bind:href 可以缩写为 :href;

9. ​​​​​​​v-if

• 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
• 进行两个视图之间的切换

10.v-for

• 用于循环的数组里面的值可以是对象，也可以是普通元素