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也能用

至此  我们就了解的 数据绑定 指令的使用 事件处理 生命周期的使用

我知道这里面有很多坑  但我们只是入门级的 先保证能使用  在慢慢补充后面的坑