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

Vue3进阶教程：1.初次了解vue

news 来源：原创 2025/6/5 17:35:41

1.初次了解vue

vue文件目录和各个文件在这里不做介绍

此课程对针对有点vue基础的同学，或者看过我上部分vue的教程

与之前我的Vue教程不同的是，写法和内容有区别

真正的了解Vue3

1.创建vue组件

1.npm create vue@latest
2.取名
3.TS要选上
4.其他先不选
5.npm i
...

2.编写App组件

1.删除src文件夹，创建一个新的src空文件夹，并在里面如下：

2.创建文件`main.ts`

// 导入createApp函数，用于创建Vue应用
import {createApp} from 'vue'// 导入App组件，作为应用的主组件
import App from './App.vue'// 创建并挂载应用程序实例
createApp(App).mount('#app')

3.创建`App.vue`，基本结构：

<template><!-- html -->
</template>
<script lang="ts">
// JS或TS
</script>
<style>
/* 样式 */
</style>

4.例程

App.vue

<template><div class="app"><h1>你好啊</h1></div>
</template><script lang="ts">
export default {name: "App",  // 组件名data() {return {};},methods: {},
};
</script><style>
.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>

启动项目：

npm run dev

打开：localhost:5173
在这里插入图片描述

3.一个简单的效果

src下创建文件夹和文件\components\Preson.vue

Preson.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 lang="ts">
export default {name: "Preson",// 初始化组件数据data() {return {name: "张三", // 默认姓名age: 18, // 默认年龄tel: "13888888888" // 联系方式，敏感信息，需通过按钮点击事件查看}},methods: {// 显示联系方式的方法showTel() {alert(this.tel)},// 修改姓名的方法changeName() {this.name = "王五"},// 修改年龄的方法changeAge() {this.age +=1}}
}
</script><style scoped>
/* 个人信息区域样式 */
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
/* 按钮样式 */
button {margin: 0 5px;
}
</style>

在这里插入图片描述