旺财记账项目-Money.vue组件实现(下)

1. 实现TypeScript的Vue组件。

• 以Types组件为例改写
  • JS写法

  <template>
    <div>
      <ul class="types">
        <li :class="type === '-' && 'selected'"
        @click="selectType('-')">支出</li>
        <li :class="type === '+' && 'selected'"
        @click="selectType('+')">收入</li>
      </ul>
    </div>
  </template>
  
  <script lang="js">
    export default {
      name: "Types",
      props: ['xxx'],
      data() {
        return {
          type: '-' // '-'表示支出.'+'表示收入
        }
      },
      mounted() {
        console.log(this.xxx)
      },
      methods: {
        selectType(type) { // type 只能是 '-' 和 '+' 中的一个
          if(type !== '-' && type !== '+'){
            throw new Error('type is unknown')
          }
          this.type = type
        }
      }
    }
  </script>
  

  • TS写法，用class组件写data methods 和生命周期
    1. 起手

      export default class Types extends Vue {
        
      }
    

    2. Component修饰符，在最上面加@Compo按下tab键，选择从vue-property-decorator引入

      import {Component} from "vue-property-decorator"
      @Component
      export default class Types extends Vue {
      
      }
    

    3. 必需制定参数type的类型

    selectType(type: string) { // type 只能是 '-' 和 '+' 中的一个
    
    }
    

    4. 代码总结

      import Vue from 'vue'
      import {Component} from "vue-property-decorator"
        @Component
        export default class Types extends Vue {
          type = '-'  // '-'表示支出.'+'表示收入
          selectType(type: string) { // type 只能是 '-' 和 '+' 中的一个
            if(type !== '-' && type !== '+'){
              throw new Error('type is unknown')
            }
            this.type = type
          }
          created(){}
          mounted(){}
        }
    

  • props用法
    1 查看一个包的最新版本，在终端输入

      npm info typescript version
    

2. TS 组件 @Prop装饰器

• 用法

    // 左边Number是运行时的检查，右边number是编译时的检查,编译时的检查会在写代码的时候就给提示
    @Prop(Number) xxx: number | undefined;
    // Prop 告诉 Vue xxx 不是 data 是 prop
    // Number 告诉 Vue xxx 运行时类型 是个 Number
    // xxx 属性名
    // number | undefined 就是 告诉 TS xxx 的编译时类型
    // 为什么前面的Number是大些后面是小写，见3.编译时和运行时的区别

• TS的好处
  1. html直接空格告诉你有哪些参数
  2. 如果声明了类型，代码写错了会提前告诉,编译报错,无法编程js
  3. 检查调用的方法到底能不能调用,你不能写.tostring

3. 编译时和运行时的区别

4. TS的本质

5. Vue但文件组件的三种写法

1. 用JS对象

  export default { data,props,methods,created,... }

2. 用 TS 类

 <script lang="ts">
 @Component
 export default class XXX extends Vue{
   xxx: string = 'hi';
   @Prop(Number) xxx: number|undefined;
 }

3. 用 JS 类

 @Component
 <script lang="js">
 export default class XXX extends Vue{
   xxx = 'hi'
 }

6. 开始实现NumberPad组件

• 在按钮上绑定事件,不加参数会默认传入事件

<button @click="inputContent">1</button>
inputContent(event: MouseEvent){
  if(event.target){
    console.log(event.target.textContent);
  }
}

• 强制指定类型,需要这么做的原因是Vue和Typescript不够好

inputContent(event: MouseEvent){
  if(event.target){
    const button = (event.target as HTMLButtonElement)
    console.log(button.textContent);
  }
}

• 如果只是要排除空,也可以这么写

const input = button.textContent!;

• 基本完成NumberPad,NumberPad 组件所有代码

import Vue from "vue"
import {Component, Prop} from "vue-property-decorator"

@Component // 如果如果这样写，就表示Class就有一个propMessage的props，类型为String
export default class NumberPad extends Vue {
  output: string = '0';
  inputContent(event: MouseEvent){
    const button = (event.target as HTMLButtonElement);
    const input = button.textContent!;
    if(this.output.length === 16){return}
    if(this.output === '0'){
      if ('0123456789'.indexOf(input) >= 0) {
        this.output = input
      } else {
        this.output += input;
      }
      return
    }
    if (this.output.indexOf(".") >= 0 && input === ".") {return;}
    this.output += input;
  }

  remove(){
    if (this.output.length === 1){
      this.output = '0';
    } else {
      this.output = this.output.slice(0, -1);
    }
  }

  clear(){
    this.output = '0';
  }
  ok(){

  }
}

67. 开始实现备注功能

• 原生html input实现绑定数据

<input type="text" :value="value" @input="onInput" placeholder="在这里输入备注">
onInput(event: KeyboardEvent){
      const input = event.target as HTMLInputElement;
      this.value = input.value
    }

• 对:value 和 @input绑定数据进行简写

<input type="text" v-model="value" placeholder="在这里输入备注">

8. 开始实现tags模块

• 只能不能改外部数据的写法

@Prop() readonly dataSource: string[] | undefined // 加readonly

• 内部不能直接改外部数据

// 内部
// this.dataSource.push(name!); // 不能改外部数据,这种写法不推荐!
this.$emit("update:dataSource", [...this.dataSource, name])
// 外部,用.sync简写
<Tags :data-source.sync="tags"/>

最后,个人微信,欢迎交流！