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

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

news 2025/9/11 9:28:58

其它篇章：
1.【Vue3】01-创建Vue3工程
2.【Vue3】02-Vue3工程目录分析
3.【Vue3】03-编写app组件——src
合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目

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

一、准备工作
- 1. 创建项目
- 2. 创建备份
二、实现一个简单效果
- 流程分析
- - 1.在 src 下创建 components
  - 2. 在 components 下新建一个 Person.vue
  - 3. 编写 Person.vue 内容
  - - 代码
    - 解析
  - 4. 在根组件App.vue中引入Person.vue
  - 5. 在终端启动后在浏览器访问服务器

一、准备工作

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/>。
图示：