03.create-vue-component.md

Create vue component

No more talking.

<!-- my-component.vue -->

<template lang="pug">
  div.my-component
    data-table
    image-uploader
</template>

<style lang="stylus" scoped>
  .my-component
    margin: 10px
</style>

<script lang="ts" src="./my-component.ts"></script>

// my-component.ts

import Vue from 'vue'
import { Component, Prop, Watch } from '@vert/core'

import DataTable from './components/data-table.vue'

@Component({
  components: {
    DataTable,
    ImageUploader: () => import('./image-uploader.vue')
  }
})
export default class MyComponent extends Vue {
  @Prop({
    type: String,
    default: '--'
  })
  private readonly name: string

  @Watch('name')
  private onWatchName (value: string, oldValue: string) {
    // ...
  }

  private age: number = 0
  private hobbies: string[] = []
  
  private currentPage: number = 1
  private totalPage: number = 1
  
  private get computedAge() {
    return this.age
  }
  private set computedAge(age) {
    this.age = age / 2
  }

  created () {
    // ...
  }

  mounted () {
    // ...
  }

  beforeDestroy () {
    // ...
  }
}