詳解Vue 單文件組件的三種寫(xiě)法
更新時(shí)間：2020年02月19日 15:58:36 作者：Oliver
這篇文章主要介紹了詳解Vue 單文件組件的三種寫(xiě)法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
JS構(gòu)造選項(xiàng)寫(xiě)法
export defaul { data, methods, ...}
JS class寫(xiě)法
@Component
export default class Cpn extends Vue{
counter = 0 //data
add(){ //methods
this.counter += 1
}
}
TS class寫(xiě)法
@Component
export default class Cpn extends Vue{
@Prop(Number) sum : number | undefined;
counter = 0; //data
add(){ //methods
this.counter += 1
}
}
優(yōu)先推薦第一種寫(xiě)法和第三種
- 第一種更簡(jiǎn)潔
- 第三種更嚴(yán)謹(jǐn)
到此這篇關(guān)于詳解Vue 單文件組件的三種寫(xiě)法的文章就介紹到這了,更多相關(guān)Vue 單文件組件內(nèi)容請(qǐng)搜素腳本之家以前的文章或下面相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue組件中實(shí)現(xiàn)嵌套子組件案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue實(shí)現(xiàn)自定義表格工具擴(kuò)展
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義表格工具擴(kuò)展，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue2之響應(yīng)式雙向綁定,在對(duì)象或數(shù)組新增屬性頁(yè)面無(wú)響應(yīng)的情況
這篇文章主要介紹了vue2之響應(yīng)式雙向綁定,在對(duì)象或數(shù)組新增屬性頁(yè)面無(wú)響應(yīng)的情況及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3+Vite4項(xiàng)目進(jìn)行性能優(yōu)化的配置方案
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Vite4對(duì)項(xiàng)目進(jìn)行性能優(yōu)化的相關(guān)配置,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
vue中的data,computed,methods,created,mounted用法及說(shuō)明
這篇文章主要介紹了vue中的data,computed,methods,created,mounted用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
本文給大家分享的是個(gè)人在使用vue.js制作的文章和評(píng)論的分頁(yè)組件，并使用webpack打包起來(lái)，這里推薦給大家，有需要的小伙伴可以參考下2016-06-06
使用vue-infinite-scroll實(shí)現(xiàn)無(wú)限滾動(dòng)效果
vue-infinite-scroll插件可以無(wú)限滾動(dòng)實(shí)現(xiàn)加載更多，其作用是是當(dāng)滾動(dòng)條滾動(dòng)到距離底部的指定高度時(shí)觸發(fā)某個(gè)方法。這篇文章主要介紹了用vue-infinite-scroll實(shí)現(xiàn)無(wú)限滾動(dòng)效果,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue高版本中一些新特性的使用,需要的朋友可以參考下2018-09-09
使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能
這篇文章主要為大家詳細(xì)介紹了使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue-cli結(jié)合Element-ui基于cropper.js封裝vue實(shí)現(xiàn)圖片裁剪組件功能
這篇文章主要介紹了vue-cli結(jié)合Element-ui基于cropper.js封裝vue實(shí)現(xiàn)圖片裁剪組件功能,本文圖文并茂給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-03-03