介绍
Vue.js 2支持类型组件. 如果您来自角度(2+)背景,您可能熟悉使用属性和装饰符来描述组件的更复杂部分的类型写组件的模式。
类型组件对标准 Vue.js 组件的最大优势是,它们使它更清晰地指出编译组件中的实际位置,并允许更简洁的代码。
在本文中,您将介绍如何使用vue-class-component和vue-property-decorator来支持 Vue.js 类组件中的 TypeScript。
前提条件
要跟随这篇文章,你将需要:
- Node.js 本地安装,您可以按照 如何安装 Node.js 和创建本地开发环境进行操作。
- 对 设置 Vue.js 项目和 单个文件组件的一些熟悉。
本教程已通过 Node v15.1.0、npm v6.14.8、Vue.js v2.6.11、TypeScript v3.9.3、@vue/cli v4.5.0、vue-class-component v7.2.3 和vue-property-decorator v8.4.2 进行验证。
步骤1 - 设置项目
您需要安装vue-class-component和vue-property-decorator。
您可以使用@vue/cli创建新的 Vue.js 项目:
1npx @vue/cli create vue-typescript-example
对于本教程的目的,配置将需要:
| Prompt | Option |
|---|---|
Please pick a preset | Manually select features |
Check the features needed for your project | TypeScript |
Use class-style component syntax? | Yes |
[@vue/-plugin-typescript](https://github.com/vuejs/vue-cli/blob/master/packages/@vue/cli-plugin-typescript/generator/index.js)将安装typescript,vue-class-component和vue-property-decorator`。
然后,导航到项目目录:
1cd vue-typescript-example
此时,您已为 TypeScript 和类型组件设置了 Vue.js 项目。
步骤 2 — 使用 TypeScript 编写单个文件组件
一个类组件是 TypeScript 的类,它扩展了Vue对象.在单个文件组件中,请确保您将<script>语言设置为ts,并将该类导出为默认。
在代码编辑器中打开App.vue,并使用TypeScript创建此示例单文件组件:
1[label src/App.vue]
2<template>
3 <div>
4 <label>Update myDataProperty
5 <input :value="myDataProperty" @input="updateMyProperty($event)"/>
6 </label>
7 <div>{{ myDataProperty }}</div>
8 </div>
9</template>
10
11<script lang="ts">
12import { Component, Vue } from 'vue-property-decorator'
13
14@Component
15export default class App extends Vue {
16 // Data property
17 myDataProperty: string = 'Data Property'
18
19 // Component method
20 updateMyProperty ($event: { target: { value: string } }) {
21 this.myDataProperty = $event.target.value
22 }
23}
24</script>
请注意,数据属性直接定义在类和方法上。
@Component(componentConfig)的装饰器使这一点成为可能,它将类变成Vue.js在编译过程中可以理解的格式。
在此时,如果你要在浏览器中编译和观察你的应用程序,你会被介绍一个输入字段和单词数据属性。
步骤 3 – 使用 Component Props
通过从vue-property-decorator中的@Prop(config)装饰器,您可以以与数据属性相同的方式声明输入属性。
以下是TypeScript中的一个例子,其中一个exampleProperty是具有Input Property的默认值的组件支持:
1[label src/App.vue]
2<template>
3 <div>{{ exampleProperty }}</div>
4</template>
5
6<script lang="ts">
7import { Component, Prop, Vue } from 'vue-property-decorator'
8
9@Component
10export default class App extends Vue {
11 @Prop({ default: 'Input Property' })
12 exampleProperty!: string
13}
14</script>
在 JavaScript 中,这相当于:
1export default {
2 props: {
3 exampleProperty: {
4 type: String,
5 default: 'Input Property'
6 }
7 }
8}
在此时,如果您要在浏览器中编译和观察您的应用程序,您将收到输入属性的信息。
步骤 4 – 使用计算属性
计算的属性在类上写为getters和setters。
以下是TypeScript中的一个例子,它得到一个myComputedProp`,并返回一个随机数:
1[label src/App.vue]
2<template>
3 <div>{{ myComputedProp }}</div>
4</template>
5
6<script lang="ts">
7import { Component, Vue } from 'vue-property-decorator'
8
9@Component
10export default class App extends Vue {
11 get myComputedProp() {
12 return Math.random()
13 }
14}
15</script>
在 JavaScript 中,这相当于:
1export default {
2 computed: {
3 myComputedProp() {
4 return Math.random()
5 }
6 }
7}
在这一点上,如果您要在浏览器中编译和观察您的应用程序,您将被呈现一个随机号码。
步骤5 - 使用观察员
可以使用「@Watch(propertyString, config)」裝飾機創建觀察者。
以下是 TypeScript 中的一个示例,它会监视myWatchedProperty触发onPropertyChanged时:
1[label src/App.vue]
2<template>
3 <div>
4 <label>Update myWatchedProperty
5 <input :value="myWatchedProperty" @input="updateMyProperty($event)"/>
6 </label>
7 <div>{{ myWatchedPropertyStatus }}</div>
8 </div>
9</template>
10
11<script lang="ts">
12import { Component, Watch, Vue } from 'vue-property-decorator'
13
14@Component
15export default class App extends Vue {
16 myWatchedProperty: string = 'Watched Property'
17 myWatchedPropertyStatus: string = ''
18
19 @Watch('myWatchedProperty')
20 onPropertyChanged(value: string, oldValue: string) {
21 this.myWatchedPropertyStatus = 'Watched Property Changed'
22 }
23
24 updateMyProperty ($event: { target: { value: string } }) {
25 this.myWatchedProperty = $event.target.value
26 }
27}
28</script>
在 JavaScript 中,这相当于:
1export default {
2 data() {
3 return {
4 myWatchedProperty: null
5 }
6 }
7
8 methods: {
9 onPropertyChanged(value, oldValue) {
10 // ...
11 }
12 }
13
14 watch: {
15 myWatchedProperty: {
16 handler: 'onPropertyChanged',
17 immediate: false,
18 deep: true
19 }
20 }
21}
在此时,如果您要在浏览器中编译和观察您的应用程序,您将被呈现一个输入字段. 更改输入值将显示消息 Watched Property Changed。
结论
在本文中,您了解如何使用vue-class-component和vue-property-decorator在 Vue.js 类组件中支持 TypeScript。
本文介绍了@Component,get和set。从vue-class-component获得的完整声明清单,请参阅官方文件(https://class-component.vuejs.org/)。
本文还介绍了@Prop和@Watch。从vue-property-decorator获得的装饰师的完整列表,请参阅官方文件。
如果您想了解更多关于 TypeScript 的信息,请参阅 我们的 TypeScript 主题页面以获取练习和编程项目。