mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-30 23:32:38 +00:00
feat: improve vue-class-component example
This commit is contained in:
parent
f8bc7e2383
commit
2f670c5ef7
40
examples/vue-class-component/components/Base.vue
Normal file
40
examples/vue-class-component/components/Base.vue
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input v-model="msg">
|
||||||
|
<p>msg: {{msg}}</p>
|
||||||
|
<p>env: {{env}}</p>
|
||||||
|
<p>computed msg: {{computedMsg}}</p>
|
||||||
|
<button @click="greet">Greet</button>
|
||||||
|
<p><nuxt-link to="/about">About page</nuxt-link></p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Component from 'nuxt-class-component'
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
props: {
|
||||||
|
env: String
|
||||||
|
}
|
||||||
|
})
|
||||||
|
export default class Base extends Vue {
|
||||||
|
// initial data
|
||||||
|
msg = 123
|
||||||
|
|
||||||
|
// lifecycle hook
|
||||||
|
mounted () {
|
||||||
|
this.greet()
|
||||||
|
}
|
||||||
|
|
||||||
|
// computed
|
||||||
|
get computedMsg () {
|
||||||
|
return 'computed ' + this.msg
|
||||||
|
}
|
||||||
|
|
||||||
|
// method
|
||||||
|
greet () {
|
||||||
|
console.log('base greeting: ' + this.msg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
23
examples/vue-class-component/components/Child.vue
Normal file
23
examples/vue-class-component/components/Child.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input v-model="msg">
|
||||||
|
<p>msg: {{msg}}</p>
|
||||||
|
<p>env: {{env}}</p>
|
||||||
|
<p>computed msg: {{computedMsg}}</p>
|
||||||
|
<button @click="greet">Greet</button>
|
||||||
|
<p><nuxt-link to="/about">About page</nuxt-link></p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Component from 'nuxt-class-component'
|
||||||
|
import Base from '@/components/Base'
|
||||||
|
|
||||||
|
@Component
|
||||||
|
export default class Child extends Base {
|
||||||
|
// override parent method
|
||||||
|
greet () {
|
||||||
|
console.log('child greeting: ' + this.msg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
@ -1,3 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
<h1>About</h1>
|
<h1>About</h1>
|
||||||
|
<p><nuxt-link to="/">Home page</nuxt-link></p>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -1,41 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<Child :env="env" ></Child>
|
||||||
<input v-model="msg">
|
|
||||||
<p>msg: {{msg}}</p>
|
|
||||||
<p>env: {{env}}</p>
|
|
||||||
<p>computed msg: {{computedMsg}}</p>
|
|
||||||
<button @click="greet">Greet</button>
|
|
||||||
<p><nuxt-link to="/about">About page</nuxt-link></p>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import Component from 'nuxt-class-component'
|
import Component from 'nuxt-class-component'
|
||||||
|
import Child from '@/components/Child'
|
||||||
|
|
||||||
@Component()
|
@Component({
|
||||||
|
components: { Child }
|
||||||
|
})
|
||||||
export default class App extends Vue {
|
export default class App extends Vue {
|
||||||
// initial data
|
|
||||||
msg = 123
|
|
||||||
|
|
||||||
asyncData ({ req }) {
|
asyncData ({ req }) {
|
||||||
return { env: req ? 'server' : 'client' }
|
return { env: req ? 'server' : 'client' }
|
||||||
}
|
}
|
||||||
|
|
||||||
// lifecycle hook
|
|
||||||
mounted () {
|
|
||||||
this.greet()
|
|
||||||
}
|
|
||||||
|
|
||||||
// computed
|
|
||||||
get computedMsg () {
|
|
||||||
return 'computed ' + this.msg
|
|
||||||
}
|
|
||||||
|
|
||||||
// method
|
|
||||||
greet () {
|
|
||||||
console.log('greeting: ' + this.msg)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user