Vue3 学习教程，从入门到精通，Vue3 组件实例语法知识点(27）

Vue3 组件实例语法知识点

1. 创建Vue应用

• 使用 createApp 创建应用实例

  import { createApp } from 'vue';
  import App from './App.vue';
  
  const app = createApp(App);
  app.mount('#app');
  

  • createApp 用于创建一个新的Vue应用实例。
  • mount 方法将应用挂载到指定的DOM元素上。

2. 组件基础

• 单文件组件（Single File Components, SFC）

  • 使用 .vue 文件定义组件，包含 <template>, <script>, 和 <style> 三个部分。

• 模板语法

  • 使用HTML模板语法编写组件的结构。
  • 支持插值表达式 {{ }}，指令（如 v-bind, v-if, v-for 等）。

3. 数据绑定

• 数据属性（Data Properties）

  • 在组件的 data 选项中定义响应式数据。
  • Vue3 使用 setup 函数和 reactive 或 ref 来管理响应式数据。

• 属性绑定（v-bind）

  • 使用 v-bind 指令或简写 : 来绑定数据到HTML属性。

  <img :src="imageUrl" alt="Image">
  

4. 事件处理

• 事件监听（v-on）

  • 使用 v-on 指令或简写 @ 来监听DOM事件。

  <button @click="handleClick">点击我</button>
  

• 事件修饰符

  • 如 .prevent（阻止默认行为）, .stop（阻止事件冒泡）等。

  <form @submit.prevent="handleSubmit">...</form>
  

5. 条件渲染

• v-if, v-else-if, v-else

  • 根据条件渲染元素。

  <div v-if="isLoggedIn">欢迎回来！</div>
  <div v-else>请登录。</div>
  

• v-show

  • 通过切换 display CSS属性来显示或隐藏元素。

  <div v-show="isVisible">可见内容</div>
  

6. 列表渲染

• v-for

  • 用于渲染列表数据。

  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  

  • :key 属性用于帮助Vue跟踪每个节点，提高渲染性能。

7. 计算属性（Computed Properties）

• 定义计算属性

  • 使用 computed 选项定义基于其他数据属性的计算值。

  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
  

8. 侦听器（Watchers）

• 定义侦听器

  • 使用 watch 选项监听数据属性的变化并作出响应。

  watch: {
    count(newVal, oldVal) {
      console.log(`count从${oldVal}变为${newVal}`);
    }
  }
  

9. 组件通信

• Props

  • 父组件向子组件传递数据。

  <ChildComponent :message="parentMessage" />
  

• 自定义事件

  • 子组件向父组件发送消息。

  <!-- 父组件 -->
  <ChildComponent @childEvent="handleChildEvent" />
  
  <!-- 子组件 -->
  this.$emit('childEvent', payload);
  

• Provide/Inject

  • 用于祖先组件向后代组件提供数据。

  // 祖先组件
  provide('key', value);
  
  // 后代组件
  const value = inject('key');
  

10. 生命周期钩子

• 常用的生命周期钩子
  • created(): 组件实例被创建后调用。
  • mounted(): 组件挂载到DOM后调用。
  • updated(): 组件更新后调用。
  • unmounted(): 组件卸载后调用。

11. 组合式 API（Composition API）

• setup 函数

  • 用于定义组件的响应式数据和函数。

  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  }
  

• 响应式 API

  • ref: 创建一个响应式的数据引用。
  • reactive: 创建一个响应式的对象。
  • computed: 创建计算属性。
  • watch: 创建侦听器。

案例代码：简单的任务列表应用

下面是一个使用Vue3组合式API实现的简单任务列表应用，展示了Vue3组件实例的语法知识点。代码中包含详细的注释，帮助你理解每个部分的功能。

<template>
  <div class="app-container">
    <h1>Vue3 任务列表</h1>
    <div class="input-section">
      <input
        v-model="newTask"
        @keyup.enter="addTask"
        placeholder="输入新的任务"
      />
      <button @click="addTask">添加</button>
    </div>
    <ul class="task-list">
      <li v-for="(task, index) in tasks" :key="task.id" :class="{ completed: task.completed }">
        <input type="checkbox" v-model="task.completed" />
        <span>{{ task.text }}</span>
        <button @click="deleteTask(index)">删除</button>
      </li>
    </ul>
    <p>总共有 {{ tasks.length }} 个任务，已完成 {{ completedCount }} 个。</p>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';

