Nuxt/examples/vue-class-component/components/Base.vue

41 lines
701 B
Vue
Raw Normal View History

<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
2017-10-31 13:43:55 +00:00
mounted() {
this.greet()
}
// computed
2017-10-31 13:43:55 +00:00
get computedMsg() {
return 'computed ' + this.msg
}
// method
2017-10-31 13:43:55 +00:00
greet() {
console.log('base greeting: ' + this.msg) // eslint-disable-line no-console
}
}
</script>