vue常用指令 - 技术栈

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

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

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


<img :src="imageSrc">
```
v-model：在表单输入和应用状态之间创建双向数据绑定。
复制代码
复制代码
```
<input v-model="message" placeholder="edit me">
```

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

复制代码

<button v-on:click="doSomething">Click me</button>

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

v-if：根据表达式的真假条件渲染元素。
复制代码
复制代码
```
<p v-if="seen">Now you see me</p>
```
v-else：与 v-if 结合使用，当 v-if 的条件为假时渲染元素。
复制代码
复制代码
```
<p v-if="seen">Now you see me</p>
<p v-else>Now you don't</p>
```
v-show：根据表达式的真假值切换元素的 display CSS 属性。
复制代码
复制代码
```
<p v-show="seen">Now you see me</p>
```
v-for：基于一个数组来渲染一个列表。
复制代码
复制代码
```
<ul>
  <li v-for="item in items">{{ item.text }}</li>
</ul>
```
v-text：更新元素的 textContent。
复制代码
复制代码
```
<span v-text="msg"></span>
```
v-html：更新元素的 innerHTML。
复制代码
复制代码
```
<div v-html="rawHtml"></div>
```
v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
复制代码
复制代码
```
<span v-once>This will never change.</span>
```
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。
复制代码
复制代码
```
<span v-pre>{{ This will not be compiled }}</span>
```
v-cloak ：这个指令将在 Vue 实例结束编译时从绑定的 HTML 元素上移除。通常结合 CSS 规则如 [v-cloak] { display: none; } 使用，以避免页面加载时出现未编译的 Mustache 标签直到实例准备完毕。
复制代码
复制代码
```
<div v-cloak>
  {{ message }}
</div>
```

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