vue+typescript的基本语法

1.  首先要在script标签中添加lang属性并且设置为ts

// 1.从vue的扩充包中引入核心文件 Vue,Component
import {Vue,Component} from "vue-property-decorator"
//引入组件
import Two from "@/components/Two.vue"
// 2.使用@Component装饰器
@Component({
//注册组件
    components:{Two}
})
// 3.暴露组件并继承vue基类
export default class One extends Vue{
}

2.添加数据

 问题，如果这里给数据定义了类型，会报下面这种问题，解决方式第一种，不加数据类型，第二种方式在eslintrc.js的rules配置选项中红色框框中的代码

 

 3.定义函数,计算属性，侦听器，vue的生命周期，注意在使用侦听的时候需要在扩充包中引入Watch

 

export default class One extends Vue {
  msg: string = "Happy";
  //    定义函数
  update() {
    this.msg = "嘻嘻";
  }
//   计算属性,需要添加get关键字，表示这是一个计算属性
get fn(){
    return this.msg.toUpperCase()
}
// 侦听器
@Watch("msg")
handleChange(newVal:any,oldVal:any){
    console.log("新的值："+newVal);
    console.log("旧的值:"+oldVal);
}

//生命周期
beforeCreate(){
    console.log("el和data创建之前");
}
created(){
    console.log("el和data创建之后");
    
}


}

4.过滤器