vue3零基础入门学习

vue3 2025-03-28 17:38 34 0

以下是针对零基础学习者的 Vue 3 入门指南，涵盖环境搭建、核心概念和实战练习，助你快速上手：

一、环境准备：5分钟快速搭建

安装 Node.js

官网下载 Node.js（LTS版本），安装后验证：

bashnode -v  # 显示版本号即成功npm -v

创建 Vue 项目

使用 Vite（推荐超快构建工具）：
```
npm create vue@latest
```
按提示选择配置（新手选默认即可），完成后：
```
cd 项目名
```
```
npm instal
```
```
npm run dev
```
打开 http://localhost:5173 看到欢迎页即成功！

开发工具

编辑器：VS Code（安装插件 Volar 和 Vue Language Features）
浏览器：安装 Vue Devtools 调试工具

二、核心概念：从零到组件化

1. 模板语法：数据绑定

vue<template>  <div>
    <h1>{{ message }}</h1>
    <button @click="changeText">点击修改</button>
  </div>
</template>

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

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

const changeText = () => {
  message.value = '你学会了第一个交互！'
}
</script>

重点：
- {{ }} 插值表达式
- @click 事件绑定
- ref 定义响应式数据

2. 条件与循环

vue<template>  <div v-if="showMessage">显示这段文字</div>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

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

const showMessage = ref(true)
const items = ref([
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' }
])
</script>

指令解析：
- v-if / v-show：控制显示（v-if 销毁元素，v-show 切换 CSS）
- v-for：循环渲染，必须加 :key

3. 组件通信

父传子（Props）：

vue<!-- 父组件 --><ChildComponent :title="parentTitle" />

<!-- 子组件 -->
<script setup>
defineProps({
  title: String
})
</script>

子传父（自定义事件）：

vue<!-- 子组件 --><button @click="$emit('update', data)">传递数据</button>

<!-- 父组件 -->
<ChildComponent @update="handleUpdate" />

三、实战练习：TodoList 小项目

vue<template>  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入任务">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo.text }}
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

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

const newTodo = ref('')
const todos = ref([])

const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({ text: newTodo.value })
    newTodo.value = ''
  }
}

const removeTodo = (index) => {
  todos.value.splice(index, 1)
}
</script>