Create a TypeScript project for vue2

vue create <project-name>
Copy the code

Please see the selected green dot, space bar to select cancel, Enter next step

1. Write the essential plugin for TS in Vue!

Vue-class-component enhances VUE components, using decorator syntax to make VUE components work better with TS. Vue-property-decorator adds more vuE-specific decorators to vue-class-Component to make VUE components work better with TS.

npm i vue-class-component -s-d
npm i  vue-property-decorator -s-d
Copy the code

2.2 How to bind Data bidirectional values

  • Vue writing
<template> <div class="hello"> <h1>{{msg}}</h1> </div> </template> <script> export default { data() { return { msg: ""}; }, } </script>Copy the code
  • Vuets writing
<template> <div class="hello"> <h1>{{msg}}</h1> </div> </template> <script src="ts"> import { Component, Vue, } from "vue-property-decorator"; @Component export default class Home extends Vue {// Public MSG! Public MSG! : number | string; // msg! : number | string; } </script>Copy the code

How to introduce child components and component values

  • Vue writing
<template> <div class="hello"> <MenuBar :setMsg="msg"/> </div> </template> <script> import MenuBar from ".. /components/MenuBar.vue"; Export default {props: {// Parent component value fatherMsg: {type: String}}, components: {MenuBar}, data() {return {MSG: props: {// parent component value fatherMsg: {type: String}}, components: {MenuBar}, data() {return {MSG: ""}; }, } </script>Copy the code
  • Vuets writing
<template> <div class="hello"> <MenuBar :setMsg="msg" /> </div> </template> <script src="ts"> import { Component, Vue, } from "vue-property-decorator"; import MenuBar from ".. /components/MenuBar.vue"; @Component({ components: {MenuBar},}) export default class Home extends Vue @prop () private fatherMsg! : string; // The value passed to the child component public MSG! : number | string; } </script>Copy the code

Life cycle usage

  • Vue writing
< the template > < div class = "hello" > < h1 > {{MSG}} < / h1 > < / div > < / template > < script > var data = {name: "xiao Ming," age: 18}; export default { data() { return { msg: "", }; }, create () {this.msg = data.name + data.age + "age "; }, } </script>Copy the code
  • Vuets writing
<template> <div class="hello"> <h1>{{msg}}</h1> </div> </template> <script src="ts"> import { Component, Vue, } from "vue-property-decorator"; Var data = {name: "",age: 18}; @Component export default class Home extends Vue { public msg! : number | string; created(): void { console.log("created"); This. MSG = data.name + data.age; } beforeCreate(): void { console.log("beforecreate"); } beforeMount(): void { console.log("beforemounted"); } mounted(): void { console.log("mounted"); } } </script>Copy the code

Method the methods

  • Vue writing
<template> <div class="hello"> <h1>{{count}}</h1> <button class="btn" @click="addCount">add</button> </div> </template> <script> var data = {name: "小 小 ",age: 18}; export default { data() { return { count: 0, }; }, methods: { addCount() { return this.count++; } } } </script>Copy the code
  • Vuets writing
<template> <div class="hello"> <h1>{{count}}</h1> <button class="btn" @click="addCount">add</button> </div> </template> <script src="ts"> import { Component, Vue, } from "vue-property-decorator"; Var data = {name: "",age: 18}; @Component export default class Home extends Vue { public count: number = 0; AddCount (): number {return this.count++; } } </script>Copy the code

Computed properties (computed) and Listen properties (Watch)

  • Vue writing
<template> <div class="hello"> <h1> Compute attributes: {{watchMsg}}</h1> <button class=" BTN "@click="addCcountChange"> {{count}}. Add </button> </div> </template> <script> var data = {{watchMsg}}</h1> <button class=" BTN "@click="addCount" {name: "xiaoming ",age: 18}; export default { data() { return { count: 0, watchMsg: "" }; }, watch: {count: {handler(newVal, oldVal) {if (newVal < 10) {this.watchMsg = "I am a number" + newVal; } else {this.watchMsg = "I will continue to grow "; } }, immediate: true }, watchMsg: { handler(newVal, oldVal) { console.log(newVal); }, immediate: true } }, computed: { countChange: { get() { return this.count; }, set(val) { this.count = val + 1; } } }, methods: { addCcountChange() { return this.countChange; }, addCount() { return this.count++; } } } </script>Copy the code
  • Vuets writing
<template> <div class="hello"> <h1> Compute attributes: {{watchMsg}}</h1> <button class=" BTN "@click="addCcountChange"> {{count}}. {{watchMsg}}</h1> <button class=" BTN "@click="addCount"> Add </button> </div> </template> <script SRC ="ts"> Import Watch import {Component, Vue,Watch} from "vue-property-decorator"; Var data = {name: "",age: 18}; @Component export default class Home extends Vue { public count: number = 0; Public watchMsg: string = ""; Get countChange(): number {return this.count; } set countChange(val) { this.count = val + 1; ClgMsg (newVal: string) @watch ("count") count (newVal: string) Number) {if (newVal < 10) {this.watchMsg = "I am a number" + newVal; } else {this.watchMsg = "I will continue to grow "; } } @Watch("watchMsg") clgMsg(newVal: string) { console.log(newVal); } // method addCcountChange(): number {return this.countchange ++; } addCount(): number { return this.count++; } } </script>Copy the code

How is Mixins mixed used

Mixins Mixins are common method calls;

How Mixins files are written

  • Js writing
export const TestMixins = {
    data(){
      return{
        form:{}
      }
    },
    methods:{
      handleSubmit(name): {
        return new Promise((resolve) => {
            resolve()
        })
      }
      handleReset(name){
        console.log(name)
        return name
      }
    }
}
Copy the code
  • TS writing
// Import {Component, Vue,} from "vue-property-decorator" must be imported; Declare Module 'vue/types/vue' {interface vue {form: Object handleSubmit(name: any): // Declare Module 'vue/types/vue' {interface vue {form: Object handleSubmit(name: any): Promise<any> handleReset(name: any): void } } @Component export default class TestMixins extends Vue { form: Object = {} handleSubmit(name: any): Promise<any> { return new Promise((resolve) => { resolve() }) } handleReset(name: any): void { console.log(name) return name } }Copy the code

Vue file notation for calling Mixins

  • Vue writing
<template> <div class="hello"> <h1>{{handleReset(" test js-mixins")}}</h1> </div> </template> <script> import TestMixins from ".. /assets/mixin"; export default { mixins: [TestMixins], data() { return { count: 0, }; }, } </script>Copy the code
  • Ts writing
<template> <div class="hello"> <h1>{handleReset(" test TS-mixins222")}}</h1> </div> </template> <script SRC =" TS "> import TestMixins from ".. /assets/mixin"; import { Component, Vue, Mixins} from "vue-property-decorator"; @Component({mixins: [TestMixins]}) export default class Home extends Vue {public count: number = 0; } </script>Copy the code

vuex

Js, TS writing method in addition to type judgment other differences are not big;

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isShowEdit: false,
    onlySticky: null,
  },
  mutations: {
    SHOW_EDIT(state: any, editMemo: any) {
      console.log(editMemo)
      state.onlySticky = editMemo;
      state.isShowEdit = true;
    }
  },
  actions: {
  },
  modules: {
  }
})
Copy the code

