詳解TypeScript+Vue 插件 vue-class-component的使用總結(jié)
首先 下載
npm install vue-class-component vue-property-decorator --save-dev
一梭子直接干；
其次，咱來(lái)說(shuō)說(shuō)它們的區(qū)別與聯(lián)系：
vue-property-decorator社區(qū)出品；vue-class-component官方出品
vue-class-component提供了Vue、Component等；
vue-property-decorator深度依賴(lài)了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch；
開(kāi)發(fā)時(shí)正常引入vue-property-decorator就行
引入后寫(xiě)vue代碼就是如此，
import {Component, Prop, Vue} from 'vue-property-decorator'
@Component
export default class App extends Vue {
name:string = 'Simon Zhang'
// computed
get MyName():string {
return `My name is ${this.name}`
}
// methods
sayHello():void {
alert(`Hello ${this.name}`)
}
mounted() {
this.sayHello();
}
}
相當(dāng)于
export default {
data () {
return {
name: 'Simon Zhang'
}
},
mounted () {
this.sayHello()
},
computed: {
MyName() {
return `My name is ${this.name}`
}
},
methods: {
sayHello() {
alert(`Hello ${this.name}`)
},
}
}
大佬都說(shuō)爽的一批；
然鵝菜鳥(niǎo)我遇到問(wèn)題一堆，以下做個(gè)積累總結(jié)：
1、寫(xiě)法問(wèn)題：引入組件和接收父組件傳過(guò)來(lái)的參數(shù)
@Component({
components: {
XXXX
},
props: {
mapFlag: Number
}
})
2、獲取refs，在其后面加上as HTMLDivElement（不知道是不是這插件引起的，懶得管，直接干就是）
let layoutList:any = this.$refs.layout as HTMLDivElement
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue頁(yè)面刷新記住頁(yè)面狀態(tài)的實(shí)現(xiàn)
這篇文章主要介紹了Vue頁(yè)面刷新記住頁(yè)面狀態(tài)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-12-12
Vue純前端實(shí)現(xiàn)導(dǎo)出Excel并修改樣式
這篇文章主要為大家詳細(xì)介紹了Vue如何利用xlsx-style庫(kù)實(shí)現(xiàn)導(dǎo)出Excel并修改樣式的功能,文中的示例代碼講解詳細(xì),有需要的可以參考下2024-01-01
Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios是基于promise的HTTP庫(kù)，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios, axios)，本文給大家介紹Vue?axios和vue-axios關(guān)系，感興趣的朋友一起看看吧2022-08-08
Vue?watch監(jiān)聽(tīng)使用的幾種方法
watch是由用戶(hù)定義的數(shù)據(jù)監(jiān)聽(tīng)，當(dāng)監(jiān)聽(tīng)的屬性發(fā)生改變就會(huì)觸發(fā)回調(diào)，這項(xiàng)配置在業(yè)務(wù)中是很常用。在面試時(shí)，也是必問(wèn)知識(shí)點(diǎn)，一般會(huì)用作和computed進(jìn)行比較。那么本文就來(lái)帶大家從源碼理解watch的工作流程，以及依賴(lài)收集和深度監(jiān)聽(tīng)的實(shí)現(xiàn)2022-12-12
vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果
這篇文章主要介紹了vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
后端寫(xiě)個(gè)上傳圖片的接口可不是很簡(jiǎn)單，只需要讓這個(gè)字段限制為圖片格式，后臺(tái)做個(gè)保存的邏輯就完事了，前端處理還要牽扯到請(qǐng)求頭，數(shù)據(jù)格式的處理等等問(wèn)題，按照老傳統(tǒng)把圖片按照字符串往接口put發(fā)現(xiàn)返回的全是400錯(cuò)誤，直到我知道了前端的FormData方法！2021-05-05
使用Vue3創(chuàng)建多布局系統(tǒng)的三種方法
布局是中大型網(wǎng)站或應(yīng)用的基礎(chǔ),假設(shè)你正在創(chuàng)建一個(gè)網(wǎng)頁(yè)應(yīng)用,它包括主頁(yè)、營(yíng)銷(xiāo)頁(yè)面和應(yīng)用頁(yè)面,你不會(huì)想要為每一頁(yè)重復(fù)所有的工作,對(duì)吧,與Nuxt不同,Vue 3并沒(méi)有內(nèi)置的布局系統(tǒng),但是別擔(dān)心,這里將向你展示3種簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)這一點(diǎn),需要的朋友可以參考下2023-08-08
使用canvas實(shí)現(xiàn)一個(gè)vue彈幕組件功能
這篇文章主要介紹了使用canvas實(shí)現(xiàn)一個(gè)vue彈幕組件功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue3 reactive函數(shù)用法實(shí)戰(zhàn)教程
reactive是Vue3中提供實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法，reactive的用法與ref的用法相似，也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)UI也會(huì)自動(dòng)更新，這篇文章主要介紹了vue3 reactive函數(shù)用法,需要的朋友可以參考下2022-11-11
本篇文章主要介紹了詳解vue 模版組件的三種用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07