Vue常用指令入门

1. v-for

作用：用于遍历对象或数组
注意：需要提供key属性，可以提高性能和避免渲染错误，值通常为index或item.id

<li v-for="(item, index) in items" :key="index">{{ item }}
</li>

2. v-if,v-else-if,v-else

作用：用于条件判断，满足条件的标签内容才会被渲染

<p v-if="isShow">显示</p>
<p v-else-if="other">其他</p>
<p v-else>隐藏</p>

3. v-show

作用：用于条件渲染，和v-if有着类似作用。

<p v-show="isVisible">我可见吗？</p>

4. v-bind

作用：用于绑定属性，可以绑定html属性比如src，class，也可以绑定自定义属性，比如dataSource"

<img v-bind:src="imgUrl">
<!-- 简写 -->
<img :src="imgUrl">
<!-- 与对象一起使用可以绑定多个属性 -->
<div v-bind="{ src: mySrc, class: myClass }"></div>
<!-- 绑定自定义属性 -->
<a-table :dataSource="dataSource" :columns="columns" :pagination="pagination" :loading="loading">
</a-table>

5. v-on

作用：用于事件监听，比如监听鼠标点击事件onClick，表单值修改事件onChange等等也可以用修饰符.prevent阻止表单提交，页面刷新,.stop阻止事件冒泡等

<button v-on:click="handleClick">点击</button>
<!-- 简写 -->
<button @click="handleClick">点击</button>
<!-- 使用修饰符 -->
<button @click.stop="handleClick">点我</button>

6. v-model

作用：数据双向绑定，其实是v-bind+v-on指令的组合
应用场景：例如需要将表单数据同步到页面，或者是父子组件的数据同步

<input v-model="inputValue">
{{ inputValue }}

7. v-text和v-html

<p v-text="message"></p>
<!-- 等同于 -->
<p>{{ message }}</p>

<p v-html="myHtml"></p>

8. v-show与v-if的区别

• 原理：v-if通过控制dom元素是否存在，v-show控制display属性
• 性能开销：v-if初次加载快，频繁切换慢，v-show初次加载慢，频繁切换快
• 应用场景：v-if适用于较少切换的场景，v-show适用于频繁切换

9. v-text与v-html的区别

• 功能：v-text用于输出纯文本，v-hmtl可以渲染文本为dom
• 安全性：v-text安全，v-html有XXS风险