引言
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
为什么学习Vue.js？
Vue.js 是一个非常流行的渐进式 JavaScript 框架，广泛应用于前端开发。它的主要优势在于：
- 易学：语法简洁，上手容易。
- 灵活：可以根据需求逐步采用框架的不同部分。
- 活跃的社区：拥有丰富的插件和工具生态。
- 高效：性能优化良好，适合构建大规模应用。
Vue 3 是 Vue.js 的最新主要版本，带来了许多新特性和改进，包括更好的性能、更小的包体积以及更灵活的 API 设计。
Vue.js 的发展历程
- 2014年：Vue 1.0 发布，提出了“数据驱动”的概念。
- 2016年：Vue 2.0 发布，引入了虚拟 DOM 和组件系统。Vue 2 已于 2023 年 12 月 31 日停止维护。
- 2020年：Vue 3.0 发布，带来了Composition API、响应式系统的改进等。
步骤指南(vscode为例)
-
安装 Node.js 和 npm
- 确保已安装 Node.js 和 npm。可以从 Node.js 官网 下载安装。
- 这里大家可以参考热门博主的安装教程Node.js下载安装
- npm安装-详细教程
-
安装 Vue CLI
- 打开终端，输入命令安装 Vue CLI：
npm install -g @vue/cli -
打开vscode,使用 Vue CLI 创建新项目：
vue create my-vue3-project
- 注意：如果出现这个报错，因为我们安装了Vue CLI后，PowerShell默认的执行策略阻止了运行这个脚本。
- 修改我们环境，选择第三个
4.安装项目依赖
- 进入项目目录，运行以下命令安装依赖：
cd my-vue3-project
npm run serve
- 可以看到，我们的vue项目已成功，点击本地链接，会在默认浏览器中打开
Vue 3 的核心概念
响应式数据
Vue 的核心是响应式数据系统。通过 Vue.reactive 或 ref，我们可以将普通数据转换为响应式数据，当数据变化时，视图会自动更新。
- 示例代码
<script setup>
import { ref, reactive } from 'vue'
const count = ref(0) // 使用 ref 创建一个响应式数据
const state = reactive({
name: 'Vue 3',
age: 20
}) // 使用 reactive 创建一个响应式对象
function increment() {
count.value++ // 修改 ref 数据需要通过 .value
state.age++ // 修改 reactive 数据直接修改属性
}
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<p>Name: {{ state.name }}</p>
<p>Age: {{ state.age }}</p>
<button @click="increment">Increment</button>
</div>
</template>
组件化开发
组件化是 Vue 的重要特性。它允许我们将复杂的 UI 拆分成多个可复用的组件。
<template>
<div class="my-component">
<h2>{{ title }}</h2>
<p>{{ content }}</p>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
required: true
},
content: {
type: String,
default: 'Default content'
}
})
</script>
<style scoped>
.my-component {
padding: 20px;
border: 1px solid #ddd;
margin: 10px;
}
</style>
使用组件：(App.vue)
<template>
<MyComponent title="Hello Vue 3" content="This is a Vue 3 component!" />
</template>
如图所示：
- ctrl+s保存，打开我们刚才运行的网页，来看效果
生命周期钩子
Vue 组件有一个生命周期，从创建、挂载、更新到销毁。我们可以在这些阶段执行特定的逻辑。
<script setup>
// 生命周期函数
import { onMounted, onUpdated, onUnmounted } from 'vue'
onMounted(() => {
console.log('组件挂载完成')
})
onUpdated(() => {
console.log('组件更新完成')
})
onUnmounted(() => {
console.log('组件销毁')
})
</script>
模板语法
Vue 的模板语法非常简洁，支持条件渲染、循环渲染等。
条件渲染：
<template>
<div>
<p v-if="isShow">这是一个条件渲染的内容</p>
<p v-else>默认显示的内容</p>
</div>
</template>
循环渲染：
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
组合式API
组合式 API 是 Vue 3 推荐的编程方式，它将组件的逻辑拆分成多个可复用的函数。
<script setup>
import { ref, onMounted } from 'vue'
const items = ref([])
function fetchItems() {
// 模拟 API 请求
fetch('https://api.example.com/items')
.then(response => response.json())
.then(data => {
items.value = data
})
}
onMounted(() => {
fetchItems()
})
</script>
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
响应式数据与组件化开发
数据劫持与响应式原理
Vue 3 使用 Proxy 来实现响应式数据。Proxy 可以拦截对对象的读取和修改操作，并在修改时触发视图更新。
创建和使用组件
组件可以是功能模块化开发的核心。在 Vue 3 中，组件之间可以通过 props 传递数据，通过事件进行通信。
父子组件通信：
<!-- 父组件 -->
<template>
<ChildComponent :message="parentMessage" @child-event="handleChildEvent" />
</template>
<script setup>
const parentMessage = 'Hello from parent!'
const handleChildEvent = (data) => {
console.log('Received from child:', data)
}
</script>
<!-- 子组件 -->
<template>
<button @click="emitEvent">Send Message to Parent</button>
</template>
<script setup>
const emit = defineEmits(['child-event'])
function emitEvent() {
emit('child-event', { message: 'Hello from child!' })
}
</script>
组件之间的通信
除了 props 和 $emit，我们还可以使用 Vuex 或 Pinia 进行状态管理。
Vue 3 的高级特性
路由的使用（Vue Router）
Vue Router 是 Vue 官方的路由库，支持SPA（单页应用）。
1. 安装 Vue Router
首先，你需要安装 Vue Router。你可以使用 npm来安装：
npm install vue-router@4
2. 创建路由配置文件
在 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件。这个文件将包含你的路由配置。
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
3. 创建视图组件
在 src 目录下创建一个 views 文件夹，并在其中创建 Home.vue 和 About.vue 文件。
src/views/Home.vue
<template>
<div class="home">
<h1>首页</h1>
<p>欢迎来到首页！</p>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
src/views/About.vue
<template>
<div class="about">
<h1>关于</h1>
<p>这是关于页面。</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
4. 在主文件中使用路由
在 src/main.js 文件中引入并使用路由。
src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
5. 在 App.vue 中添加导航链接
在 App.vue 文件中添加导航链接，以便用户可以在不同的路由之间切换。
src/App.vue
<template>
<div id="app">
<nav>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>
</nav>
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
text-decoration: none;
margin: 0 10px;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
实际项目开发中的应用
项目结构的搭建
一个典型的 Vue 3 项目结构：
src/
├── assets/ # 静态资源
├── components/ # 组件
├── store/ # Vuex 或 Pinia 状态管理
├── router/ # 路由配置
├── App.vue # 根组件
└── main.js # 入口文件
进阶学习与实践
学习Vue源码
阅读 Vue 源码可以从 reactivity 和 runtime 入手，理解响应式系统和虚拟 DOM 的实现。
参与开源项目
参与 Vue 或相关生态的开源项目，提升实战能力。
关注前端技术动态
保持对前端技术的关注，如 TypeScript、Web Components 等。
遇到的问题及解决方法
常见问题汇总
- 响应式数据不更新：确保使用
ref或reactive创建数据 - 组件通信问题：使用
props、事件或状态管理 - 路由跳转问题：检查路由配置和导航守卫
调试技巧与经验分享
- 使用
console.log或debugger跟踪变量 - 使用 Vue DevTools 检查组件状态
- 阅读官方文档和社区解决方案
学习资源推荐
官方文档
在线课程与教程
社区与论坛
学习总结
通过学习 Vue 3，我们掌握了响应式数据、组件化开发、路由和状态管理等核心概念，并在实际项目中得到了应用。
扫一扫
1037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
