VUE3和VUE2
上一篇文章中，我们对VUE3进行了一个初步的认识了解，本篇文章我们来进一步学习一下，顺便看一下VUE2的写法VUE3是否能做到兼容😀。
一、新建组件
我们在components中新建一个组件，名称为Peron，后缀为vue。
二、编写组件
我们先把基础的结构写出来
- html
- 交互脚本
- 样式美化
<template>
<div>
</div>
</template>
<script lang="ts"> //注意要添加ts
export 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>
五、运行调试
- 我们可以看到，自定义控件套用在了原本的你好的控件里面。
- 修改名字：按钮触发修改事件。
- 修改年龄：按钮触发名字+1。
- 查看联系方式：显示电话号码。
六、插件工具
- 我们在上图中，看到了F12调试中，有VUE 的插件，这个插件是免费的，下载好配置一下就可以了。
- 在百度搜索极简插件，然后搜索VUE，下载到桌面解压，会看到这个文件。
- 然后在浏览器，找到插件，管理插件，打开开发者模式，把这个拖拽进去就可以了，再次F12的时候就可以查看了。
