目录
TS教程详见我的另一篇文章 TypeScript学习笔记(超全)
1、引入Typescript
npm install vue-class-component
vue-property-decorator
--save
npm install ts-loader
typescript
tslint
tslint-loader
tslint-config-standard
--save-dev
vue-class-component:扩展vue支持typescript,将原有的vue语法通过声明的方式来支持ts
vue-property-decorator:基于vue-class-component扩展更多装饰器
ts-loader:让webpack能够识别ts文件
tslint-loader:tslint用来约束文件编码
tslint-config-standard: tslint 配置 standard风格的约束
2、配置文件
webpack配置
根据项目的不同配置的地方不同,如果是vue cli 3.0创建的项目需要在vue.config.js中配置,如果是3.0以下版本的话,需要webpack.base.conf中配置。(以下说明是在webpack.base.conf文件中更改)
//1.在resolve.extensions中增加.ts,目的是在代码中引入ts文件不用写.ts后缀
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {}
}
//2.在module.rules中增加ts的rules
module: {
rules: [ {
test: /\.ts$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader'
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: { appendTsSuffixTo: [/\.vue$/] }
} ]
}
3、vue组件的编写
vue组件里大多数的方法改成通过@xxx(装饰器)来表明当前定义的为什么数据。而业务逻辑js的部分就可以直接采用ts的写法了。
基本写法
模板template和样式style的写法不变,script的模块进行了改变,基本写法如下:
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Test extends Vue {
};
</script>
lang=“ts”:script张声明下当前的语言是ts
@Component:注明此类为一个vue组件
export default class Test extends Vue: export当前组件类是继承vue的
data()中定义数据
data中的数据由原来的data()方法改成直接在对象中定义
export default class Test extends Vue {
public message1: string = "animal";
public message2: string = "cat";
}
props传值
porp传值用@Prop装饰器
@Prop({default: '#04A8F7'})
color!: string
@Prop({default: false})
isDropDown!: boolean
default表示如果没有传过来值而使用的默认值
**属性或参数中使用 !:表示强制解析,告诉typescript编译器,这里一定有值,常用于vue-decorator中的@Prop
**变量后使用 !:表示类型推断排除null、undefined
$emit传值
1.不带参数
// 原来写法:this.$emit('bindSend')
// 现在直接写 this.bindSend()
// 多个定义
@Emit()
bindSend():string{
return this.message
}
2.方法带参数
// 原来写法:this.$emit('bindSend', msg)
// 现在直接写: this.bindSend(msg)
// 多个下面的定义
@Emit()
bindSend(msg:string){
// to do something
}
3.emit带参数
// 在逻辑中写
@Emit("sort-change")
handleTableSortChange(sortInfo: any) {
return sortInfo;
}
// 在模板中写
@sort-change="handleTableSortChange"
watch观察数据
// 原来的写法 watch:{}
@Watch('propA',{
deep:true
})
test(newValue:string,oldValue:string){
console.log('propA值改变了' + newValue);
}
computed计算属性
public get computedMsg(){
return '这里是计算属性' + this.message;
}
public set computedMsg(message:string){
}
4、完整代码案例
<template>
<div class="test-container">
{{message}}
<input type="button" value="点击触发父级方法" @click="bindSend"/>
<input type="button" value="点击触发父级方法" @click="handleSend"/>
<input type="button" value="点击触发父级方法" @click="bindSend2"/>
<!-- <Hello></Hello> -->
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import Hello from "./HelloWorld.vue";
// 注明此类为一个vue组件
@Component({
components: {
Hello
}
})
export default class Test extends Vue {
// 原有data中的数据在这里展开编写
public message: string = "asd";
//原有props中的数据展开编写
@Prop({
type: Number,
default: 1,
required: false
})
propA?: number
@Prop()
propB:string
//原有computed
public get computedMsg(){
return '这里是计算属性' + this.message;
}
public set computedMsg(message:string){
}
//原有的watch属性
@Watch('propA',{
deep:true
})
public test(newValue:string,oldValue:string){
console.log('propA值改变了' + newValue);
}
// 以前需要给父级传值的时候直接方法中使用emit就行了,当前需要通过emit来处理
@Emit()
private bindSend():string{
return this.message
}
@Emit()
private bindSend1(msg:string,love:string){
// 如果不处理可以不写下面的,会自动将参数回传
// msg += 'love';
// return msg;
}
//原有放在methods中的方法平铺出来
public handleSend():void {
this.bindSend1(this.message,'love');
}
// 这里的emit中的参数是表明父级通过什么接受,类似以前的$emit('父级定义的方法')
@Emit('test')
private bindSend2(){
return '这个可以用test接受';
}
}
</script>