examples/vue/syntax/script-data.vue

<!--
  * in root component `data` is an plain object
  * in sub component `data` is a function which returns an plain object
  * `data` means (internal) data
  * `props` means external data, only used in sub components
  * `props` could be set from parent by an attribute with the same name
  * `props` cound be a string array or an object
  * `props` object may have `type`, `default`
  * `computed` support a single getter or a getter/setter object
-->

<template>
  <div @click="update">
    <text class="title">{{firstName}}</text>
    <text class="title">{{lastName}}</text>
    <text class="title">{{fullName}}</text>
    <text class="title">{{today}}</text>
  </div>
</template>

<style scoped>
  .title {font-size: 48px;}
</style>

<script>
  // // if this is a sub component and the parent component could set `firstName` and `lastName` by:
  // // `<subcomponent first-name="John" last-name="Smith"></subcomponent>`
  // // but the `date` won't be changed from parent component
  // module.exports = {
  //   props: ['firstName', 'lastName'],
  //   data: function () {
  //     return {
  //       date: Date.now()
  //     }
  //   }
  // }

  // // more `props` formats like
  // module.exports = {
  //   props: {
  //     firstName: {
  //       default: 'John'
  //     },
  //     lastName: {
  //       type: String,
  //       default: 'Smith'
  //     }
  //   },
  //   data: function () {
  //     return {
  //       date: Date.now()
  //     }
  //   }
  // }

  module.exports = {
    data: function () {
      return {
        firstName: 'John',
        lastName: 'Smith',
        date: Date.now()
      }
    },
    methods: {
      update: function () {
        this.today = '2016-01-01'
        console.log('today:', this.today)
      }
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      },
      today: {
        get: function () {
          return new Date(this.date).toDateString()
        },
        set: function (v) {
          this.date = Date.parse(v)
        }
      }
    }
  }
</script>