zoukankan      html  css  js  c++  java
  • 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. datarender并且所有Vue生命周期钩子也可以直接声明为类成员方法,但是您不能在实例本身上调用它们。声明自定义方法时,应避免使用这些保留名称。

      5. 对于所有其他选项,将它们传递给装饰器函数。

  • 相关阅读:
    10. 正则表达式匹配
    svn 类似.gitignore功能实现
    GF学习未解之谜
    cocos
    unity 编辑器内对Game视图进行截图
    Roughlike游戏里面的随机数种子
    网站推荐——游戏图标网
    Unity 使用image绘制线段 直线
    c# unity 异步任务队列
    Unity编辑器调用外部exe程序 和 windows文件夹
  • 原文地址:https://www.cnblogs.com/J--L/p/10570342.html
Copyright © 2011-2022 走看看