三、手把手教你 Vue2+Ts

Vue2+Ts

君自故乡来

新建vue文件

<template>
    <div class="about">
        <h1>{{message }}</h1>
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
    message = "Hello TypeScript"
}
</script>

• @Component 让他成为一个vue组件
• message成为 HelloWorld类的属性,用{{message }}调用

应知故乡事

新增一个方法

<template>
    <div class="about">
        <h1>{{message }}</h1>
        <button @click="hello">来点我呀</button>
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
    message = "Hello TypeScript";

    hello() {
        console.log(this.message);
    }
}
</script>

来日绮窗前

Computed 计算属性

<template>
   <div class="about">
       <h1>{{message }}</h1>
       <button @click="hello">来点我呀</button>
       <input v-model="name">
   </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
   message = "Hello TypeScript";
   firstName = "尼古拉斯"
   lastName = "赵四";

   hello() {
       console.log(this.message);
   }

   get name(): string {
       return this.firstName + "·" + this.lastName;
   }

   set name(val) {
       const splitted = val.split(' ')
       this.firstName = splitted[0]
       this.lastName = splitted[1] || ''
   }
}
</script>

寒梅著花未

生命周期,和之前vue2中的一样

<template>
    <div class="about">
        <h1>{{message }}</h1>
        <button @click="hello">来点我呀</button>
        <input v-model="name">
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
    message = "Hello TypeScript";
    firstName = "尼古拉斯"
    lastName = "赵四";

    hello() {
        console.log(this.message);
    }

    get name(): string {
        return this.firstName + "·" + this.lastName;
    }

    set name(val) {
        const splitted = val.split(' ')
        this.firstName = splitted[0]
        this.lastName = splitted[1] || ''
    }

    created(): void {
        console.log("created")
    }

    beforeCreate(): void {
        console.log("beforeCreate")
    }

    mounted(): void {
        console.log("mounted")
    }

    beforeMount(): void {
        console.log("beforeMount")
    }

    destroyed(): void {
        console.log("destroyed")
    }

    beforeDestroy(): void {
        console.log("beforeDestroy")
    }
}
</script>

大多数都会调用其他组件，该怎么办呢？还记得那个home.vue吗?

@Component({
    components:{组件名}
    })

<template>
    <div class="about">
        <div>
            <h1>{{message }}</h1>
            <button @click="hello">来点我呀</button>
            <input v-model="name">
        </div>
        <!--引用组件-->
        <test></test>
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import test from "@/components/test.vue";

@Component({
    components: {test}
})
export default class HelloWorld extends Vue {
    message = "Hello TypeScript";
    firstName = "尼古拉斯"
    lastName = "赵四";

    hello() {
        console.log(this.message);
    }

    get name(): string {
        return this.firstName + "·" + this.lastName;
    }

    set name(val) {
        const splitted = val.split(' ')
        this.firstName = splitted[0]
        this.lastName = splitted[1] || ''
    }

    created(): void {
        console.log("created")
    }

    beforeCreate(): void {
        console.log("beforeCreate")
    }

    mounted(): void {
        console.log("mounted")
    }

    beforeMount(): void {
        console.log("beforeMount")
    }

    destroyed(): void {
        console.log("destroyed")
    }

    beforeDestroy(): void {
        console.log("beforeDestroy")
    }
}
</script>