三、手把手教你 Vue2+Ts
三、手把手教你 Vue2+Ts
·
Vue2+Ts
君自故乡来
新建vue文件
<template>
<div class="about">
<h1>{{message }}</h1>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
message = "Hello TypeScript"
}
</script>
- @Component 让他成为一个vue组件
- message成为 HelloWorld类的属性,用{{message }}调用
应知故乡事
新增一个方法
<template>
<div class="about">
<h1>{{message }}</h1>
<button @click="hello">来点我呀</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
message = "Hello TypeScript";
hello() {
console.log(this.message);
}
}
</script>
来日绮窗前
Computed 计算属性
<template>
<div class="about">
<h1>{{message }}</h1>
<button @click="hello">来点我呀</button>
<input v-model="name">
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
message = "Hello TypeScript";
firstName = "尼古拉斯"
lastName = "赵四";
hello() {
console.log(this.message);
}
get name(): string {
return this.firstName + "·" + this.lastName;
}
set name(val) {
const splitted = val.split(' ')
this.firstName = splitted[0]
this.lastName = splitted[1] || ''
}
}
</script>
寒梅著花未
生命周期,和之前vue2中的一样
<template>
<div class="about">
<h1>{{message }}</h1>
<button @click="hello">来点我呀</button>
<input v-model="name">
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
message = "Hello TypeScript";
firstName = "尼古拉斯"
lastName = "赵四";
hello() {
console.log(this.message);
}
get name(): string {
return this.firstName + "·" + this.lastName;
}
set name(val) {
const splitted = val.split(' ')
this.firstName = splitted[0]
this.lastName = splitted[1] || ''
}
created(): void {
console.log("created")
}
beforeCreate(): void {
console.log("beforeCreate")
}
mounted(): void {
console.log("mounted")
}
beforeMount(): void {
console.log("beforeMount")
}
destroyed(): void {
console.log("destroyed")
}
beforeDestroy(): void {
console.log("beforeDestroy")
}
}
</script>
大多数都会调用其他组件,该怎么办呢?还记得那个home.vue吗?
@Component({
components:{组件名}
})
<template>
<div class="about">
<div>
<h1>{{message }}</h1>
<button @click="hello">来点我呀</button>
<input v-model="name">
</div>
<!--引用组件-->
<test></test>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import test from "@/components/test.vue";
@Component({
components: {test}
})
export default class HelloWorld extends Vue {
message = "Hello TypeScript";
firstName = "尼古拉斯"
lastName = "赵四";
hello() {
console.log(this.message);
}
get name(): string {
return this.firstName + "·" + this.lastName;
}
set name(val) {
const splitted = val.split(' ')
this.firstName = splitted[0]
this.lastName = splitted[1] || ''
}
created(): void {
console.log("created")
}
beforeCreate(): void {
console.log("beforeCreate")
}
mounted(): void {
console.log("mounted")
}
beforeMount(): void {
console.log("beforeMount")
}
destroyed(): void {
console.log("destroyed")
}
beforeDestroy(): void {
console.log("beforeDestroy")
}
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)