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>