Vuex calls a single page

  • Vue writing
<template> <div class="hello"> < button@click ="showEdit('vuex')"> </button> </div> </template> <script> import { mapActions, mapState, mapGetters, mapMutations } from "vuex"; export default { data() { return { stickyList:[], }; }, created() { this.stickyList = this.$store.state.onlySticky; }, methods: { ... mapMutations(["SHOW_EDIT"]), showEdit(item) { this.$store.commit("SHOW_EDIT", item); }, } } </script>Copy the code
  • Vuets writing
<template> <div class="hello"> < button@click ="showEdit('vuex')"> </button> </div> </template> <script SRC ="ts"> import { Component, Vue,} from "vue-property-decorator"; import ItemData from ".. /model/ItemData"; @Component export Default Class Home extends Vue {stickyList: [ItemData] = this.$store.state.onlySticky; $this.$store () {this. code.store.mit ("SHOW_EDIT", item); } } </script>Copy the code

Axios requests data

main.ts

import axios from 'axios'
Vue.prototype.$axios = axios;
Copy the code

The TS syntax is not very different except for the type, which is used directly to mount axios and import axios

  • Js writing
<template> <div class="hello"> AXIos request </div> </template> <script> export default {data() {return {}; }, created () {/ / request address https://www.foobar.com/my-app/user/add const url1 = "https://www.foobar.com/my-app/user/add"; this.$axios.get(url1, { params: { type: "js" } }).then(res => { console.log(res); }); // use vue proxy const url2 = "/my-app/user/add"; this.$axios.get(url2, { params: { type: "Ts" } }).then(res => { console.log(res); }); }, } </script>Copy the code
  • Ts writing
<template> <div class="hello"> axios request </div> </template> <script SRC ="ts"> import {Component, Vue,} from "vue-property-decorator"; import axios from "axios"; @Component export default class Home extends Vue {created(): void { const url1 = "https://www.foobar.com/my-app/user/add"; axios.get(url1, { params: { type: "js" } }).then((res: any) => { console.log(res); }); // use vue proxy const url2 = "/my-app/user/add"; axios.get(url2, { params: { type: "Ts" } }).then((res: any) => { console.log(res); }); } } </script>Copy the code