Vue的指令

Vue的指令

Vue.js 中的指令是一些特殊的标记，用于在模板中指定如何将数据应用到 DOM。

下面是一些基本的 Vue 指令：

1. v-bind: 动态绑定一个或多个属性，或一个组件 prop 到表达式，用于动态绑定 HTML 属性到表达式。常用于绑定 class, style 等属性。

   <div v-bind:class="{ active: isActive }"></div>
   

   这里，isActive 是一个变量，当它为 true 时，class="active" 被添加到 div 上。

2. v-model: 在表单控件或组件上创建双向绑定，创建表单输入和应用状态之间的双向绑定。

   <input v-model="message" placeholder="编辑我">
   

   这里，message 是一个变量，输入框的值将与其同步。

3. v-for: 基于一个数组渲染一个列表。

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

   items 是一个包含对象的数组，每个对象都有一个 text 属性。

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

   <div v-if="type === 'A'">A</div>
   <div v-else-if="type === 'B'">B</div>
   <div v-else>C</div>
   

   这里，显示的元素取决于 type 变量的值。

5. v-on: 监听 DOM 事件，并在触发时执行一些 JavaScript。

   <button v-on:click="doSomething">点击我</button>
   

   当按钮被点击时，doSomething 方法将被调用。

6. v-show: 根据表达式之真假值，切换元素的显示与隐藏。

   <div v-show="isVisible">看见我了吗?</div>
   

   如果 isVisible 是 true，则显示 div，否则隐藏。

7. v-pre: 跳过这个元素和它的子元素的编译过程。

   <div v-pre>{{ this will not be compiled }}</div>
   

   这里，花括号内的内容不会被 Vue 编译。

8. v-cloak: 在 Vue 实例结束编译时从绑定的 HTML 元素上移除。通常与 CSS 规则一起使用来隐藏未编译的 Mustache 标签。

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

   在 Vue 实例准备好之前，用户不会看到未编译的 {{ message }}。

9. v-once: 只渲染元素和组件一次。在首次渲染之后，不再随数据的变化重新渲染。

   <div v-once>这个将只被渲染一次 {{ message }}</div>
   

   无论 message 如何变化，这个元素的内容只渲染一次。

这些指令提供了一种灵活的方式来声明性地将数据操作与 DOM 操作相绑定。