Nuxt/examples/vue-class-component/pages/index.vue

42 lines
706 B
Vue
Raw Normal View History

2017-04-14 14:47:21 +00:00
<template>
<div>
<input v-model="msg">
<p>msg: {{msg}}</p>
<p>env: {{env}}</p>
<p>computed msg: {{computedMsg}}</p>
<button @click="greet">Greet</button>
2017-04-17 16:15:55 +00:00
<p><nuxt-link to="/about">About page</nuxt-link></p>
2017-04-14 14:47:21 +00:00
</div>
</template>
<script>
import Vue from 'vue'
import Component from 'nuxt-class-component'
2017-04-17 16:15:55 +00:00
@Component()
2017-04-14 14:47:21 +00:00
export default class App extends Vue {
// initial data
msg = 123
asyncData ({ req }) {
return { env: req ? 'server' : 'client' }
}
// lifecycle hook
mounted () {
this.greet()
}
// computed
get computedMsg () {
return 'computed ' + this.msg
}
// method
greet () {
2017-04-17 16:15:55 +00:00
console.log('greeting: ' + this.msg)
2017-04-14 14:47:21 +00:00
}
}
</script>