当前位置：首页 > news >正文

vue3 新手学习入门

news 2025/8/3 18:18:29

Vue 3 是目前非常流行的前端框架，对于新手来说，学习它可以从基础概念开始，逐步掌握核心功能。以下是一个适合新手的学习路径和关键知识点：

一、准备工作

环境搭建
- 安装 Node.js（建议 v16+），它包含 npm 包管理器
- 推荐使用 Vue 官方的脚手架工具 create-vue 创建项目：
  bash
```
npm create vue@latest
```
- 按照提示选择需要的功能（如 TypeScript、Vue Router、Pinia 等）
开发工具
- 推荐 VS Code + Volar 插件（Vue 3 官方推荐，替代 Vetur）

二、核心概念（基础）

1. Vue 实例与组件

Vue 3 中通过 createApp 创建应用实例：

javascript

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

组件是 Vue 的基本单位，一个 .vue 文件就是一个组件，包含 3 部分：

vue

<template> <!-- 模板：HTML 结构 --><h1>{{ message }}</h1>
</template><script> <!-- 逻辑：JavaScript 代码 -->export default {data() {return { message: 'Hello Vue!' }}}
</script><style> <!-- 样式：CSS -->h1 { color: red; }
</style>

2. 模板语法

插值：使用 {{ }} 显示数据
指令：以 v- 开头的特殊属性，如：
- v-bind:属性="值"（简写 :属性）：绑定 HTML 属性
- v-if/v-else：条件渲染
- v-for：列表渲染（需加 :key）
- v-on:事件="方法"（简写 @事件）：绑定事件

vue

<template><img :src="imgUrl" :alt="message"><p v-if="showMessage">{{ message }}</p><ul><li v-for="item in list" :key="item.id">{{ item.name }}</li></ul><button @click="handleClick">点击</button>
</template>

3. 响应式数据

Vue 3 中使用 ref（基本类型）和 reactive（对象 / 数组）创建响应式数据：

javascript

<script setup>
import { ref, reactive } from 'vue'// 基本类型
const count = ref(0)
count.value = 1 // 修改值需用 .value// 对象/数组
const user = reactive({ name: 'Vue', age: 3 })
user.age = 4 // 直接修改
</script>

<script setup> 是 Vue 3.2+ 推荐的语法，简化组件代码。

三、核心概念（进阶）

1. 组件通信

父传子：通过 props

vue

<!-- 父组件 -->
<ChildComponent :msg="parentMsg" /><!-- 子组件 -->
<script setup>
const props = defineProps({msg: String
})
console.log(props.msg)
</script>

子传父：通过 emit

vue

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['childEvent'])
const handleClick = () => {emit('childEvent', '数据')
}
</script><!-- 父组件 -->
<ChildComponent @childEvent="handleChildEvent" />

2. 生命周期钩子

常用钩子（在 <script setup> 中使用）：

javascript

import { onMounted, onUpdated, onUnmounted } from 'vue'onMounted(() => {console.log('组件挂载完成')
})
onUpdated(() => {console.log('组件更新完成')
})
onUnmounted(() => {console.log('组件卸载')
})

3. 状态管理

小型项目：使用 reactive + provide/inject

中大型项目：使用官方推荐的 Pinia（Vuex 的替代者）

javascript

// store/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: {increment() { this.count++ }}
})