Wangcai bookkeeping project - Implementation of Money.vue component

1. Implement the Vue component of TypeScript.

  • Take Types component as an example to rewrite
    • JS writing
    <template>
      <div>
        <ul class="types">
          <li :class="type === '-' && 'selected'"
          @click="selectType('-')">expenditure</li>
          <li :class="type === '+' && 'selected'"
          @click="selectType('+')">income</li>
        </ul>
      </div>
    </template>
    
    <script lang="js">
      export default {
        name: "Types",
        props: ['xxx'],
        data() {
          return {
            type: '-' // '-' for expenditure. '+' for revenue
          }
        },
        mounted() {
          console.log(this.xxx)
        },
        methods: {
          selectType(type) { // type can only be one of '-' and '+'
            if(type !== '-' && type !== '+'){
              throw new Error('type is unknown')
            }
            this.type = type
          }
        }
      }
    </script>
    
    • TS write method, write data methods and life cycle with class component
      1. at first
        export default class Types extends Vue {
      
        }
      
      1. Compo nent modifier, add @ Component at the top, press tab, select import from Vue property decorator
        import {Component} from "vue-property-decorator"
        @Component
        export default class Types extends Vue {
      
        }
      
      1. Type of parameter type must be specified
      selectType(type: string) { // type can only be one of '-' and '+'
      
      }
      
      1. Code summary
        import Vue from 'vue'
        import {Component} from "vue-property-decorator"
          @Component
          export default class Types extends Vue {
            type = '-'  // '-' for expenditure. '+' for revenue
            selectType(type: string) { // type can only be one of '-' and '+'
              if(type !== '-' && type !== '+'){
                throw new Error('type is unknown')
              }
              this.type = type
            }
            created(){}
            mounted(){}
          }
      
    • props usage 1 check the latest version of a package, and input it at the terminal
        npm info typescript version
      

2. TS component @ Prop decorator

  • usage
    // The number on the left is the check at runtime, and the number on the right is the check at compile time. The check at compile time will prompt when writing code
    @Prop(Number) xxx: number | undefined;
    // Prop tells Vue xxx it's not data it's prop
    // Number tells Vue xxx that the runtime type is a number
    // xxx property name
    // number | undefined is the compile time type that tells TS xxx
    // Why the previous Number is larger and then lower case, see 3. The difference between compile time and run time
  • The benefits of TS
    1. html direct space tells you which parameters
    2. If the type is declared, if the code is wrong, it will tell in advance that the compilation reports an error and js cannot be programmed
    3. Check whether the called method can be called. You can't write. tostring

3. Differences between compile time and run time

4. Nature of TS

5. Three ways to write Vue but file components

  1. Using JS object
  export default { data,props,methods,created,... }
  1. Using TS class
 <script lang="ts">
 @Component
 export default class XXX extends Vue{
   xxx: string = 'hi';
   @Prop(Number) xxx: number|undefined;
 }
  1. Using JS class
 @Component
 <script lang="js">
 export default class XXX extends Vue{
   xxx = 'hi'
 }

6. start to implement the NumberPad component

  • Bind the event on the button. If no parameter is added, the event will be passed in by default
<button @click="inputContent">1</button>
inputContent(event: MouseEvent){
  if(event.target){
    console.log(event.target.textContent);
  }
}
  • Force a type, because Vue and Typescript are not good enough
inputContent(event: MouseEvent){
  if(event.target){
    const button = (event.target as HTMLButtonElement)
    console.log(button.textContent);
  }
}
  • If you just want to exclude the blank, you can also write like this
const input = button.textContent!;
  • Basically complete all codes of numberpad and numberpad components
import Vue from "vue"
import {Component, Prop} from "vue-property-decorator"

@Component // If it is written in this way, it means that Class has props of propMessage, and the type is 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. Start to realize remark function

  • Binding data with native html input
<input type="text" :value="value" @input="onInput" placeholder="Enter notes here">
onInput(event: KeyboardEvent){
      const input = event.target as HTMLInputElement;
      this.value = input.value
    }
  • Shorthand: value and @ input binding data
<input type="text" v-model="value" placeholder="Enter notes here">

8. Start to implement the tags module

  • The writing method of external data cannot be changed
@Prop() readonly dataSource: string[] | undefined // Add readonly
  • Internal data cannot be changed directly
// inside
// this.dataSource.push(name!); / / external data cannot be modified, which is not recommended!
this.$emit("update:dataSource", [...this.dataSource, name])
// External, short for. sync
<Tags :data-source.sync="tags"/>

Finally, personal wechat, welcome to exchange!

This article is based on the platform of blog one article multiple sending OpenWrite Release!

Tags: Front-end Vue TypeScript npm

Posted on Fri, 07 Feb 2020 07:02:29 -0500 by angelkay73