Vue 3 基础

Vue 3 基础

1. 模板语法

在 Vue 中，模板是声明式的，它允许你将 DOM 元素和 Vue 实例的数据绑定在一起。

• 插值表达式：使用 {{ }} 将数据绑定到文本上。

<p>{{ message }}</p>

• 指令：Vue 提供了一些特殊的标记，称为指令，用于执行 DOM 操作。

<!-- 双向数据绑定 -->
<input v-model="message">

<!-- 事件绑定 -->
<button v-on:click="doSomething">Do Something</button>

<!-- 条件渲染 -->
<div v-if="seen">Now you see me</div>

2. 响应式数据绑定

Vue 3 使用 ref 和 reactive 来创建响应式数据。

• ref：用于基本类型的响应式数据。

import { ref } from 'vue';

const message = ref('Hello Vue 3!');

• reactive：用于对象或数组的响应式数据。

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

3. 事件处理

在 Vue 中，你可以使用 v-on 或 @ 符号来监听 DOM 事件，并在事件触发时执行方法。

<button @click="increment">Increment</button>

function increment() {
  count++;
}

4. 条件渲染

使用 v-if、v-else-if 和 v-else 来根据条件渲染元素。

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>

5. 列表渲染

使用 v-for 来基于源数据多次渲染元素。

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

6. 计算属性和侦听器

• 计算属性：使用 computed 创建依赖于响应式数据的计算值。

import { ref, computed } from 'vue';

const count = ref(0);

const doubledCount = computed(() => count.value * 2);

• 侦听器：使用 watch 来侦听响应式数据的变化，并在变化时执行操作。

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

7. 生命周期钩子

Vue 实例有一个生命周期，包括创建、编译、挂载、更新和销毁等阶段。你可以在组件中定义生命周期钩子来在这些阶段执行代码。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted.');
    });
  }
};

8. 组件通信

Vue 提供了多种组件通信的方式，包括：

• Props 和 Events：父子组件通信。
• Event Bus：非父子组件通信。
• Vuex：全局状态管理。

9. 组件

Vue 组件是可复用的代码块，用于构建复杂的 UI。

<!-- 定义一个名为 Welcome 的新组件 -->
<template>
  <p>Welcome, {{ name }}!</p>
</template>

<script setup>
// Props 需要在 setup() 中声明
const props = defineProps(['name']);
</script>

使用组件：

<Welcome name="Vue 3" />

10. 路由和状态管理

对于单页应用，Vue 3 通常与 Vue Router 和 Vuex 一起使用，分别用于路由管理和状态管理。