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，基本结构：

    


// JS或TS


/* 样式 */

4.例程

App.vue

    
        
你好啊
    


export default {
    name: "App",  // 组件名
    data() {
        return {};
    },
    methods: {},
};


.app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

启动项目：

npm run dev

打开：localhost:5173

3.一个简单的效果

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

Preson.vue:

    
    
        
        
姓名：{{ name }}
        
        
年龄：{{ age }}
        
        修改名字
        
        修改年龄
        
        查看联系方式
    


export default {
    name: "Preson",
    // 初始化组件数据
    data() {
        return {
            name: "张三", // 默认姓名
            age: 18, // 默认年龄
            tel: "13888888888" // 联系方式，敏感信息，需通过按钮点击事件查看
        }
    },
    methods: {
        // 显示联系方式的方法
        showTel() {
            alert(this.tel)
        },
        // 修改姓名的方法
        changeName() {
            this.name = "王五"
        },
        // 修改年龄的方法
        changeAge() {
            this.age +=1
        }
    }
}


/* 个人信息区域样式 */
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
/* 按钮样式 */
button {
    margin: 0 5px;
}