vue的指令在 Vue 3 中，使用组合式 API (Composition API) 和 <script setup>

在 Vue 3 中，使用组合式 API (Composition API) 和 <script setup> 语法糖可以更简洁地编写组件。下面是使用组合式 API 的 Vue 3 组件中常用的一些内置指令的示例代码和说明。

Vue 3 组合式 API 内置指令示例

v-model
- 双向数据绑定：用于在表单元素（如 input、textarea 和 select）上创建双向数据绑定。

示例

<!-- App.vue -->
<template>
  <input type="text" v-model="message" />
  <p>You said: {{ message }}</p>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello Vue!');
</script>

v-if
- 条件渲染：根据表达式的真假来条件性地渲染一块内容。

示例

<!-- App.vue -->
<template>
  <p v-if="seen">Now you see me</p>
</template>

<script setup>
import { ref } from 'vue';

const seen = ref(true);
</script>

v-else
- 条件渲染的补充：与 v-if 结合使用，表示 v-if 的否定情况。

示例

<!-- App.vue -->
<template>
  <p v-if="seen">Now you see me</p>
  <p v-else>Now you don't</p>
</template>

<script setup>
import { ref } from 'vue';

const seen = ref(false);
</script>

v-show
- 条件显示：根据表达式的真假来控制元素的显示或隐藏（使用 CSS display 属性）。

示例

<!-- App.vue -->
<template>
  <p v-show="seen">Hello</p>
</template>

<script setup>
import { ref } from 'vue';

const seen = ref(false);
</script>

v-for
- 列表渲染：遍历一个数组或对象，并为每个元素渲染一个节点或块。

示例

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

<script setup>
import { ref } from 'vue';

const items = ref([
  { text: 'Item 1' },
  { text: 'Item 2' },
  { text: 'Item 3' }
]);
</script>

v-on
- 事件监听：绑定一个或多个事件监听器到 DOM 元素上。
- 简写形式：@event="handler"。

示例

<!-- App.vue -->
<template>
  <button @click="doSomething">Do something</button>
</template>

<script setup>
import { ref } from 'vue';

function doSomething() {
  alert('Button clicked!');
}
</script>

v-bind
- 动态绑定属性：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
- 简写形式：:attribute="expression"。

示例

<!-- App.vue -->
<template>
  <a :href="url">Link</a>
</template>

<script setup>
import { ref } from 'vue';

const url = ref('https://example.com');
</script>

v-text
- 文本插值：更新元素的文本内容。

示例

<!-- App.vue -->
<template>
  <p v-text="message"></p>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello Vue!');
</script>

v-html
- 插入 HTML：将字符串作为 HTML 插入到 DOM 中。

示例

<!-- App.vue -->
<template>
  <div v-html="rawHtml"></div>
</template>

<script setup>
import { ref } from 'vue';

const rawHtml = ref('<span>Hello Vue!</span>');
</script>

v-pre
- 跳过编译：告诉 Vue 不要编译包含该指令的元素或属性。

示例

<!-- App.vue -->
<template>
  <span v-pre>{{ message }}</span>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello Vue!');
</script>

v-once
- 一次性渲染：只渲染元素和组件一次。

示例

<!-- App.vue -->
<template>
  <p v-once>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello Vue!');
</script>

v-slot
- 作用域插槽：用于定义作用域插槽的内容。

示例

<!-- App.vue -->
<template>
  <div>
    <slot :item="item"></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const item = ref({ text: 'Item 1' });
</script>

<!-- Parent.vue -->
<template>
  <App v-slot="{ item }">
    <p>{{ item.text }}</p>
  </App>
</template>

<script setup>
import App from './App.vue';
</script>

总结

以上是 Vue 3 中常用的内置指令的示例代码。这些指令使得我们可以更简洁地编写 Vue 3 组件，并利用组合式 API 的优势来更好地组织和重用代码。通过这些示例，你可以看到如何使用 <script setup> 语法糖来定义响应式数据和方法，并在模板中使用 Vue 的内置指令来操作 DOM。