同一個坑可以掉一次也可以止步一次，但絕不可以掉進去第二次。

前期準備，安裝node.js和npm，vue/cli

npm install -g @vue/cli   //安裝vue/cli

vue ui  //啟動vue/cli項目儀表盤

創(chuàng)建項目時勾選TypeScript，創(chuàng)建好的項目自動配置了TypeScript支持
包括聲明文件shims-tsx.d.ts，shims-vue.d.ts

cli.jpg

mixins混入

我理解的mixins混入，類似于用一個自定義的組件（以下簡稱子組件）封裝對象的公共屬性和方法，父組件引入子組件后以‘繼承’的方式可以使用子組件的屬性和方法。

// 子組件 MyMinins.ts  
import Vue from 'vue';
import Component from 'vue-class-component';

@Component  // 一定要用Component修飾
export default class MyMinins extends Vue {
  name: string = "Hello"
  sum(a: number, b: number) {
    return a + b
  }
}
//js一般寫法
let mixin = {
  data () {
    return {

    }
  },
  created () {
    this.getBuList()
  },
  methods: {
    getBuList () {
      let that = this
      //邏輯
    },
  }
}
export default mixin;

須要使用混入的組件內(nèi)import 引入MyMinins.ts, 注: export default class About extends mixins(myMixins)中的 default不能少,不能寫成export class About extends mixins(myMixins)
混入的屬性或者方法可以直接使用this.來訪問

//about.vue
<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{msg}}
  </div>
</template>
<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import myMixins from '../components/MyMinins' //引入混入組件MyMinins
@Component
export default class About extends mixins(myMixins) {
  msg: string = ''
  created () {
    this.msg=this.name
    let count=this.sum(1, 2)
    console.log(count)
  }
}
</script>
//js一般寫法
//import導入js,export default {}不變,只需使用mixins注冊,類似于components注冊組件,可直接調用mixins里面的方法
import optionMixin from '../../mixins/index';

export default {
  components: { subCrumbs },
  mixins: [optionMixin],
  data () {
    return {
    }
  }
}

瀏覽器展示 Hello
控制臺輸出 3

@Prop

 @Prop() private msg!: string;
 @Prop(Number) propA!: number;
 @Prop({default: 'default value'}) propB!: string;
 @propC([String, Boolean]) propC: string | boolean;

@Component 引入組件

import HelloWorld from "@/components/HelloWorld.vue";

@Component({
  components: {
    HelloWorld
  }
})

@Watch

  @Watch("wnewName") // 屬性監(jiān)聽
  wnewName(val: number) {
    this.value = val;
  }

計算屬性 computed

get phone() {
    //  計算屬性    方法前添加get關鍵字
    return "http://xxxx.xxxx.com/";
  }

methods 方法組

// 不需要使用methods 包裹，直接在生命周期同級寫就行
  add() {
    this.num += 1;
  }

@Emit 事件的監(jiān)聽與觸發(fā),

    this.emitTodo("world"); // 觸發(fā)

  @Emit() 
  emitTodo(n: string) {
    console.log("hello" + " " + n);
  }