vue的常用指令

1. v-bind：用于响应地更新 HTML 属性。

   <img v-bind:src="imageSrc">  
   <!-- 简写形式 -->  
   <img :src="imageSrc">

2. v-on：用于监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

   <button v-on:click="handleClick">点击我</button>  
   <!-- 简写形式 -->  
   <button @click="handleClick">点击我</button>

   v-model：创建双向数据绑定。它主要用于表单元素

   <input v-model="message" placeholder="edit me">  
   <p>Message is: {{ message }}</p>

3. v-if：根据表达式的真假条件渲染元素。

   <div v-if="showMessage">Hello</div>

4. v-else ：与v-if或v-else-if一起使用，表示"否则"的情况。

<div v-if="score >= 90">优秀</div>  
<div v-else-if="score >= 60">及格</div>  
<div v-else>不及格</div>

v-for：基于源数据多次渲染元素或模板块

<div v-for="item in items" :key="item.id">  
  {{ item.text }}  
</div>

v-text ：更新元素的textContent

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

1. v-html ：更新元素的innerHTML。

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

2. v-show ：根据条件切换元素的 CSS 属性display。

   <div v-show="isVisible">Hello</div>

   v-once：元素和组件只渲染一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

   <span v-once>这个将不会改变: {{ message }}</span>

   v-pre：

3. 用途 ：跳过元素和其子元素的编译过程。这可以用来显示原始的 Mustache 标签。当你只想显示原始的 {``{}} 标签而不是将其解析为数据时，这个指令会很有用。

   <span v-pre>{{ 这将不会被编译 }}</span>

   输出将是 {``{ 这将不会被编译 }} 而不是解析后的数据。

v-cloak：

• 用途：在元素加载之前保持隐藏。这通常用于解决在 Vue 实例编译结束前，可能会短暂地显示未编译的 Mustache 标签的问题。

<div v-cloak>  
  {{ message }}  
</div>

配合 CSS：

[v-cloak] {  
  display: none;  
}

当 Vue 实例准备好后，v-cloak 指令将被移除，此时 <div> 将变得可见。

v-memo：

• 用途：为 v-for 或 v-if 提供的元素或组件设置记忆，使得只有在相关响应式依赖发生变化时才会重新渲染。这有助于优化性能，避免不必要的渲染。

<div v-for="item in list" :key="item.id" v-memo="[item.id]">  
  {{ item.text }}  
</div>

在这个例子中，只有当 item.id 发生变化时，对应的 <div> 才会重新渲染。