I. New project creation

1.1 Creating a Project using vuE-CLI



Project code changes



1.2 Starting yarn Serve



The use of TS in VUE

2.1 Type Comments



  • Creating a custom type:src/models/people.ts

interface People {
    id: number;
    name: string;
    age: number
}
export default PeopleCopy the code

  • In use

<ul>
      <li v-for="people in people" :key="people.id">
        {{people.name}}
        <span class="tag"> age: {{people. The age}} < / span > < / li > < / ul > < script lang ="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import People from "@/models/people"; // Decorator @componentexportDefault class HelloWorld extends Vue {// Declare property to data people: people [] = [{id: 1, name:"Autumn son", age: 18 }];
}
</script>
Copy the code

2.2 Operation data addPeople



  • Add a new

<div>
      <input type="text" placeholder="Enter a name" @keyup.enter="addPeople" />
</div>Copy the code

  • Add new method (assert AS)



 // methods can be used directly as event callbacks
  addPeople(event: KeyboardEvent) {
    // Assert that event is HTMLInputElement
    const input = event.target as HTMLInputElement;
    // Do not use event.target.value directly
    this.people.push({
      id: this.people.length + 1.name: input.value,
      age: 18
    });
    input.value = "";/ / empty input
  }
Copy the code


2.3 Calculating the GET attribute



<! -- of the total number of statistics - > < li > number statistics: {{total}} < / li > / / accessors: calculate attribute to gettotal() {
    return this.people.length;
  }
Copy the code

2.4 Data Acquisition

  • Adding data filesvue.config.js, restart the projectyarn serve

module.exports = {
    devServer: {
        before(app) {
            app.get('/api/list', (req, res) => {
                res.json([
                    { id: 1, name: 'the sky', age: 19 },
                    { id: 2, name: 'meng old woman', age: 27 },
                    { id: 3, name: Cixin qiu - yun ' ', age: 17 },
                ])
            })
        }
    }
}Copy the code

  • Install axios and create a new onesrc/api/people.tsThe key<People[]>

import axios from 'axios'
import People from '@/models/people'// There is no need to constrain the return value of the function because of inferenceexport function getPeople() {// Function returns a value of type Peoplereturn axios.get<People[]>('/api/list')}Copy the code

  • Lifecycle call

import { getPeople } from "@/api/people.ts"; // Lifecycle hooksmountedGetPeople (). Then (res => {this.people = res.data; }); }Copy the code



2.5 Constructor $Emit



import { Emit } from "vue-property-decorator"// the helloWorld.vue method can be directly used as the event callback @emit () addPeople(event: HTMLInputElement const input = event. Target as HTMLInputElement; Value const people = {id: this.people.length + 1, name: input. Value, age: 18}; this.people.push(people); input.value =""; / / empty inputreturnpeople; } // parent <div id="app">
   <HelloWorld msg="Welcome to the ancient autumn Forest." @add-people="onAddPeople" />
</div>

export default class App extends Vue {
  onAddPeople(p: People) {
    alert("Added"+ p.name); }}Copy the code