Vue+TypeScript學習

Vue CLI 內置了 TypeScript 工具支持。在 Vue 的下一個大版本 (3.x) 中也計劃了至關多的 TypeScript 支持改進，包括內置的基於 class 的組件 API 和 TSX 的支持。

• 建立工程
  npm install --global @vue/cli
  vue create my-project-name：選擇 "Manually select features (手動選擇特性)" 選項
• 注意5點
  

  1. methods 能夠直接聲明爲類成員方法。
     

     <script lang="ts">
     import { Component, Prop, Vue } from 'vue-property-decorator';
     
     @Component({
       props:{
         msg: String
       }
     })
     
     export default class HelloWorld extends Vue {
       // @Prop() private msg!: string;
     
       // method
       greet () {
         alert('greeting: ' + this.msg)
       }
     }
     </script>

  2. 能夠將計算屬性聲明爲類屬性訪問器。

     <script lang="ts">
     import { Component, Prop, Vue } from 'vue-property-decorator';
     
     @Component
     export default class HelloWorld extends Vue {
       // @Prop() private msg!: string;
     
     // computed
       get computedMsg () {
         return 'computed ' + this.msg
       }
      } </script>

  3. Initial data能夠聲明爲類屬性（若是使用Babel，則須要babel-plugin-transform-class-properties）。
     

     <script lang="ts">
     import { Component, Prop, Vue } from 'vue-property-decorator';
     
     @Component
     export default class HelloWorld extends Vue {
       // @Prop() private msg!: string;
     
       // initial data
       msg = 123
      } </script>

      

      

  4. data，render而且全部Vue生命週期鉤子也能夠直接聲明爲類成員方法，可是您不能在實例自己上調用它們。聲明自定義方法時，應避免使用這些保留名稱。

  5. 對於全部其餘選項，將它們傳遞給裝飾器函數。