Vue 使用TypeScript

灰太狼 2023-06-08 10:46 18阅读 0赞

> typescript 提供了类型声明，做静态类型检查，类型就是最好的注释。

<template>
      <div id="demo">
        <input type="text" v-model="msg" />
        <p>msg: { {  msg }}</p>
        <p>computedMsg: { {  computedMsg }}</p>
        <button @click="greet">Greet</button>
        <p>{ {  login }}</p>
        <button @click="changeState">change state</button>
      </div>
    </template>
    
    <script lang="ts">
      import {  Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from "vue-property-decorator";
      import {  State, Getter, Action, Mutation, namespace } from "vuex-class";
    
      @Component
      export default class Demo extends Vue { 
        // data
        public msg: string = "Hello World";
        // props
        @Prop() private name!: string;
    
        // store
        @namespace("basic").State((state: any) => state.sexMenu) private sexMenu!: any;
        @State("basic") private basic!: any;
        @namespace("basic").Action("getHouseList") private getHouseList!: any;
    
        @State private login!: boolean;
        @Action private toggleLogin!: any;
    
        // watch
        @Watch("msg")
        public onMsgChanged(val: string, oldVal: string): string { 
          return val;
        }
    
        // mounted
        public mounted(): void { 
          this.greet();
        }
    
        // computed
        get computedMsg(): string { 
          return `computed: ${ this.msg}`;
        }
    
        // methods
        public greet(): void { 
          console.log(`greeting: ${ this.msg}`);
        }
        public changeState(): void { 
          this.toggleLogin();
        }
      }
    </script>
    
    <style scoped lang="scss">
      #demo { 
        line-height: 24px;
      }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue的TypeScript支持

TypeScript支持 * 发布为 NPM 包的官方声明文件 * 推荐配置 * 开发工具链 * * 工程创建 * 编辑器支持 * ...

旧城等待，/ 2024年04月17日 05:48/ 0 赞/ 70 阅读

相关 TypeScript+Vue 插件vue-property-decorator的使用

1、安装依赖 npm install vue-class-component vue-property-decorator --save-dev 首先，我们来

╰+攻爆jí腚メ/ 2023年07月18日 11:26/ 0 赞/ 16 阅读

相关 vue+typescript+poper.js使用

1. 首先安装poper.js 2. npm install poper.js 3. 然后import Poper from poper.js 4. 设置tootip

╰半橙微兮°/ 2023年07月03日 12:12/ 0 赞/ 13 阅读

相关 Vue中应用TypeScript

Vue-cli4 + TypeScript3.0开发项目 1、安装vue-cli4 npm install -g @vue/cli 安装完成之后可以通过vue

川长思鸟来/ 2023年06月28日 09:56/ 0 赞/ 15 阅读

相关 Vue 使用TypeScript

> typescript 提供了类型声明，做静态类型检查，类型就是最好的注释。 <template> <div id="demo"> <i

灰太狼/ 2023年06月08日 10:46/ 0 赞/ 19 阅读

相关 vue集成typescript

最后更新于2018-06-30，技术文具有时效性，请知悉 > 我知道你们早就想用上 vue + ts 强类型了 [还有后续 vue + typescript 进阶篇][v

今天药忘吃喽~/ 2023年02月27日 12:11/ 0 赞/ 18 阅读

相关 vue-typescript-bus

vue-typescript-bus为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页面会自动跳转到页面B，同时我希望将页面A上的某一些参数携

布满荆棘的人生/ 2023年02月23日 08:05/ 0 赞/ 13 阅读

相关 Vue+TypeScript使用教程-快速入门

> 目前Vue CLI已经内置了TypeScript工具支持一.使用 TypeScript 创建工程 > vue create vue-ts 选择Manually S

骑猪看日落/ 2022年10月08日 12:27/ 0 赞/ 290 阅读

相关如何使用 vue + typescript 编写页面（typescript简单语法篇）

在使用typescript编写项目之前，需要有一定的js【es6】基础知识。在学习ts的过程中，类比js的差异，做到基本结合。开发中除去js报错的部分，大部分会受到ts的语义

小灰灰/ 2022年03月16日 14:18/ 0 赞/ 386 阅读

相关使用typescript来写vue详细说明

说明使用vue官方的`vue-cli3`搭建的`typescript`和`vue`的开发环境安装的时候,`vue-cli3`会默认安装`vue-property-d

逃离我推掉我的手/ 2021年12月05日 16:20/ 0 赞/ 315 阅读