Vue指令

v-html ：指令用于输出包含HTML标签的内容。它将指定的数据作为HTML解析并插入到DOM中。这个指令主要用于渲染动态生成的HTML内容，但要注意潜在的安全风险，因为直接插入HTML可能导致跨站脚本攻击（XSS攻击）

<div v-html="htmlContent"></div>

v-bind ：指令用于动态地绑定HTML属性或组件的prop到表达式。它的主要作用是响应式地更新DOM元素的属性，使得属性的值能够随着数据的变化而变化。

<img v-bind:src="imageUrl">

简写——<img :src="imageUrl">

v-model 指令用于在表单控件元素（如input、textarea、select、text）上创建双向数据绑定。它能够自动将表单控件的值与Vue实例中的数据进行同步。

<input v-model="message">

v-text 指令用于替代插值表达式 {{ }}，将指定的数据渲染为纯文本。

<span v-text="message"></span>

v-if 指令根据表达式的值条件性地渲染或销毁元素。它主要用于在DOM中根据条件添加或删除元素，以此来控制元素的显示和隐藏。

<div v-if="isVisible"> 只有当isVisible为true时，这个div才会显示。 </div>

v-for 指令基于数组或对象的数据源，循环渲染列表或多个元素。它能够遍历数据源中的每一项，并为每一项生成对应的DOM元素或组件。

<ul> <li v-for="item in items" :key="item.id"> {{ item.name }} </li> </ul>

v-show 指令根据表达式的值条件性地显示或隐藏元素，类似于CSS的 display 属性。与 v-if 不同的是，v-show 不会销毁和重建元素，只是简单地切换元素的 display CSS属性。

<div v-show="isVisible"> 这个div会根据isVisible的值来显示或隐藏。 </div>

 v-on 指令用于监听DOM事件，并在事件触发时执行相应的方法。它可以用来给元素绑定事件处理函数，比如点击事件、键盘事件等。简写为@

<button v-on:click="handleClick"> 点击我触发handleClick方法 </button>