Vue基础：二、指令

• 插值：{{}}
• v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
• v-show：调整css dispaly属性，可以使客户端操作更加流畅。
• v-for：在要循环的标签上使用。比如在ol标签下的li标签上使用。
• v-on：绑定事件。如v-on:click、v-on:keyup.enter。enter可用键码：v-on:keyup.13。简写如@click
• v-bind：绑定属性值。v-bind:src=“imgSrc”，简写:src=“imgSrc”。

 例如：style标签中设置两个class：{.classA{color: red;} .classB{font-size: 150%}}
:class="className"，data:{className: 'classA'}
:class="{classA:isOk}" ，data:{isOk: true}
:class="[classA, classB]"
:class="isOk?classA:classB"
:style="{color:red,fontSize:font}"，data:{red: 'red', font: '20px',}
:style="styleObject"，data:{styleObject: {color: 'green', fontSize: '24px'}}

	 - 注意：这里的fontSize使用驼峰法替代font-size

• v-model：双向绑定。如 input 标签中：
  • v-model.lazy:懒加载，失去焦点后更新数据
  • v-model.number:数字，如果一开始输入的就是字母，则number属性失效
  • v-model.trim:去空格
• v-text：效果与插值 {{}} 相同。推荐使用，插值法如果数据刷新慢，界面会出现类似于{{message}}的信息，v-text不会出现这种情况。v-text会覆盖元素中原本的内容，v-cloak不会。
• v-html：解释html标签。不推荐使用，易遭受xss攻击，特别是提交表单时。
• v-pre：原样输出，不渲染。
• v-cloak：渲染完成后，才显示。
• v-once：只进行第一次渲染。
• v-slot：绑定插槽、为插槽传入 prop 的时候使用。
  • <slot name=“header”> 具名插槽，name属性
  • <template v-slot:header> 绑定插槽
  • <slot v-bind:user=“user”> 在slot标签上绑定属性，传入user对象，匿名插槽默认名是default
  • <template v-slot:default=“slotProps”> {{ slotProps.user.firstName }} 获取prop。
    可解构：v-slot="{ user }"、v-slot="{ user: person }"、v-slot="{ user = { firstName: ‘Guest’ } }"