vue+ts上集----vue-cli创建项目时注意选中TypeScript、定义组件的三种方式（类式，扩展式，函数式）、函数式组件没有this，它通过props接收父组件传来的值、函数式组件触发事件的方法、类组件中定义props，元数据，实例方法，计算属性，属性检测，ref，自定义指令，过滤器

            <template>
                <div>
                    <h3>类组件</h3>
                </div>
            </template>
            <script lang="ts">
            import Vue from ‘vue‘;
            // 引入vue装饰器
            import {Component} from "vue-property-decorator";
            // 用装饰器装饰类
            @Component({})
            export default class ClassComponent extends Vue{
                mounted():void {
                    console.log("class-component挂载完毕")
                }
            }
            </script>

            <template>
                <div id="app">
                    <h3>vue+ts</h3>
                    <ClassComponent></ClassComponent>
                </div>
            </template>
            <script lang="ts">
            import Vue from ‘vue‘;
            // 引入vue装饰器
            import {Component} from ‘vue-property-decorator‘;
            import ClassComponent from ‘./components/ClassComponent.vue‘
            // 用装饰器装饰类
            @Component({
                components:{ClassComponent}
            })
            export default class App extends Vue{

            }
            </script>

            import Vue from ‘vue‘;
            export default Vue.extend({
                mounted() {
                    console.log("extend-component挂载完毕")   
                },
            })

            import ExtendComponent from "./components/ExtendComponent.vue";
            @Component({
                components:{ExtendComponent}
            })

            <template functional>
                <div>
                    <h3>函数式组件</h3>
                </div>
            </template>

            import FunctionComponent from "./components/FunctionComponent.vue";
            @Component({
                components:{FunctionComponent}
            })

    <script>
        export default {}
    </script>

    <script lang="ts">
        import Vue from ‘vue‘;
        export default Vue.extend({})
    </script>

        <FunctionComponent p1="ppppppp"></FunctionComponent>

        <div>{{props.p1}}</div>

        export default class App extends Vue{
            show(arg:number):void{
                alert("函数式组件中的事件触发："+arg)
            }
        }

        <button @click="parent.show(10)">按钮</button>

        <ClassComponent p1="阿尼哈塞呦！！！！！" p2="接收到p2传过来的值" :p3="123"></ClassComponent>

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

        @Prop() readonly p1!:string;

        @Prop({default:"p2默认的值在装饰器的对象中设置default"}) readonly p2!:string|undefined;

        @Prop({default:12345,type:Number}) readonly p3!:number|undefined;

    show(arg1:number,arg2:string):void{
        alert("类组件的实例方法"+arg1+arg2)
    }

get cptMsg1():string{
        return "经过计算后的msg1："+this.msg1
    }

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

        @Watch("msg1")
        onMsg1Change(newValue:string,oldValue:string):void{
            console.log("msg1发生变化了","新值："+newValue,"旧值："+oldValue)
        }

        @Watch("msg5",{deep:true,immediate:true})
        onMsg5Change(newValue:string,oldValue:string):void{
            console.log("msg5发生变化了","新值："+newValue,"旧值："+oldValue)
        }

        import {Component,Prop,Watch,Ref} from "vue-property-decorator";

        <p ref="box">box</p>

        @Ref("box") bbox!:HTMLPreElement;

        mounted():void {
            this.bbox.style.backgroundColor="deeppink";
        }

        @Component({
            directives:{// 局部指令
                direc1:(el:HTMLElement,binding)=>console.log("direc1",binding.value)
            },
            filters:{// 局部过滤器
                filt1(data:string,arg:number=2):string{
                    return "宝马"+arg
                }
            }
        })

        <div v-direc1>direc1</div>
        <div v-direc1="‘qqqqq‘">direc1</div>

        <div>{{"bwm"|filt1}}</div>
        <div>{{"bwm"|filt1(33333)}}</div>