詳解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頁面刷新記住頁面狀態(tài)的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-12-12
Vue純前端實現(xiàn)導(dǎo)出Excel并修改樣式
這篇文章主要為大家詳細介紹了Vue如何利用xlsx-style庫實現(xiàn)導(dǎo)出Excel并修改樣式的功能,文中的示例代碼講解詳細,有需要的可以參考下2024-01-01
Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios, axios)，本文給大家介紹Vue?axios和vue-axios關(guān)系，感興趣的朋友一起看看吧2022-08-08
watch是由用戶定義的數(shù)據(jù)監(jiān)聽，當(dāng)監(jiān)聽的屬性發(fā)生改變就會觸發(fā)回調(diào)，這項配置在業(yè)務(wù)中是很常用。在面試時，也是必問知識點，一般會用作和computed進行比較。那么本文就來帶大家從源碼理解watch的工作流程，以及依賴收集和深度監(jiān)聽的實現(xiàn)2022-12-12
這篇文章主要介紹了vue使用動態(tài)組件實現(xiàn)TAB切換效果的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
后端寫個上傳圖片的接口可不是很簡單，只需要讓這個字段限制為圖片格式，后臺做個保存的邏輯就完事了，前端處理還要牽扯到請求頭，數(shù)據(jù)格式的處理等等問題，按照老傳統(tǒng)把圖片按照字符串往接口put發(fā)現(xiàn)返回的全是400錯誤，直到我知道了前端的FormData方法！2021-05-05
使用Vue3創(chuàng)建多布局系統(tǒng)的三種方法
布局是中大型網(wǎng)站或應(yīng)用的基礎(chǔ),假設(shè)你正在創(chuàng)建一個網(wǎng)頁應(yīng)用,它包括主頁、營銷頁面和應(yīng)用頁面,你不會想要為每一頁重復(fù)所有的工作,對吧,與Nuxt不同,Vue 3并沒有內(nèi)置的布局系統(tǒng),但是別擔(dān)心,這里將向你展示3種簡單的方法來實現(xiàn)這一點,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了使用canvas實現(xiàn)一個vue彈幕組件功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
vue3 reactive函數(shù)用法實戰(zhàn)教程
reactive是Vue3中提供實現(xiàn)響應(yīng)式數(shù)據(jù)的方法，reactive的用法與ref的用法相似，也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時UI也會自動更新，這篇文章主要介紹了vue3 reactive函數(shù)用法,需要的朋友可以參考下2022-11-11
本篇文章主要介紹了詳解vue 模版組件的三種用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07