前端编程艺术（5）---Vue3(从零基础到项目开发)
在现代前端开发中，Vue.js 已成为一个非常流行的框架。Vue3 引入了一些新的特性，使得开发变得更加高效和灵活。本篇文章将带你从零基础学习 Vue3，并通过实例来逐步了解其核心概念。
1. Vue3 简介
Vue.js 是一个渐进式框架，意味着你可以从简单的渐进式使用它开始，逐渐加深对其全部特性的理解。Vue3 的新特性包括组合式 API、多个根节点、性能优化等。
2. 环境搭建
首先，我们需要搭建一个 Vue3 的开发环境。你可以使用 Vue CLI 工具快速创建一个新的 Vue3 项目。
npm install -g @vue/cli
vue create my-vue3-app
在创建过程中，选择 Vue 3 配置，然后进入项目目录：
cd my-vue3-app
npm run serve
打开浏览器并访问 http://localhost:8080，你应该可以看到 Vue 的欢迎页面。
3. 基本构建块
在 Vue 3 中，组件是构建用户界面的主要部分。下面是一个简单的组件示例：
<template>
<div>
<h1>{{ title }}</h1>
<button @click="increment">增加</button>
<p>当前计数: {{ count }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'Counter',
setup() {
const title = '计数器';
const count = ref(0);
const increment = () => {
count.value++;
};
return { title, count, increment };
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
在上面的代码中，我们使用了 Vue 的组合式 API。通过 ref 函数创建响应式数据 count，并通过 setup 函数将其暴露给模板。
4. 使用 Prop 和 Event
组件之间的通信主要依赖于 props 和事件。下面是父组件和子组件之间的简单交互示例。
父组件：
<template>
<div>
<Counter :initialCount="count" @countChanged="updateCount" />
<p>总计数: {{ count }}</p>
</div>
</template>
<script>
import Counter from './Counter.vue'; // 导入子组件
export default {
components: { Counter },
data() {
return {
count: 0
};
},
methods: {
updateCount(newCount) {
this.count = newCount;
}
}
};
</script>
子组件：
<template>
<div>
<button @click="increment">增加</button>
<p>当前计数: {{ localCount }}</p>
</div>
</template>
<script>
import { ref, watch } from 'vue';
export default {
name: 'Counter',
props: {
initialCount: {
type: Number,
default: 0
}
},
setup(props, { emit }) {
const localCount = ref(props.initialCount);
const increment = () => {
localCount.value++;
emit('countChanged', localCount.value);
};
// 监听 props 的变化, 更新 localCount
watch(() => props.initialCount, (newVal) => {
localCount.value = newVal;
});
return { localCount, increment };
}
};
</script>
在这个例子中，父组件将初始计数传递给子组件，子组件则通过事件将更新后的计数传回父组件。
5. 总结
通过上述示例，我们简单了解了 Vue3 的基础知识和组件之间的通信方式。Vue3 提供了更为强大的功能和简单的 API，使得开发变得更加高效。希望这篇文章能够对你入门 Vue3 开发有所帮助。在接下来的学习中，可以进一步探索路由、状态管理等高级主题，为你的项目增添更多功能。
