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. 对于全部其余选项，将它们传递给装饰器函数。