vue-cli3.0以上 + typeScript 教程学习指导（二） 数据和事件处理

上一系列 我们搭建好了入门框架，也跑起来了。现在我们来通过对比的形式看一下  ts是如何绑定数据 处理事件的

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

一 数据绑定

ts+vue写法

vue写法

对比这个  最简单的数据绑定  ts中引入了vue-property-decorator(装饰器) 具体的使用 大家可以看这篇文章https://www.jianshu.com/p/d8ed3aa76e9b

ts中，抛弃了 我们之前常写的 data vue生命周期生命的，而是使用了类 class 继承。定义参数的方式也变了

对于类型 不懂的  大家可以 看一下基础 https://ts.xcatliu.com/

双向数据  的绑定 就是这样了  

 

二：指令 v-if 和v-for

ts

vue

对比 发现  两者的template是完全相同的，不同之处是 数据的定义   之前的vue是在data中直接定义，而ts中是添加了数据类型

看到着  我们还是可以接受的

三  事件 

ts

vue

发现 ts中是直接 在类里面写方法，而vue中是在methods中写。至此 数据绑定，事件处理 v-if 和v-for大家已经了解了如何去处理

我们在来深入了解一下，ts中如何去写vue的生命周期内容

四 生命周期实现

vue中常用的生命周期中，created(视图之前加载数据)，mounted(页面加载完后) ，我们一般使用这来提前加载数据或者初始化内容

ts中完全可以直接使用。这就有点厉害了  ts中真的是vue的福音  vue能用的  ts也能用

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

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