Vue2.x中使⽤ts 范例，HelloWorld.vue
<template>
<div>
<!-- 新增 -->
mesh自组网
<input type="text" @="addFeature" />
<div v-for="item in features" :key="item.id" :class="{selected: item.selected}">{{ item.name }}</div> <div>{{count}}</div>
气泵接头
</div>
</template>
<script lang="ts">
// import { Vue } from "vue-property-decorator";
广告推送import { Vue, Component, Prop, Emit, Watch } from "vue-property-decorator";
import { FeatureSelect } from "@/types";
// 泛型⽅法
function getList<T>(): Promise<T> {
solve([
{ id: 1, name: "类型注解", selected: false }, { id: 2, name: "编译型语⾔", selected: true }
] as any);
}
@Component
export default class HelloWorld extends Vue {
@Prop({type: String, required: true})
msg!: string;
// message = 'class based component'
// ts特性展⽰，!是赋值断⾔，表⽰该属性⼀定会被赋值，编译器不⽤警告 features: FeatureSelect[] = [];
// ⽣命周期直接⽤同名⽅法即可接线端子压接机
async created() {
// this.features = await getList<FeatureSelect[]>();
const resp = await this.$<FeatureSelect[]>('/api/list')
this.features = resp.data
}
@Watch('msg')
onMsgChange(val:string, old:string) {
console.log(val);
}
// 回调函数直接声明即可
@Emit('add-feature')
喷墨打印机墨盒addFeature(e: KeyboardEvent) {
// 断⾔为Input，⼀般当⼀些类型需要变得更具体的时候需要使⽤as断⾔ 冰雕模具// 这⾥把EventTarget类型断⾔为它的⼦类HTMLInputElement
// 通常编程者⽐编译器更清楚⾃⼰在⼲什么
const inp = e.target as HTMLInputElement;
const feature: FeatureSelect = {
id: this.features.length + 1,
name: inp.value,
selected: false
};
this.features.push(feature);
inp.value = "";
// 返回值作为事件参数
return feature
}
// 访问器当做计算属性
get count() {
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议