用 Vue+ TypeScript 开发页面_typescript写界面

 

1.创建项目

• vue create my-ts ，my-ts就是所创建的项目的名称

• vue create my-ts
  

• 选择 Manually select features 回车确认
• 选择typescript  vuex   router  babel  css  pre-processors  Linter/Formatter 空格键选中和取消，回车确认
• linter配置选择  ESLint+Prettier

2.开始编码

import { Vue, Component, Prop, Provide, Inject, Model, Watch, Emit, Mixins } from 'vue-property-decorator'

（1）Vue 实际上就是 Vue 本身，用来继承vue相关属性和函数 

（2）@Component 声明成一个vue的组件实例，不使用的话，就不能得到一个vue组件

 

import { Component, Vue } from "vue-property-decorator";
 
// 不需要定义额外内容
 
@Component
export default class MyComponent extends Vue {}

 

import { Component, Vue } from "vue-property-decorator";
 
import bank102 from "@/assets/image/bank-list/102_GongShang.png";
import bank103 from "@/assets/image/bank-list/103_NongYe.png";
import bank104 from "@/assets/image/bank-list/104_ZhongGuo.png";
 
// 需要定义一些相关内容
 
@Component({
     /* 这里和js版本编写的 vue 组件内容相同，
     * 凡是不能在ts里面完成的都可以在这里完成 
     * 最终会被合并到一个实例中。
     */
    components: {
        componentsA,
        componentsB
    },
})
 
export default class MyComponent extends Vue {
    // data
    name: string = "jim";
    age: number = 12;
    bankList: object[] = [];
    showFlag: boolean = false;
    imgSrc: object = {
        bank102,
        bank103,
        bank104
    };
    certTypeList: { key: string; value: string }[] = [
        { key: "0", value: "身份证" },
        { key: "1", value: "户口簿" },
        { key: "2", value: "护照" }
    ];
    
    // methods
    getBankList(){
        
    }
    mounted(){
        // TODO  
    }
}

（3）@Prop 由标签属性注入，获取对应标签属性值，可配置具体prop内容

import { Vue, Component, Prop } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}

 相当于

export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value'
    },
    propC: {
      type: [String, Boolean]
    }
  }
}

（4）@Provide 向任意层级的子组件提供可访问的属性

（5）@Inject 获取父级由Provide提供的属性

import { Component, Inject, Provide, Vue } from 'vue-property-decorator'
 
const symbol = Symbol('baz')
 
@Component
export class MyComponent extends Vue {
  @Inject() readonly foo!: string
  @Inject('bar') readonly bar!: string
  @Inject({ from: 'optional', default: 'default' }) readonly optional!: string
  @Inject(symbol) readonly baz!: string
 
  @Provide() foo = 'foo'
  @Provide('bar') baz = 'bar'
}

相当于

const symbol = Symbol('baz')
 
export const MyComponent = Vue.extend({
  inject: {
    foo: 'foo',
    bar: 'bar',
    optional: { from: 'optional', default: 'default' },
    [symbol]: symbol
  },
  data() {
    return {
      foo: 'foo',
      baz: 'bar'
    }
  },
  provide() {
    return {
      foo: this.foo,
      bar: this.baz
    }
  }
})

（6）@Watch 观察某个属性更新

import { Vue, Component, Watch } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}
 
  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}
 
  @Watch('person')
  onPersonChanged2(val: Person, oldVal: Person) {}
}

相当于

export default {
  watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false
      }
    ],
    person: [
      {
        handler: 'onPersonChanged1',
        immediate: true,
        deep: true
      },
      {
        handler: 'onPersonChanged2',
        immediate: false,
        deep: false
      }
    ]
  },
  methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {},
    onPersonChanged2(val, oldVal) {}
  }
}

（7）@Model 是v-model的装饰器，当自定义组件想使用v-model时，可以使用这种方式，配合emit可以双向传递属性值

import { Vue, Component, Model } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  @Model('change', { type: Boolean }) readonly checked!: boolean
}

相当于

export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: Boolean
    }
  }
}

（8）@Emit this.$emit 的装饰器，如果没有指定名称，默认使用函数名称。有返回值时，使用返回值，没有不使用

import { Vue, Component, Emit } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  count = 0
 
  @Emit()
  addToCount(n: number) {
    this.count += n
  }
 
  @Emit('reset')
  resetCount() {
    this.count = 0
  }
 
  @Emit()
  returnValue() {
    return 10
  }
 
  @Emit()
  onInputChange(e) {
    return e.target.value
  }
 
  @Emit()
  promise() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}

相当于

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
    },
    resetCount() {
      this.count = 0
      this.$emit('reset')
    },
    returnValue() {
      this.$emit('return-value', 10)
    },
    onInputChange(e) {
      this.$emit('on-input-change', e.target.value, e)
    },
    promise() {
      const promise = new Promise(resolve => {
        setTimeout(() => {
          resolve(20)
        }, 0)
      })
 
      promise.then(value => {
        this.$emit('promise', value)
      })
    }
  }
}

（9）Mixins

// AMixin.ts
@Component
export default class AMixin extends Vue { 
   protected myname = "A";
   created(){}
   getMyName(){ console.log(this.myname) }
}

 

// BMixin.ts
@Component
export default class BMixin extends Vue { 
   protected myname = "B";
   created(){}
   getMyName(){ console.log(this.myname) }
}

页面中使用

@Component
class MyComponent extends Mixins(AMixin,BMixin) { 
   mounted(){
       this.getMyName() // B
   }
}

（10）computed 对于计算属性computed ，可以用get代替

import { Vue, Component } from "vue-property-decorator";
 
@Component
class MyComponent extends Vue { 
   private myname = "jim";
   get msg(){
       return "您好！" + this.myname
   }
}

相当于

export default{
  data() {
    return{
        myname: "jim"
    }
  },
  computed:{
      msg(){
          return "您好！" + this.myname;
      }
  }
}