vue3学习笔记

Vue3学习笔记

启动一个vue3项目

下载node.js

**目的：**为了直接使用 node 和 npm 命令

需要安装node.js，当你看到node.exe 就代表安装成功了。

需要配置两个环境变量

1. 打开系统环境变量设置

• 右键点击“此电脑”或“我的电脑”，选择“属性”。
• 在弹出的窗口中，点击“高级系统设置”。
• 在“系统属性”窗口中，点击“环境变量”按钮。

2. 添加环境变量

• 在“环境变量”窗口中，找到“系统变量”部分。
• 点击“新建”按钮，添加两个环境变量：
  • 变量名：NODE_PATH
    变量值：D:\work\node
  • 变量名：NPM_PATH
    变量值：D:\work\node\node_modules\npm\bin

检查是否安装配置成功，出现版本号则代表安装配置成功

C:\Users\54411>npm -v
10.9.2

C:\Users\54411>node -v
v22.16.0

可以通过 Vue CLI 或 Vite去启动一个vue项目

通过vite去启动项目

建一个空文件夹

在该文件夹下打开cmd窗口

使用 Vite 创建项目

npm create vite@latest my-vue-project --template vue

这里需要你去选择创建vue的类型

进入项目目录并安装依赖

cd my-vue-project
npm install

启动项目

npm run serve

这将启动开发服务器，通常会在浏览器中打开 http://localhost:8080，你可以在浏览器中看到项目运行的结果。

Vue 3 语法笔记

1. 基本结构

Vue 3 的组件文件通常由三个部分组成：

• <template>：定义组件的 HTML 结构。
• <script> 或 <script setup>：定义组件的逻辑。
• <style>：定义组件的样式。

示例

<template>
  <div>
    <h1>{
  
  { title }}</h1>
    <p>{
  
  { message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

const title = 'Hello Vue 3!';
const message = ref('This is a message.');

function changeMessage() {
  message.value = 'Message updated!';
}
</script>

<style>
div {
  text-align: center;
  margin-top: 50px;
}
</style>

2. 响应式变量

在 Vue 3 中，响应式变量是通过 ref 或 reactive 创建的。

使用 ref

ref 用于创建单个响应式变量。

import {
   
    ref } from 'vue';

const count = ref(0); // 定义一个响应式变量
count.value++; // 修改响应式变量的值

使用 reactive

reactive 用于创建一个响应式的对象。

import {
   
    reactive } from 'vue';

const state = reactive({
   
   
  name: 'John',
  age: 30,
});

state.name = 'Jane'; // 修改响应式对象的属性

3. 方法

方法是普通的 JavaScript 函数，用于在组件中处理逻辑。

function increment() {
   
   
  count.value++;
}

function decrement() {
   
   
  count.value--;
}

4. 模板语法

模板中可以使用插值、指令等语法来绑定数据和事件。

插值

使用 { { }} 将变量绑定到模板中。

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

指令

• v-bind：绑定数据到属性。
• v-on：绑定事件。
• v-if、v-else-if、v-else：条件渲染。
• v-for：循环渲染。

<div>
  <p v-bind:title="title">{
  
  { message }}</p>
  <button v-on:click="increment">Increment</button>
  <div v-if="count > 0">Count is greater than 0</div>
  <div v-else>Count is 0</div>
  <ul>
    <li v-for="(item, index) in items" :key="index">{
  
  { item }}</li>
  </ul>
</div>

5. <script setup>

在 `<script setup>` 中，变量和方法会自动暴露到模板中，无需手动返回。

## 6. 生命周期钩子

Vue 3 提供了生命周期钩子，用于在组件的不同阶段执行逻辑。

### 示例



```vue
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const count = ref(0);

onMounted(() => {
  console.log('Component mounted');
});

onUnmounted(() => {
  console.log('Component unmounted');
});
</script>

7. 自定义组件

可以通过 defineComponent 定义自定义组件。

import {
   
    defineComponent, ref } from 'vue';

export default defineComponent({
   
   
  name: 'MyComponent',
  setup(