ue全家桶进阶之路30：Vue3定义组件和常用指令

要定义 Vue 3 组件，你可以使用 Vue 3 提供的 defineComponent 函数。

例如，以下是一个简单的 Vue 3 组件定义：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    message: String
  },
  setup(props) {
    return {
      // 这里返回组件的数据和方法
      showMessage() {
        alert(props.message);
      }
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="showMessage">显示消息</button>
    </div>
  `
});

在这个例子中，我们使用 defineComponent 函数来定义一个名为 MyComponent 的组件。它有一个 message 属性，用来显示一条消息。setup 函数中返回了一个 showMessage 方法，用来弹出一个包含 message 属性值的提示框。最后，我们在组件的 template 中使用了 message 和 showMessage。

当你定义完组件后，你可以在其他地方引入和使用它：

import MyComponent from './MyComponent.vue';

const app = createApp();

app.component('my-component', MyComponent);

app.mount('#app');

在 Vue 3 中，常用的指令和 Vue 2 中基本相同，包括 v-if、v-for、v-bind、v-on 等。除此之外，Vue 3 还引入了一些新的指令，包括：

1. v-model：用于双向绑定表单元素和组件，用法和 Vue 2 中的 v-model 相同。

2. v-show：用于根据表达式的值控制元素的显示和隐藏，与 Vue 2 中的 v-show 相同。

3. v-html：用于将字符串作为 HTML 解析并插入到元素中，与 Vue 2 中的 v-html 相同。

4. v-once：用于只渲染元素和组件一次，之后的更新将不再影响该元素和组件，与 Vue 2 中的 v-once 相同。

5. v-bind 的简写 :：用于动态绑定元素和组件的属性和样式，用法和 Vue 2 中的 v-bind 相同，但在 Vue 3 中可以使用简写语法 :，比如 :class、:style 等。

6. v-for 的 key 属性：用于为 v-for 创建的每个元素添加唯一标识符，可以提高列表渲染的效率，避免重复渲染相同的元素。

示例代码：

<template>
  <div>
    <!-- 双向绑定 -->
    <input v-model="message" />

    <!-- 显示和隐藏 -->
    <div v-show="isShow">显示内容</div>

    <!-- HTML 解析 -->
    <div v-html="html"></div>

    <!-- 只渲染一次 -->
    <div v-once>{{ onceMessage }}</div>

    <!-- 动态绑定属性和样式 -->
    <div :class="{'active': isActive}" :style="{color: fontColor}">动态绑定属性和样式</div>

    <!-- 列表渲染 -->
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      isShow: true,
      html: '<p>HTML 解析</p>',
      onceMessage: '只渲染一次',
      isActive: true,
      fontColor: 'red',
      list: [
        { id: 1, name: 'item1' },
        { id: 2, name: 'item2' },
        { id: 3, name: 'item3' },
      ],
    };
  },
};
</script>

上面的代码中，我们使用了 Vue 3 中常用的指令，包括 v-model、v-show、v-html、v-once、v-bind 和 v-for，这些指令可以帮助我们快速构建交互式的页面和组件。