Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit39c0be5

Browse files
committed
Moved class components to a dedicated page
1 parent51282d2 commit39c0be5

File tree

2 files changed

+59
-60
lines changed

2 files changed

+59
-60
lines changed

‎README.md

Lines changed: 0 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -87,66 +87,6 @@ const Component = defineComponent({
8787
});
8888
```
8989

90-
###Class Components
91-
[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components which integrates well with TypeScript.
92-
93-
To have consistent support for decorators in your Vue components, it's also recommended to install[vue-property-decorator](https://github.com/kaorun343/vue-property-decorator).
94-
95-
96-
To get started with both libraries in your existing Vue project, run:
97-
```
98-
npm install vue-class-component vue-property-decorator
99-
```
100-
101-
You only need to import`vue-property-decorator` into your`.vue` file as it extends`vue-class-component`.
102-
103-
You can now write TS in your components like this:
104-
105-
```vue
106-
<template>
107-
<div>
108-
{{ count }}
109-
<button v-on:click="increment">+</button>
110-
<button v-on:click="decrement">-</button>
111-
{{ computedValue }}
112-
</div>
113-
</template>
114-
115-
<script lang="ts">
116-
import { Vue, Component } from "vue-property-decorator";
117-
118-
@Component
119-
export default class Hello extends Vue {
120-
121-
count: number = 0
122-
vue: string = "vue"
123-
ts: string = "ts"
124-
125-
// Lifecycle methods can be accessed like this
126-
mounted() {
127-
console.log('component mounted')
128-
}
129-
130-
// Method are component methods
131-
increment(): void {
132-
this.count++
133-
}
134-
135-
decrement(): void {
136-
this.count--
137-
}
138-
139-
// Computed values are getters
140-
get computedValue(): string {
141-
return `${vue} and ${ts} rocks!`
142-
}
143-
}
144-
</script>
145-
```
146-
See the[full guide for Vue Class Components](https://class-component.vuejs.org/guide/class-component.html#data).
147-
148-
>_Class components should not confused with the now abandoned[Class API proposal](https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121)._
149-
15090
##Props
15191

15292
`PropType` can be used to annotate props with a particular object shape.

‎class-components.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
#Class Components
2+
[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components which integrates well with TypeScript.
3+
4+
To have consistent support for decorators in your Vue components, it's also recommended to install[vue-property-decorator](https://github.com/kaorun343/vue-property-decorator).
5+
6+
7+
To get started with both libraries in your existing Vue project, run:
8+
```
9+
npm install vue-class-component vue-property-decorator
10+
```
11+
12+
You only need to import`vue-property-decorator` into your`.vue` file as it extends`vue-class-component`.
13+
14+
You can now write TS in your components like this:
15+
16+
```vue
17+
<template>
18+
<div>
19+
{{ count }}
20+
<button v-on:click="increment">+</button>
21+
<button v-on:click="decrement">-</button>
22+
{{ computedValue }}
23+
</div>
24+
</template>
25+
26+
<script lang="ts">
27+
import { Vue, Component } from "vue-property-decorator";
28+
29+
@Component
30+
export default class Hello extends Vue {
31+
32+
count: number = 0
33+
vue: string = "vue"
34+
ts: string = "ts"
35+
36+
// Lifecycle methods can be accessed like this
37+
mounted() {
38+
console.log('component mounted')
39+
}
40+
41+
// Method are component methods
42+
increment(): void {
43+
this.count++
44+
}
45+
46+
decrement(): void {
47+
this.count--
48+
}
49+
50+
// Computed values are getters
51+
get computedValue(): string {
52+
return `${vue} and ${ts} rocks!`
53+
}
54+
}
55+
</script>
56+
```
57+
See the[full guide for Vue Class Components](https://class-component.vuejs.org/guide/class-component.html#data).
58+
59+
>_Class components should not confused with the now abandoned[Class API proposal](https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121)._

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp