Vue前端篇——第一个VUE3组件创建三部曲
原创
前言
在探索Vue3的前端世界时，上一篇简单介绍Vue3的目录结构，为了深入了解其核心组件的创建与应用。本文将通过实战的方式，带领大家一步步构建起第一个Vue3组件，并深入解析其背后的原理。首先先介绍重点三步骤：引入createApp用于创建应用-》引入App根组件-》使用createApp创建组件。
一、创建Vue应用
在Vue3中，创建一个新的应用实例非常简单。首先，我们需要引入createApp函数，这个函数负责创建一个新的Vue应用实例。接着，我们引入根组件App.vue，它是整个应用的入口点。最后，我们使用createApp(App)创建应用实例，并通过mount('#app')将其挂载到页面上的某个元素上。
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')二、构建根组件
根组件App.vue是Vue应用的核心，它包含了应用的布局和逻辑。在这个组件中，我们可以看到Vue3的三种结构：<template>、<script>和<style>。
<template>部分定义了组件的HTML结构，这里我们简单地包含了一个标题和一个引入的Person_Vue3子组件。
<!-- App.vue -->
<template>
<div class="app">
<h1>你好啊!</h1>
<Person_Vue3/>
</div>
</template><script>部分则定义了组件的JavaScript逻辑。在这里，我们导入了Person_Vue3组件，并将其注册为局部组件。同时，我们还设置了组件的name属性，这是Vue组件的一个重要属性，用于标识组件。
// App.vue
<script lang="ts">
import Person_Vue3 from './components/Person_Vue3.vue'
export default {
name: 'App',
components: { Person_Vue3 }
}
</script><style>部分则定义了组件的样式。在这里，我们简单地设置了.app类的背景颜色、阴影和圆角。
/* App.vue */
<style>
.app {
background-color: #fff;
box-shadow: 0 0 10px;
border-radius: 10px;
}
</style>三、创建子组件
接下来，我们来创建Person_Vue3子组件。这个组件将展示一个人的姓名、年龄，并提供修改这些信息的功能。
在Person_Vue3组件中，我们同样可以看到<template>、<script>和<style>三部分。<template>部分定义了组件的HTML结构，包括姓名、年龄的显示以及三个按钮。
<!-- Person_Vue3.vue -->
<template>
<div class="person">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看联系方式</button>
</div>
</template>在<script>部分，我们使用了Vue3的Composition API。通过setup()函数，我们可以将数据和方法统一定义在一起，并在最后一起返回给模板使用。需要注意的是，在setup()函数中，this是undefined，因为Vue3正在弱化this的使用。
// Person_Vue3.vue
<script lang="ts">
export default {
name: 'Person_Vue3',
setup() {
// 定义数据和方法
let name = '张三11'
let age = 18
let tel = '13888888888'
// ------定义方法，需要注意的是，在vue3中，以下方法数据非响应式了，
function changeName() {
name = 'zhang-san' //注意：这样修改name，页面是没有变化的
console.log(name) //name确实改了，但name不是响应式的
}
function changeAge() {
age += 1 //注意：这样修改age，页面是没有变化的
console.log(age) //age确实改了，但age不是响应式的
}
function showTel() {
alert(tel)
}
// 返回数据和方法供模板使用
return { name, age, tel, changeName, changeAge, showTel }
}
}
</script>最后，在<style>部分，设置了.person类的样式，使得组件具有更好的视觉效果，运行程序效果如下：
四、总结
通过以上步骤，成功地创建了第一个Vue3组件。在这个过程中，深入了解了Vue3的组件化开发流程，掌握了Composition API的使用方法，并体验了Vue3的新特性。
Vue3作为前端领域的一颗新星，其强大的性能和灵活的API设计为我们提供了无限的可能。未来，我们将继续探索Vue3的更多奥秘，为前端开发带来更多的创新和灵感。
本人初学前端，欢迎大家评论区指导。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
