Vue基本指令

一、基本指令

1. v-cloak 指令
   - 解决插值表达式，即{{ }}存在的“闪动”问题
   - 原理：先隐藏，替换好值之后再显示最终的值

用法：
（1）提供样式
[v-cloak] {
		display: none;
	}
（2）在插值表达式所在的标签中添加v-cloak指令

2. v-text 指令
   - 填充纯文本
   - 相比插值表达式更加简洁
3. v-html 指令
   - 填充HTML片段
   - 存在安全问题，本网站内部数据可以用，来自第三方的数据不可用
4. v-pre 指令
   - 显示原始信息，跳过编译过程
5. v-once 指令
   - 只编译一次，显示内容后不再具有响应式功能
   - 应用场景：若显示的信息后续不需要再修改，则可使用该指令，可提高性能
6. v-model 指令
   - 用于表单数据的双向绑定
7. v-on 指令
   - 用于事件绑定，简写为@
   - v-on:click="num++" 或者 @click="num++"

二、事件函数的调用方式

（1）直接绑定函数名称
<button @click="say">Hello</button>
参数传递：默认会传递事件对象作为事件函数的第一个参数
（2）调用函数
<button @click="say()">Say hi</button>
参数传递：若要传事件对象，则事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event