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

news2025/5/29 8:19: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>

在这里插入图片描述