小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

Vue2+Ts

盛年不重来

watch监听：在@Component中增加 watch属性 ，其余的和之前vu2中写法一样

<template>
    <div class="about">
        {{count}}
        <button @click="addCount">addCount</button>
    </div>
</template>

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

@Component({
    watch: {
        count: {
            handler: (nv: number, ov: number) => {
                console.log(nv, ov);
            },
            deep: true,
            immediate: true
        }
    }
})
export default class HelloWorld extends Vue {
    count = 0;
    addCount() {
        this.count++;
    }
}
</script>

一日难再晨

props:在@Component中增加 props ，其余的和之前vu2中写法一样

<template>
    <div class="about">
        {{name}}
    </div>
</template>

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

@Component({
props:{
    name:{
        type:String,
        required:false,
        default:'张三'
    }
}
})
export default class HelloWorld extends Vue {

}
</script>

组件不传递name: 组件传递name:

及时当勉励

computed:在@Component中增加 computed ，其余的和之前vu2中写法一样

<template>
    <div class="about">
        {{nameComputed}}
        <input v-model="nameComputed">
    </div>
</template>

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

@Component({
    computed: {
        nameComputed: {
            get() {
                return this.aname;
            },
            set(name: string) {
                this.aname = name;
            }
        }
    }
})
export default class HelloWorld extends Vue {
    aname = "222";
}
</script>

岁月不待人

filter在@Component中增加 filter在 ，其余的和之前vu2中写法一样

<template>
    <div class="about">
             <p>{{aname}} ===> {{aname|toUpper}}</p>
             <p>{{count}} ===> {{count|toPercentage}}</p>
    </div>
</template>

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

@Component({
    filters: {
        toUpper: function (value:string) {
            return value.toUpperCase();
        },
        toPercentage: function (value:number) {
            return value * 100 + '%';
        },
    }
})
export default class HelloWorld extends Vue {
    aname = "hello ts";
    count = 0.3;
}
</script>