vue常用指令

Vue.js 提供了一些内置的指令，这些指令可以用来操作 DOM 或者添加一些特殊的响应式行为。以下是一些常用的 Vue 指令：

1. v-bind：用于动态地绑定一个或多个属性，或者一个组件的 prop 到表达式。

   <!-- 绑定一个属性 -->
   <img v-bind:src="imageSrc">
    
   <!-- 简写 -->
   <img :src="imageSrc">
   

2. v-model：在表单输入和应用状态之间创建双向数据绑定。

   <input v-model="message" placeholder="edit me">
   

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

   <button v-on:click="doSomething">Click me</button>
    
   <!-- 简写 -->
   <button @click="doSomething">Click me</button>
   

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

   <p v-if="seen">Now you see me</p>
   

5. v-else：与 v-if 结合使用，当 v-if 的条件为假时渲染元素。

   <p v-if="seen">Now you see me</p>
   <p v-else>Now you don't</p>
   

6. v-show：根据表达式的真假值切换元素的 display CSS 属性。

   <p v-show="seen">Now you see me</p>
   

7. v-for：基于一个数组来渲染一个列表。

   <ul>
     <li v-for="item in items">{{ item.text }}</li>
   </ul>
   

8. v-text：更新元素的 textContent。

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

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

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

10. v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

    <span v-once>This will never change.</span>
    

11. v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。

    <span v-pre>{{ This will not be compiled }}</span>
    

12. v-cloak：这个指令将在 Vue 实例结束编译时从绑定的 HTML 元素上移除。通常结合 CSS 规则如 [v-cloak] { display: none; } 使用，以避免页面加载时出现未编译的 Mustache 标签直到实例准备完毕。

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

这些指令是 Vue.js 中的基础，它们使得开发者能够以声明式的方式构建用户界面。随着 Vue.js 的发展，还可能会有新的指令被引入。