VUE3和VUE2

上一篇文章中，我們對VUE3進行了一個初步的認識了解，本篇文章我們來進一步學(xué)習(xí)一下，順便看一下VUE2的寫法VUE3是否能做到兼容😀。

一、新建組件

我們在components中新建一個組件，名稱為Peron，后綴為vue。

二、編寫組件

我們先把基礎(chǔ)的結(jié)構(gòu)寫出來

• html
• 交互腳本
• 樣式美化

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

三、添加內(nèi)容

• 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">查看聯(lián)系方式</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  結(jié)構(gòu)--><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>

五、運行調(diào)試

• 我們可以看到，自定義控件套用在了原本的你好的控件里面。
• 修改名字：按鈕觸發(fā)修改事件。
• 修改年齡：按鈕觸發(fā)名字+1。
• 查看聯(lián)系方式：顯示電話號碼。

六、插件工具

• 我們在上圖中，看到了F12調(diào)試中，有VUE 的插件，這個插件是免費的，下載好配置一下就可以了。

• 在百度搜索極簡插件，然后搜索VUE，下載到桌面解壓，會看到這個文件。

• 然后在瀏覽器，找到插件，管理插件，打開開發(fā)者模式，把這個拖拽進去就可以了，再次F12的時候就可以查看了。