内容纲要

[code language=”html”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-ts</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>

[/code]

man.ts
[code language=”js”]
import Vue from ‘vue’
import App from ‘./App.vue’

new Vue({
el: ‘#app’,
render: h => h(App)
})

[/code]

App.vue, 使用 Component 定义组件
[code language=”js”]

<script lang="ts">
import Vue from ‘vue’;
import Component from ‘vue-class-component’;

@Component({
template: `
<div>
<input type="text" v-model="name" />
<button @click="sayHello(name)">Say Hello!</button>
</div>
`
})
export default class App extends Vue {
name: string = ‘Paul’;

mounted() {
console.log(`Mounted: Hello ${this.name}`);
}

created() {
console.log(`Created: Hello ${this.name}`)
}

sayHello(name: string): void {
alert(`Hello ${name}`)
}
}
</script>
[/code]

修改过的 App.vue,使用 Component 定义组件,使用 Prop 暴露属性

[code language=”js”]

<script lang="ts">
import Vue from ‘vue’;
import { Component, Prop } from ‘vue-property-decorator’;

@Component({
template: `
<div>
<input type="text" v-model="name" />
<button @click="sayHello(name)">Say Hello!</button>
<p>{{nameReversed}}</p>
</div>
`
})
export default class App extends Vue {
@Prop({ default: ‘Paul ‘ }) name: string;

// Computed values
get nameReversed() {
return this.name.split("").reverse().join("");
}

sayHello(name: string): void {
alert(`Hello ${name}`)
}
}
</script>
[/code]

发表评论

电子邮件地址不会被公开。 必填项已用*标注