前端开发学习笔记(二) : Vue3 常用指令和功能

Vue 提供了许多指令和功能来处理不同的任务和逻辑，使得开发更加高效和便捷。

在模板中使用 v-if 指令时，你需要将其绑定到一个布尔表达式上。如果该表达式的值为 true，则元素或组件将被渲染到页面上；如果为 false，则元素或组件将被从 DOM 中移除。

<div v-if="isShown">
  <!-- 这个元素/组件将在isShown为true时渲染 -->
</div>

除了 v-if，Vue 还提供了 v-else 和 v-else-if 来实现条件渲染的分支。

<div>
  <p v-if="condition">条件为true时显示</p>
  <p v-else-if="otherCondition">其他条件为true时显示</p>
  <p v-else>以上条件都不满足时显示</p>
</div>

v-else 指令必须紧跟在带有 v-if 或 v-else-if 的元素之后，并且在同一父元素内。

用于基于一个数组来渲染一个列表。

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
</ul>

用于在表单输入和应用状态之间创建双向绑定。

<input v-model="message" />

用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码。可以简写为 @。

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

用于动态地绑定一个或多个属性，或者一个组件 prop 到表达式。可以简写为 :。

<a v-bind:href="url">Link</a>
<!-- 简写形式 -->
<a :href="url">Link</a>

另一种条件渲染的指令，不同于 v-if 的是，v-show 只是切换元素的 CSS 属性 display，而不是真正地移除和重建元素。

<p v-show="isVisible">Hello, World!</p>

用于访问子组件中的插槽。Vue 2.6.0+ 中引入了一个统一的语法（以 v-slot 指令前缀表示），在 2.6.0 之前是使用 slot 和 slot-scope 属性。

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

跳过这个元素和它的子元素的编译过程。可以用来优化更新性能。

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

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

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

渲染元素和组件只一次。之后的渲染任务，将会跳过该元素和它的子元素，这对于优化更新性能是非常有用的。

<span v-once>This will never change: {{msg}}</span>

这些指令和功能是 Vue 开发中的基础，能够帮助你更好地控制渲染流程、数据绑定、事件处理等。了解和熟练使用这些能力，将极大地提升你的 Vue 应用开发效率。

最后修改于 2024-02-05