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. 对于所有其他选项,将它们传递给装饰器函数。

posted @   JJLB  阅读(761)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
点击右上角即可分享
微信分享提示