TypeScript(十二) Vue中使用TS

Vue 中使用 TsLint 备注

你可以爱一个人到尘埃里,但没人会喜欢尘埃里的你

安装指南

本次使用只是针对 vuecli3.0 部分

1.安装 Vuecli3.0 的时候必须选用 Typescript

• 然后等待 vuecli3.0 安装完以后在需要安装个包

(i). vue-class-component 第一个安装包

 npm i vue-class-component

(ii). vue-property-decorator 第二个安装包

npm i vue-property-decorator

(iii). vuex-class //公共数据必须要使用

npm i vuex-class

2.使用 TS 模板

• 要是安装了插件可以在 Vscode 中使用快捷键

<!--html 模板-->
<template>
  <div class="home"></div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'

  // @Component 修饰符注明了此类为一个 Vue 组件
  @Component({
    name: 'Home',
  })
  export default class Home extends Vue {}
</script>

<!--放置样式css-->
<style scoped></style>

Vue 中使用 TS 关键字对照

在 Vue 中使用 TS 有下面几个常用的关键字

• @Emit

• @Prop

• @Provide

• @Component

• @Watch

• @State

• @Getter

• @Mutation

(1) @Provide 他的作用就是取代原先代码里的 data

  @Provide() private message: string = "首页";
  @Provide() private number2: number = 20;
  @Provide() private number: number = 12;
  @Provide() private data: string = "父亲给孩子的值";

相当于原先的

data: function(){
       return {
         message: "首页",
         number2:20,
         number:12,
         data: "父亲给孩子的值"
       }

(2) @Component 他就是注册的组件

@Component({
  components: {
    IndexHeader
  }
})

相当于原先的

components: {
  IndexHeader
}

(3) @Emit 发送数据

@Emit() //发送的事件名,要是不填写就是把方法名称发送走
  handleclick_two(n: number) {
    return this.sonnumer + n;
  }

相当于原先的

this.$emit('handleclick_two', '发送的值')

(4) @Prop 父组件给子组件传递的值

 @Prop()
  private msg!: string; //msg后面的感叹号就是非null和非undefined的类型断言
 @Prop()
  datanumber!: number | string;

相当于原先的

props: ['title', 'author', 'likes']

(4) @Watch

  //有几个watch就写几个后面跟的必须是改变的方法
  @Watch("number")
  changeAge2(newvalue: number, oldvalue: number) {
    console.log(
      "这是新值哈哈哈" + newvalue + "||" + "这是老值哈哈哈" + oldvalue
    );
  }
  @Watch("number2", { deep: true })
  changeAge111(newvalue: number, oldvalue: number) {
    console.log("这是新值" + newvalue + "||" + "这是老值" + oldvalue);
  }

相当于原先的

watch:{
 cityName(newName, oldName) {
      // ...
    }
}

(5) @Watch 观察路由 immediate 必须要有

 @Watch("$route", { immediate: true }) //必须又immediate:true否则不监听
  changeroute(to: any, from: any) {
    console.log(to);
    console.log(from);
    let roulink: string = to.path;
    console.log(roulink);
  }

(6) 计算后的属性

get age(): string {
    return `I am ${this.number} age`;
  }
set age(value) {
    this.number = Number(value);
}

相当于原先的

computed:{
  fullName:{
    //get
    get:function(){
      return this.firstName+""+this.lastname
    }
    //set
    set:function(){
      var names = newValue.split("");
      this.firstName = names[0]
      this.lastName = names[names.length-1]
    }
  }
}

(7) @State 公共数据

• 引用

import { State, Getter, Mutation, Action } from 'vuex-class' //公共数据必须要使用vuex-class

• 使用

 @State("username") private username2: any;
  //第一个对应的就是state里面的名称 后面就是自定义名称
  @State("textname") private ceshiname: any;

(8)@Getter

• 引用

import { State, Getter, Mutation, Action } from 'vuex-class' //公共数据必须要使用vuex-class

• 使用

@Getter("get_username") private get_textusername: any;

(9)@Mutation

• 引用

import { State, Getter, Mutation, Action } from 'vuex-class' //公共数据必须要使用vuex-class

• 使用 类型只能是 any

 @Mutation("change_username") private changeuser: any;
 //使用的时候
  handleclick_change_state() {
    this.changeuser("<<这就是新的我改变的值>>");
  }

总结

• TypeScript 在 Vue 中使用