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. 對於所有其他選項，將它們傳遞給裝飾器函數。