TS在vue2项目中的写法

作为对照，先回忆一下js在vue2项目中的写法

<script>
export default{data(){return {}},methods:{},computed:{},filters:{},watch:{},created:{}
}
</script>

本来vue2是不支持TS的，如果要在项目中使用TS，就需要相应的插件和配置，虽然用起来有点尴尬，但终究也是能用了。

TS在vue2项目中，需要使用大量的修饰器，对我这样的代码懒人来说，一堆堆的修饰器，的确有点反人类。

要不是组织要求，我是绝对不会去写这样的代码的。当然，鉴于ts类型检查、提前报错等优势，有时候，麻烦点，就麻烦点吧。

一、创建项目

这是前提，先把前期准备工作做好。

1. 创建项目

vue create ts-in-vue

2. 选择TS预设
在询问选择preset的时候，选择第三个进行自定义，用空格键选中TypeScript。
其他选择按个人喜好，选好之后按回车。
后面会问几个问题，可以一直回车，当然不同意可以按n。

3. 启动项目
按提示就好，cd ts-in-vue，然后npm run serve。

二、实际写法

实际项目中常常使用父子组件传参，所以这里也是采用这种形式来记录。

1. 子组件HelloWorld.vue

模板部分如下：

<template><div class="hello"><div>{{computedVal}}</div><div>{{msg}}</div><button @click="deal(1)">同意</button><button @click="deal(2)">拒绝</button></div>
</template>

脚本部分如下：

<script lang="ts">import {Component, Prop, Vue, Watch, Emit} from 'vue-property-decorator';// 引入组件 即使没有使用组件也得书写 @Component。@Componentexport default class HelloWorld extends Vue {// Prop  @Prop(String) private msg!: string;// data   private cont: string = "only you";// 计算属性监听get computedVal() {return this.cont + '能跟我去取西经'}//  Watch@Watch('cont')onContChanged(val: any, oldVal: any) {console.log(val)}// 生命周期private created(){this.init();}// 方法private init(){console.log('HelloWorld')}// Emit子组件触发@Emit('getResult')private deal(val: number) {return val==1?"同意":"拒绝"}}</script>

2. 父组件Home.vue

<template><div class="home"><HelloWorld :msg="msg" @getResult="sonSays" /><button @click="changeMsg">改变</button></div>
</template><script lang="ts">import HelloWorld from '@/components/HelloWorld.vue'import {Component, Vue, Watch, Emit} from 'vue-property-decorator';// 引入组件 即使没有使用组件也得书写 @Component。@Component({components: {HelloWorld}})export default class Home extends Vue {// data   private msg: string = "不论贫穷富有，不论健康疾病，你是否愿意嫁给这位先生？";//  Watch@Watch('msg')onMsgChanged(val: any, oldVal: any) {console.log(val)}// 生命周期private created(){this.init();}// 方法private init(): void{console.log('Home');}private changeMsg(): void{this.msg = "456"}private sonSays(val: number): void{console.log('sonSays:'+val)}}</script>

TS在vue2项目中的写法相关推荐

vue2项目中按钮实现防抖、节流功能，包含封装代码以及使用
1. 描述: 本文章是在vue2项目中对防抖节流函数进行封装,在项目按钮中使用的实际应用. ,哪里有写的不太清楚或者有错的请各位大佬指正.留言:如果对您有所帮助,希望点赞给予支持和鼓励. 2. .v ...
vue2项目中封装echarts地图的比较优雅的方式
以前写过 vue项目中封装echarts的比较优雅的方式,大屏可视化里面,除了数据图表很常用,显示省市地图区域也是很常用到的,这是姐妹篇. 区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排 ...
Ueditor在vue2项目中的使用，Ueditor使用教程
1. 下载并安装Ueditor编辑器,可以去百度UEditor的官网去下载,网址是http://ueditor.baidu.com/website/,下载下来之后要记得引入必要的js文件 ,如uedi ...
node14 升级 node16 后 vue2 项目中 sass 报错问题
起因不知道因为个什么手贱把之前的 node14 版本卸载了去官网重新下载安装了一下 node,最近版本升级到了 node16,以为应该不会有什么问题吧,结果把项目一跑,我勒个去,一堆飘红的,看控制台 ...
vue2 项目中引入iconfont
在线使用 1.找到这个地址,在index.html中link引入 <link rel="stylesheet" href="//at.alicdn.com/t/c/ ...
vue2项目中如何接入视频监控
前言想必各位作为开发者的程序员,有时候公司会给你安排在项目中实现视频实时监控视频实时监控功能,在很多领域都广泛应用,能帮我们在各行各业都解决很多事情,像智慧工地中AI识别(安全帽.在离岗等).国标 ...
vue2项目中实现字体自适应（使用px2rem插件将px转rem）
1.安装px2rem插件 npm add postcss-px2rem 2.配置 (1)在src下的utils目录中新建px2rem.js文件(没有utils就新建一个) px2rem.js // 基 ...
Vue2项目中使用AntV/X6 分辨率适配
1.写一个分辨率转换方法用来转换 //根据 1920 1080 转换 export function conversionResolution(val, type) {if (type === 'wi ...
Vite 搭建 Vue2 项目（Vue2 + vue-router + vuex）
Vite 先让我说几句废话. 在写本文时 Vite 没有提供 Vue2 的创建方式. 相信有些开发者还没开始学 Vue3,但又想尝尝 Vite.那可以参考本文的进食方式. 如果心急的话,"0 ...

TS在vue2项目中的写法

一、创建项目

二、实际写法

TS在vue2项目中的写法相关推荐

最新文章

热门文章