与禹老师学前端vue3学习汇总

24.5.15：

创建Vue3工程

1.确定自己电脑有没有nodejs环境，在cmd中输入node，如果出现Node.js的版本号说明已经有这个环境了，否则搜索Node.js安装

2.先在D盘创建一个文件夹Vue3_Study，然后在这个空文件夹中右键选择终端打开。

3.输入npm create vue@latest

4.输入项目名称 hello_vue3,然后下面的选项除了第一个选择是，其余的选择否

5.在VSCode中打开hello_vue3

编写App组件

1.index.html是项目的入口文件

2.加载index.html文件之后，解析<script type="module" src="/src/main.ts"></script>跳转到src="/src/main.ts"

3.Vue3通过createApp函数创建一个应用实例

编写Person.vue

1.在src文件夹中新建一个components文件夹用来存放自己实现的效果

2.在components文件夹中新建一个Person.vue文件

3.仿照App.vue写Person.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:'Person',//组件名

    data(){
        return {
            name:'张三',
            age:18,
            tel:'17999999999'
        }
    },

    methods:{
        showTel(){
            alert(this.tel)
        },
        changeName(){
            this.name='罗xx'
        },
        changeAge(){
            this.age+=1
        },
    }
}
</script>

<style scoped>
.person{
    background-color: aqua;
    box-shadow: 0 0 10px;
    padding: 20px;
}
button {/*修改按钮之间的间隔 */
    margin: 0 5px;
}
</style>

4.在App.vue中引入这个Person效果