export default {
  name: 'TaskList',
  setup() {
    // 定义响应式数据
    const newTask = ref('');
    const tasks = ref([]);

    // 计算属性：计算已完成的任务数
    const completedCount = computed(() => {
      return tasks.value.filter(task => task.completed).length;
    });

    // 方法：添加任务
    const addTask = () => {
      const taskText = newTask.value.trim();
      if (taskText === '') return;
      tasks.value.push({
        id: Date.now(),
        text: taskText,
        completed: false,
      });
      newTask.value = '';
      // 保存到本地存储
      saveTasks();
    };

    // 方法：删除任务
    const deleteTask = (index) => {
      tasks.value.splice(index, 1);
      // 保存到本地存储
      saveTasks();
    };

    // 方法：保存任务到本地存储
    const saveTasks = () => {
      localStorage.setItem('tasks', JSON.stringify(tasks.value));
    };

    // 方法：加载任务从本地存储
    const loadTasks = () => {
      const storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
      tasks.value = storedTasks;
    };

    // 生命周期钩子：组件挂载后加载任务
    onMounted(() => {
      loadTasks();
    });

    // 生命周期钩子：组件卸载前清除监听（如果有）
    onUnmounted(() => {
      // 例如，移除事件监听器
    });

    // 侦听器：监听tasks变化，保存到本地存储
    watch(tasks, () => {
      saveTasks();
    }, { deep: true });

    return {
      newTask,
      tasks,
      completedCount,
      addTask,
      deleteTask,
    };
  },
};
</script>

<style scoped>
.app-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

.input-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
}

button {
  padding: 10px;
  margin-left: 10px;
  font-size: 16px;
  cursor: pointer;
}

.task-list {
  list-style: none;
  padding: 0;
  text-align: left;
}

.task-list li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.task-list li.completed span {
  text-decoration: line-through;
  color: #888;
}

.task-list li button {
  margin-left: auto;
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
}

.task-list li button:hover {
  background-color: #ff1a1a;
}
</style>

代码详解

1. 模板部分 (<template>)

   • 输入区域: 使用 v-model 实现双向数据绑定，将输入框的值绑定到 newTask。
   • 添加按钮: 点击按钮调用 addTask 方法。
   • 任务列表: 使用 v-for 指令遍历 tasks 数组，渲染每个任务项。
     • 每个任务项包含一个复选框（使用 v-model 绑定任务的 completed 状态），任务文本和一个删除按钮。
   • 统计信息: 显示总任务数和已完成的任务数。

2. 脚本部分 (<script>)

   • 导入 Vue3 响应式 API: ref, computed, watch, onMounted, onUnmounted。
   • 定义响应式数据:
     • newTask: 存储输入框的当前值。
     • tasks: 存储任务列表。
   • 计算属性:
     • completedCount: 计算已完成的任务数。
   • 方法:
     • addTask: 添加新任务到 tasks 数组，并清空输入框。
     • deleteTask: 删除指定的任务。
     • saveTasks: 将任务列表保存到本地存储。
     • loadTasks: 从本地存储加载任务列表。
   • 生命周期钩子:
     • onMounted: 组件挂载后调用 loadTasks 方法加载任务。
     • onUnmounted: 组件卸载前可以清除监听器（如果有）。
   • 侦听器:
     • 监听 tasks 的变化，并调用 saveTasks 方法保存到本地存储。

3. 样式部分 (<style scoped>)

   • 样式定义: 使用 scoped 属性确保样式只作用于当前组件。
   • 布局: 使用Flexbox进行布局，实现输入区域和任务列表的排列。
   • 样式效果: 完成的任务文本有删除线，颜色变为灰色。

运行步骤

1. 创建项目

   • 使用 Vue CLI 创建新的Vue3项目：

     npm install -g @vue/cli
     vue create task-list-app
     

     • 在提示中选择Vue3配置。

2. 添加组件

   • 在 src/components 目录下创建 TaskList.vue 文件，并粘贴上述代码。

   • 修改 src/App.vue 以使用 TaskList 组件：

     <template>
       <div id="app">
         <TaskList />
       </div>
     </template>
     
     <script>
     import TaskList from './components/TaskList.vue';
     
     export default {
       name: 'App',
       components: {
         TaskList,
       },
     };
     </script>
     
     <style>
     /* 全局样式（可选） */
     </style>
     

3. 运行项目

   • 启动开发服务器：

     npm run serve
     

   • 打开浏览器访问 http://localhost:8080，即可看到任务列表应用。

功能说明

• 添加任务: 在输入框中输入任务文本，按回车或点击“添加”按钮将任务添加到列表中。
• 删除任务: 点击任务项右侧的“删除”按钮可以删除对应的任务。
• 标记完成: 点击复选框可以标记任务为完成，完成的任务文本会有删除线。
• 本地存储: 应用使用本地存储保存任务列表，刷新页面后任务依然存在。

通过以上内容，你将能够全面了解Vue3组件实例的语法，并结合案例代码进行实践学习。希望这对你学习Vue3有所帮助！如果有任何疑问，欢迎随时提问。