詳解Vue 單文件組件的三種寫法
更新時(shí)間：2020年02月19日 15:58:36 作者：Oliver
這篇文章主要介紹了詳解Vue 單文件組件的三種寫法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
JS構(gòu)造選項(xiàng)寫法
export defaul { data, methods, ...}
JS class寫法
@Component
export default class Cpn extends Vue{
counter = 0 //data
add(){ //methods
this.counter += 1
}
}
TS class寫法
@Component
export default class Cpn extends Vue{
@Prop(Number) sum : number | undefined;
counter = 0; //data
add(){ //methods
this.counter += 1
}
}
優(yōu)先推薦第一種寫法和第三種
- 第一種更簡潔
- 第三種更嚴(yán)謹(jǐn)
到此這篇關(guān)于詳解Vue 單文件組件的三種寫法的文章就介紹到這了,更多相關(guān)Vue 單文件組件內(nèi)容請搜素腳本之家以前的文章或下面相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
VUE渲染后端返回含有script標(biāo)簽的html字符串示例
今天小編就為大家分享 一篇VUE渲染后端返回含有script標(biāo)簽的html字符串示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue POST請求頭'Content-Type':'application/j
這篇文章主要介紹了Vue POST請求頭'Content-Type':'application/json;',data上傳過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解swiper在vue中的應(yīng)用(以3.0為例）
這篇文章主要介紹了詳解swiper在vue中的應(yīng)用(以3.0為例），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
vue柱狀進(jìn)度條圖像的完美實(shí)現(xiàn)方案
本文是對bar進(jìn)度條實(shí)現(xiàn)的2種方案進(jìn)行分享，第一種是很簡單，純css的實(shí)現(xiàn)，第二種是echart的實(shí)現(xiàn)。對vue柱狀進(jìn)度條圖像的實(shí)現(xiàn)方案，感興趣的朋友跟隨小編一起看看吧2019-08-08
這篇文章主要介紹了vue.js如何刪除數(shù)組中指定索引的元素問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
下面小編就為大家分享一篇淺談vue的幾種綁定變量的值 防止其改變的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
使用vue3-print-nb實(shí)現(xiàn)打印pdf分頁代碼示例
這篇文章主要介紹了使用vue3-print-nb實(shí)現(xiàn)打印pdf分頁的相關(guān)資料,這種方法不僅適用于Vue3項(xiàng)目,也可以在其他前端框架中實(shí)現(xiàn)類似的打印分頁功能,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue 中自定義指令改變data中的值,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
Vue 使用v-model實(shí)現(xiàn)控制子組件顯隱效果
v-model 可以實(shí)現(xiàn)雙向綁定的效果,允許父組件控制子組件的顯示/隱藏,同時(shí)允許子組件自己控制自身的顯示/隱藏,本文給大介紹Vue 使用v-model實(shí)現(xiàn)控制子組件顯隱,感興趣的朋友一起看看吧2023-11-11
這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)打印功能的幾種方法,打印功能在實(shí)際開發(fā)中非常常見,通常我們需要將網(wǎng)頁中的某一部分或整個(gè)網(wǎng)頁打印出來,需要的朋友可以參考下2023-09-09