一、新项目创建
1.1 使用vue-cli创建项目
项目代码变化
1.2 启动项目yarn serve
二、TS在vue中的使用
2.1 类型注释
- 新建自定义类型:
src/models/people.ts
interface People {
id: number;
name: string;
age: number
}
export default People
- 在使用中使用
<ul>
<li v-for="people in people" :key="people.id">
{{people.name}}
<span class="tag">年龄:{{people.age}}</span>
</li>
</ul>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import People from "@/models/people";
//装饰器
@Component
export default class HelloWorld extends Vue {
//声明属性为data
people: People[] = [{ id: 1, name: "子秋", age: 18 }];
}
</script>
2.2 操作数据addPeople
- 添加新人
<div>
<input type="text" placeholder="输入名称" @keyup.enter="addPeople" />
</div>
- 添加新人方法(断言as)
//方法可以直接作为事件回调函数
addPeople(event: KeyboardEvent) {
//断言event是HTMLInputElement
const input = event.target as HTMLInputElement;
//不可直接使用event.target.value
this.people.push({
id: this.people.length + 1,
name: input.value,
age: 18
});
input.value = "";//清空input
}
2.3 计算属性get
<!-- 总数的统计 -->
<li>人数统计:{{total}}</li>
//存取器:计算属性
get total() {
return this.people.length;
}
2.4 数据获取
- 新增数据文件
vue.config.js
,重启项目yarn serve
module.exports = {
devServer: {
before(app) {
app.get('/api/list', (req, res) => {
res.json([
{ id: 1, name: '碧落', age: 19 },
{ id: 2, name: '孟婆', age: 27 },
{ id: 3, name: '秋韵', age: 17 },
])
})
}
}
}
- 安装axios,新建
src/api/people.ts
,关键<People[]>
import axios from 'axios'
import People from '@/models/people'
//不需要约束函数返回值,是由于会进行推断
export function getPeople() {
//函数返回值People类型
return axios.get<People[]>('/api/list')
}
- 生命周期调用
import { getPeople } from "@/api/people.ts";
//生命周期钩子
mounted() {
//数据获取
getPeople().then(res => {
this.people = res.data;
});
}
2.5 构造器$Emit
import { Emit } from "vue-property-decorator"
//HelloWorld.vue
//方法可以直接作为事件回调函数
@Emit()
addPeople(event: KeyboardEvent) {
//断言event是HTMLInputElement
const input = event.target as HTMLInputElement;
//不可直接使用event.target.value
const people = {
id: this.people.length + 1,
name: input.value,
age: 18
};
this.people.push(people);
input.value = ""; //清空input
return people;
}
//父级
<div id="app">
<HelloWorld msg="欢迎来到古风秋林" @add-people="onAddPeople" />
</div>
export default class App extends Vue {
onAddPeople(p: People) {
alert("新增了" + p.name);
}
}