vue+ts上集----vue-cli創建項目時注意選中TypeScript、定義組件的三種方式（類式，擴展式，函數式）、函數式組件沒有this，它通過props接收父組件傳來的值、函數式組件觸發事件的方法、類組件中定義props，元數據，實例方法，計算屬性，屬性檢測，ref，自定義指令，過濾器

### vue-cli創建項目

    Babel

    TypeScript

 

    Use class-style component syntax? Yes

    Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

 

### 配置

    tsconfig.js     配置ts編譯環境

    xx.d.ts         支持vue，jsx==》ts寫法

 

### 定義組件的三種方式

    src/components

 

    1、類式

        ①components下新建ClassComponent.vue：（注意要引入vue的裝飾器：vue-property-decorator）

            <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>

        ②App.vue中：（在裝飾器中注冊組件）

            <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>

    2、擴展式

        ①components下新建ExtendComponent.vue組件：（核心是Vue.extend()）

            import Vue from 'vue';
            export default Vue.extend({
                mounted() {
                    console.log("extend-component掛載完畢")   
                },
            })

        ②App.vue中引入並注冊：

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

    3、函數式

        ①component下新建FunctionComponent.vue：（不同之處是template標簽中添加functional屬性）

            <template functional>
                <div>
                    <h3>函數式組件</h3>
                </div>
            </template>

        ②App.vue中引入並注冊：

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

    注意：函數式組件只有template標簽，渲染速度最快，它可以接收上游傳遞下來的props，它沒有this。繼承式組件和原來的vue+js寫法非常像，唯一不同的是

    <script>
        export default {}
    </script>

    變為

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

    類組件中有裝飾器的概念，定義props、元數據、實例方法、計算屬性、watch、ref、指令、過濾器時，有ts自己的寫法。

 

### 函數式組件沒有this，它通過props接收父組件傳來的值

    ①父組件App.vue中定義自定義屬性p1傳值：

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

    ②函數式組件FunctionComponent.vue中直接通過  props.p1接收值：

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

 

### 函數式組件觸發事件的方法：

    ①父組件App.vue中定義show()方法：

        export default class App extends Vue{
            show(arg:number):void{
                alert("函數式組件中的事件觸發："+arg)
            }
        }

    ②函數式組件FunctionComponent.vue中通過 parent.show()觸發click事件：

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

### 類組件中定義props

    ①父組件App.vue中定義自定義屬性p1和p2傳值：

        <ClassComponent p1="阿尼哈塞呦！！！！！" p2="接收到p2傳過來的值" :p3="123"></ClassComponent>

    ②props的定義需要依賴於裝飾器，先在裝飾器插件中解構出Prop裝飾器：

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

    ③! 操作符表示該值不為空：

        @Prop() readonly p1!:string;

    ④default表示默認值，readonly表示只讀屬性一旦修改會報錯：

        @Prop({default:"p2默認的值在裝飾器的對象中設置default"}) readonly p2!:string|undefined;

    ⑤Prop裝飾器中還可以約定傳過來的值的type類型：

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

    注意：接收props時的 默認值不可以這樣設置：@Prop() p4:string="aaa"; 默認值可以在裝飾器中用default設置或者用 ! 操作符設置不為空。

 

### 類組件中定義元數據-data

    ①src下新建types/index.ts（自定義類型Person）：

        interface Person{
            readonly id:number,
            name:string,
            age?:number
        }
        export {Person}

    ②ClassComponent.vue中引入自定義類型Person：

        import {Person} from "../types";

    ③注意自定義類型的使用要先引入：

        msg1:string="你今天吃了嗎";
        msg2:string="你今天吃了嗎"+this.p1;
        msg3:undefined=undefined;// undefined 非響應式
        msg4:any=null;
        msg5:Person={id:1,name:"wxm",age:24}

### 類組件中實例方法的定義

    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()：

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

     ③深度監聽：（deep:true----深度監聽 immediate:true----第一次加載就執行）

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

    

### 類組件中用ref引入元素

    ①先引入裝飾器：

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

    ②設置ref屬性：

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

    ③利用Ref裝飾器將 box標簽代理到 bbox 中去：

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

    ④在掛載后鈎子函數中可以對 bbox 進行操作：

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

 

### 類組件中的自定義指令和過濾器的使用

    ①Component裝飾器中定義局部自定義指令和局部過濾器：

        @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>