【Vue3】04-编写vue实现一个简单效果

原创已于 2025-09-13 11:08:17 修改 · 8.9k 阅读

112

75 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Vue3-学习笔记

于 2025-09-10 09:30:00 首次发布

该文章已生成可运行项目，

其它篇章：
1.【Vue3】01-创建Vue3工程
2.【Vue3】02-Vue3工程目录分析
3.【Vue3】03-编写app组件——src
4.【Vue3】04-编写vue实现一个简单效果
5.【Vue3】05-Options API和Composition API的区别
6.【Vue3】06-利用setup编写vue（1）
7.【Vue3】07-利用setup编写vue（2）-setup的语法糖
合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目
2.【Vue3】编写vue实现一个简单效果，并使用setup糖简化代码

一、准备工作

1. 创建项目

打开cmd，输入 npm create vue@latest
具体参考：【Vue3】01-创建Vue3工程

2. 创建备份

问题：学习过程中，为避免冲突可能需要不断创建新项目，比较麻烦，有什么解决办法吗？
方法：可以在项目中创建一个名为“备份”的文件夹。
作用：将写好的项目的src备份在该文件夹中，以随时复制使用。

二、实现一个简单效果

流程分析

1.在 src 下创建 components

参考【Vue3】03-编写app组件——src，写了一些基础的内容，比如App.vue、main.ts等必要的文件，新建的工程会自动写好这些内容，对后面要学的内容影响不大，可以跳过。
操作：在src下创建components文件夹。
作用：这个文件夹存放的是实现各种功能的vue（与App.vue这种根组件不同）。
图示：

2. 在 components 下新建一个 Person.vue

操作：右键点击src，在 src/components 下新建 Person.vue。
图示：

3. 编写 Person.vue 内容

代码

因为vue3兼容vue2，这里先尝试使用vue2的语法写代码。

操作：在Person.vue中输入以下内容。(style标签里的.person{}是类选择器）

<template>
    <div class="person">
        <h1>姓名：{{name}}</h1>
        <h1>年龄：{{age}}</h1>
        <button @click="show">查看生日</button>
    </div>
</template>

<script lang="ts">
    export default{
        name:"person",
        data() {
            return{
                name:'zhangsan',
                age:20,
                birth:'2005.1.1'

            }
            
        },
        methods:{
            show(){
                alert(this.birth)
            }
        }
    }
</script>
<style>
    .person {
        background-color: rgb(200, 255, 0);
        box-shadow: 0 0 10px;
        border-radius: 20px;
        padding: 20px;
    }
</style>

解析

<template>标签：
1. 引用data()中的数据：比如，{{name}}。
2. 设置按钮：<button @click="show"></button>，show飘红了，因为还没设置，后续在<script>的export中设置。
<script>标签：
1. script标签里的name:'person'：这个person就是组件的名字。
2. 想要展示一些人的信息：写一个data函数：data(){}，里面有个return{}，在这里面写上数据，这些数据后续可在<template>里使用。（具体解释可参考vue2内容）
3. 在export中写个方法，为template标签里的按钮提供方法：
```
methods:{
            show(){
                alert(this.birth)
            }
        }
```
<style>标签：
.person上面有一个1 reference：这个的意思是.person这个选择器被找到了一个匹配，比如上面的<div class="person"></div>。

4. 在根组件App.vue中引入Person.vue

操作：
1. 在script标签内引入Person.vue，添加以下内容：
```
import Person from './components/Person.vue'
```
2. 注册组件：在export中添加Person，最终代码入下：
```
export default{
    name:"app",
    components:{Person}
}
```
3. 注册好后，就可以在App.vue中使用Person了，在<template>中加入<person/>。
图示：

5. 在终端启动后在浏览器访问服务器

操作：在终端输入npm run dev，后再浏览器访问服务器。
图示：
分析：这里可以看到person组件嵌套在app组件中，点击查看生日按钮，也能弹出窗口。

其它篇章：
1.【Vue3】01-创建Vue3工程
2.【Vue3】02-Vue3工程目录分析
3.【Vue3】03-编写app组件——src
4.【Vue3】04-编写vue实现一个简单效果
5.【Vue3】05-Options API和Composition API的区别
6.【Vue3】06-利用setup编写vue（1）
7.【Vue3】07-利用setup编写vue（2）-setup的语法糖
合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目
2.【Vue3】编写vue实现一个简单效果，并使用setup糖简化代码