如何使用 vue + typescript 編寫頁面 ( 基礎裝飾器部分 )

關於 Vue

Vue是一款前端的庫，用來快速生成頁面，是一款MVVM理念的框架。

關於 Typescript

Typescript是一款ECMAScript/Javascript的超集，提供了更豐富的語法

選擇 vue 的理由

簡單。推薦指數：3.7 。

扣分主要是我不太喜歡 script，css，template放在一個文件裏面。固然了css還能夠剔除到單獨文件，可是script就無法剔除了，不然語法器會報找不到

開發相關準備

• 開發平臺 Windows 10
• 開發工具使用的微軟旗下的 Visual Studio Code ，如下簡稱 vscode
  • 安裝vue插件 Vetur
  • 安裝 Beautify css/less/scss 插件
  • 有須要能夠安裝一箇中文語言包
• 環境安裝
  • node 用來運行環境和使用npm下載相關的開發包
  • git 部分包源碼須要使用git下載安裝
  • python 安裝py是使用 node-sass 須要使用到，使用其餘css預編譯能夠忽略
  • 以上工具準備好後接下來安裝 vue-cli 3.0 使用 npm install -g @vue/cli （習慣使用yarn的人可使用yarn global add @vue/cli）
• 使用 vue-cli 建立項目
  • vue create demo ，demo就是建立項目的名稱
  • 提示選擇預設，選擇 Manually select features 回車確認
  • 選擇typescript vuex router babel css pre-processors，不使用linter，不選單元測試[有須要另說]
  • 回車後按照須要選擇合適的選項
  • 選擇完畢後回車等待資源準備
• 使用 vue-ui管理項目
  • 運行 vue ui
  • 成功後訪問提供的 url
  • 在Vue 項目管理器導入建立的項目
  • 在插件、依賴、配置能夠作相應調整，也能夠添加須要的插件、依賴

編碼開始

打開 vscode ，文件-打開文件夾，選擇剛纔建立好的項目文件夾，導入項目，使用CTRL + ~ 召喚控制檯。 輸入npm run serve運行開發模式，按住CTRL點擊連接，打開項目地址。初次使用ts時，需瞭解如下ts的基本語法，而且在使用ts編寫vue時，須要瞭解vue相關的基礎知識。如下介紹默認已經熟悉並瞭解相關內容，可是不知如何整合。 打開src/views/Home.vue 做爲參照，進行講解：

熟悉幾個vue的裝飾器 vue-property-decorator

如下的裝飾器的功能和原js編寫的功能相同/類似，能夠參照官方文檔類比解讀。

import { Vue, Component, Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'
複製代碼

1. Vue 實際上就是 Vue 自己,繼承vue相關屬性和函數

class MyComponent extends Vue { }
複製代碼

2. @Component 聲明成一個vue的組件實例，若是不使用，則不能獲得一個vue組件

第一種方式，不須要定義額外內容

@Component
class MyComponent extends Vue { }
複製代碼

第二種方式，定義相關內容

@Component({
    /* 這裏和js版本編寫的 vue 組件內容相同， * 凡是不能在ts裏面完成的均可以在這裏完成 * 最終會被合併到一個實例中。 * 在這裏定義的內容，不會被語法器獲取到，所以必需要同步在class中聲明 */
    data(){
        return { myname:"",age:18 }
    }
})
class MyComponent extends Vue {
    private myname:string;
    mounted(){
        this.myname;    
        this.age;// 語法器報錯，當前類找不到age屬性
    }
}
複製代碼

3. @Provide 向任意層級的子組件提供可訪問的屬性，默認爲當前屬性的名稱，能夠指定名稱

@Component
class ParentComponent extends Vue { 
    @Provide() private info!:string;
    @Provide("next") private infoNext!:string;
}
複製代碼

4. @Inject 獲取父級由Provide提供的屬性，默認爲當前屬性的名稱，能夠指定名稱，多個父級提供相同名稱屬性時，獲取最近父級的名稱屬性

@Component
class MyComponent extends Vue { 
    @Inject() private info!:string;
    @Inject("next") private infoNext!:string;
}
複製代碼

5. @Prop 由標籤屬性注入，獲取對應標籤屬性上值,可配置具體prop內容，參照js版本props內容

@Component
class MyComponent extends Vue { 
   @Prop() age!:number;
   @Prop({default:1}) sex!:number;
}
複製代碼

<template>
    <MyComponent :age="16" />
</template>

<script lang="ts"> import MyComponent from './MyComponent.vue'; @Component({ components:{ MyComponent } }) class PComponent extends Vue { } </script>
複製代碼

6. @Model 是v-model的裝飾器，當自定義組件想使用v-model時，可使用這種方式，配合emit能夠雙向傳遞屬性值

<template>
    <input type="checkbox" :checked="checked" @change="changed"/>
</template>

<script lang="ts"> @Component class MyComponent extends Vue { @Model("change") checked!:number; changed(event:any){ /* 這裏是偷懶寫的any，在實際項目中須要避免 */ this.$emit("change",event.target.value) } } </script>
複製代碼

<template>
    <MyComponent :age="16" v-model="mycheck" />
</template>

<script lang="ts"> import MyComponent from './MyComponent.vue'; @Component({ components:{ MyComponent } }) class PComponent extends Vue { private mycheck:boolean = false; } </script>
複製代碼

7. @Watch 觀察某個屬性更新

@Component
class MyComponent extends Vue { 
   @Prop() age!:number;
   @Watch("age")
   ageChange(newVal:number,oldVal:number){
       /*age屬性更新時，處理相關內容*/
   }
}
複製代碼

8. @Emit this.$emit 的裝飾器,若是沒有指定名稱，默認使用函數名稱。有返回值時，使用返回值，沒有則使用

@Component
class MyComponent extends Vue { 
   private myname = "";
   
   @Emit()
   ageChangeA(){ /* 僅發送 this.$emit('ageChangeA') */   }
   
   @Emit()
   ageChangeB(age:number){ /* 發送 age this.$emit('ageChangeB',age) */   }
   
   @Emit()
   ageChangeC(age:number){  return 1 /* this.$emit('ageChangeC',1) 發送return 結果*/ }
}
複製代碼

9. Mixins

// MyMixin.ts
@Component
export default class MyMixin extends Vue { 
   /* 若是使用private 修飾，則兩個相同的 私有屬性混入時，會產生衝突 */
   protected myname = "張三";
   created(){  /* 混入對象有本身的 生命週期函數*/ }
   getMyName(){ console.log("張三混入") }
}
複製代碼

// OtherMixin.ts
@Component
export default class OtherMixin extends Vue { 
   /* 若是使用private 修飾，則兩個相同的 私有屬性混入時，會產生衝突 */
   protected myname = "李四";
   created(){  /* 混入對象有本身的 生命週期函數*/ }
   getMyName(){ console.log("李四混入") }
}
複製代碼

@Component
class MyComponent extends Mixins(MyMixin,OtherMixin) { 
   private myname = ""; /* 混入對象已經定義，這裏產生屬性衝突 */
   mounted(){
       this.getMyName() // 李四混入
   }
}
複製代碼

裝飾器能夠參照 vue-property-decorator

沒有filters,沒有指令相關裝飾器，有須要能夠在@Component裏面補充，或者能夠直接定義函數調用計算返回值 在class裏定義的屬性即data屬性，須要賦值初始值。

對於computed，使用 get 替代

@Component
class MyComponent extends Vue { 
   private myname = ""; /* 混入對象已經定義，這裏產生屬性衝突 */
   get upperName(){
       return "A" + this.myname
   }
}
複製代碼