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

VUE3和VUE2

news 2025/8/8 12:31:42

VUE3和VUE2

上一篇文章中，我们对VUE3进行了一个初步的认识了解，本篇文章我们来进一步学习一下，顺便看一下VUE2的写法VUE3是否能做到兼容😀。

一、新建组件

我们在components中新建一个组件，名称为Peron，后缀为vue。

在这里插入图片描述

二、编写组件

我们先把基础的结构写出来

html
交互脚本
样式美化

<template><div> </div>
</template><script lang="ts"> //注意要添加tsexport default{name:''}
</script><style></style>

三、添加内容

data和methods都是VUE2的写法，但是并没有报错

<template><div class="person"><h1>姓名：{{ name }}</h1><h2>年龄：{{ age }}</h2><!-- <h3>电话：{{ tel }}</h3> --><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:23,tel:'1300000000'}},methods:{changeName(){this.name='luomanyinghuadeyang' },           changeAge(){this.age+=1},showTel(){alert(this.tel)}}}
</script><style>.person{background-color: #b3f4f7;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button{margin: 0 5px;}
</style>

四、注册控件

因为程序运行打开的主页面是App.vue，所以要在App.vue中引入次控件并注册。

<template><!--html  结构--><div class="app"><h1>你好</h1><Person/></div>
</template><script lang="ts">//脚本 交互import Person from './components/Person.vue' //引入组件export default{//暴露 默认暴露name:'APP', //组件的名字components:{Person} //注册组件}
</script><style>/*样式 美化 */.app{background-color: #d6f5fb;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>