上一系列 我们搭建好了入门框架,也跑起来了。现在我们来通过对比的形式看一下 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也能用
至此 我们就了解的 数据绑定 指令的使用 事件处理 生命周期的使用
我知道这里面有很多坑 但我们只是入门级的 先保证能使用 在慢慢补充后面的坑