詳解TypeScript+Vue 插件 vue-class-component的使用總結(jié)
更新時間：2019年02月18日 11:33:27 作者：南山有臺
這篇文章主要介紹了TypeScript+Vue 插件 vue-class-component的使用總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
首先 下載
npm install vue-class-component vue-property-decorator --save-dev
一梭子直接干；
其次，咱來說說它們的區(qū)別與聯(lián)系：
vue-property-decorator社區(qū)出品；vue-class-component官方出品
vue-class-component提供了Vue、Component等；
vue-property-decorator深度依賴了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch；
開發(fā)時正常引入vue-property-decorator就行
引入后寫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}`)
},
}
}
大佬都說爽的一批；
然鵝菜鳥我遇到問題一堆，以下做個積累總結(jié)：
1、寫法問題：引入組件和接收父組件傳過來的參數(shù)
@Component({
components: {
XXXX
},
props: {
mapFlag: Number
}
})
2、獲取refs，在其后面加上as HTMLDivElement（不知道是不是這插件引起的，懶得管，直接干就是）
let layoutList:any = this.$refs.layout as HTMLDivElement
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇vue實現(xiàn)tab切換外加樣式切換方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue移動端判斷手指在屏幕滑動方向，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
Vue3+TS+Vite+NaiveUI搭建一個項目骨架實現(xiàn)
本文主要介紹了Vue3+TS+Vite+NaiveUI搭建一個項目骨架實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了詳解Vue 多級組件透傳新方法provide/inject，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue-cli+axios實現(xiàn)文件上傳下載功能(下載接收后臺返回文件流)
這篇文章主要介紹了vue-cli+axios實現(xiàn)文件上傳下載功能(下載接收后臺返回文件流),本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
element使用自定義icon圖標(biāo)的詳細(xì)步驟
前端經(jīng)常會用到UI提供的各種圖表,推薦阿里的圖標(biāo)庫,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的詳細(xì)步驟,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue-cli2打包前和打包后的css前綴不一致的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格
這篇文章主要介紹了vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
外部的庫文件,可以使用CDN資源,或者別的服務(wù)器資源等,下面這篇文章主要給大家介紹了關(guān)于Vue如何使用cdn加載資源加快打包速度的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)星級評價效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03