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

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

news 2025/8/8 15:54:06

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效果