vue-cli3.0以上 + typeScript 教程學習指導（二） 數據和事件處理

上一系列 我們搭建好了入門框架，也跑起來了。現在我們來通過對比的形式看一下  ts是如何綁定數據 處理事件的

所有系列文章 地址 https://blog.csdn.net/www_share8/category_9877844.html

一 數據綁定

ts+vue寫法

<template>
  <div class="hello">
    <h1 v-if="states">{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  private msg: string = '測試'
}
</script>

vue寫法

<template>
  <div class="tt">
    <h1 v-if="states">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'tt',
  data () {
    return {
       msg: '測試',
    }
  }
}
</script>

對比這個  最簡單的數據綁定  ts中引入了vue-property-decorator(裝飾器) 具體的使用 大家可以看這篇文章https://www.jianshu.com/p/d8ed3aa76e9b

ts中，拋棄了 我們之前常寫的 data vue生命週期生命的，而是使用了類 class 繼承。定義參數的方式也變了

對於類型 不懂的  大家可以 看一下基礎 https://ts.xcatliu.com/

雙向數據  的綁定 就是這樣了  

 

二：指令 v-if 和v-for

ts

<template>
  <div class="hello">
    <h1 v-if="states">{{ msg }}</h1>
    <ul>
      <li v-for="(item,index) in list"
          :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  private msg: string = '測試'
  private states: boolean = false
  private list: any[] = ['唱歌', '跳舞', '喝酒', 1, 5]
}
</script>

vue

<template>
  <div class="tt">
    <h1 v-if="states">{{ msg }}</h1>
    <ul>
      <li v-for="(item,index) in list"
          :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'tt',
  data () {
    return {
      states: false,
      msg: '測試',
      list: ['唱歌', '跳舞', '喝酒', 1, 5]
    }
  }
}
</script>

對比 發現  兩者的template是完全相同的，不同之處是 數據的定義   之前的vue是在data中直接定義，而ts中是添加了數據類型

看到着  我們還是可以接受的

三  事件 

ts

<template>
  <div class="hello">
    <h1 v-if="states">{{ msg }}</h1>
    <el-button @click="changeState">切換</el-button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  private msg: string = '測試'
  private states: boolean = false
  changeState(): void {
    this.states = !this.states
  }
}
</script>

vue

<template>
  <div class="tt">
    <h1 v-if="states">{{ msg }}</h1>
    <el-button @click="changeState">切換</el-button>
  </div>
</template>

<script>
export default {
  name: 'tt',
  data () {
    return {
      states: false,
      msg: '測試',
    }
  },
  methods: {
    changeState () {
      this.states = !this.states
    }
  }
}
</script>

發現 ts中是直接 在類裏面寫方法，而vue中是在methods中寫。至此 數據綁定，事件處理 v-if 和v-for大家已經瞭解瞭如何去處理

我們在來深入瞭解一下，ts中如何去寫vue的生命週期內容

四 生命週期實現

vue中常用的生命週期中，created(視圖之前加載數據)，mounted(頁面加載完後) ，我們一般使用這來提前加載數據或者初始化內容

ts中完全可以直接使用。這就有點厲害了  ts中真的是vue的福音  vue能用的  ts也能用

至此  我們就瞭解的 數據綁定 指令的使用 事件處理 生命週期的使用

我知道這裏面有很多坑  但我們只是入門級的 先保證能使用  在慢慢補充後面的坑