data
<script lang="ts">
import { Component, Vue } from 'vue-prototype-decorator'
@Component
export default App extends Vue {
private msg = 'hello ts'
private arr = [1, 2, 3]
}
</script>
类比js
<script>
export default {
data() {
return {
msg: 'hello ts',
arr: [1, 2, 3]
}
}
}
</script>
component
<script lang="ts">
import { Component, Vue } from 'vue-prototype-decorator'
import UserInfo from '@/components/UserInfo'
@Component({
'user-info': UserInfo
})
export default App extends Vue {
}
</script>
类比js
<script>
import UserInfo from '@/components/UserInfo'
export default {
components: {
'user-info': UserInfo
}
}
</script>
props
<script lang="ts">
import { Component, Vue, Prop } from 'vue-prototype-decorator'
@Component
export default App extends Vue {
@Prop(String)
prop1!: string
@Prop([String, Boolean])
prop2!: stirng | boolean | undefined
@Prop({ default: 'hello ts' })
prop3!: string
@Prop({ required: true })
prop4!: number
@Prop({ default: () => [] })
prop5!: number[]
}
</script>
类比js
<script>
export default {
props: {
prop1: String,
prop2: {
type: [String, Boolean]
},
prop3: {
type: String,
default: 'hello ts'
},
prop4: {
type: Number,
required: true
},
prop5: {
type: Array,
default: () => []
}
}
}
</script>
methods
<script lang="ts">
import { Component, Vue } from 'vue-prototype-decorator'
@Component
export default App extends Vue {
getUserInfo(userId: number) {
return {
userName: 'ts',
age: 20
}
}
}
</script>
类比js
<script>
import UserInfo from '@/components/UserInfo'
export default {
methods: {
getUserInfo(userId) {
return {
userName: 'ts',
age: 20
}
}
}
}
</script>
computed
<script lang="ts">
import { Component, Vue } from 'vue-prototype-decorator'
@Component
export default App extends Vue {
list = [1, 2, 3]
get listLength() {
return this.list.length
}
}
</script>
类比js
<script>
import UserInfo from '@/components/UserInfo'
export default {
data() {
return {
list: [1, 2, 3]
}
},
computed: {
listLength() {
return this.list.length
}
}
}
</script>
created/mounted/...
<script lang="ts">
import { Component, Vue } from 'vue-prototype-decorator'
@Component
export default App extends Vue {
created() {
// ...
}
}
</script>
类比js
<script>
import UserInfo from '@/components/UserInfo'
export default {
created() {
// ...
}
}
</script>
watch
<script lang="ts">
import { Component, Vue, Watch } from 'vue-prototype-decorator'
@Component
export default App extends Vue {
@Watch('name')
onNameChanged(val: string, oldVal: string) {
// ...
}
@Watch('user', { deep: true, immediate: true })
onUserChange(val: obj, oldVal: obj) {
// ...
}
}
</script>
类比js
<script>
import UserInfo from '@/components/UserInfo'
export default {
watch: {
name(val, oldVal) {
// ...
},
user: {
handler: 'onUserChange',
deep: true,
immediate: true
}
},
methods: {
onUserChange(val, oldVal) {}
}
}
</script>
