| <!-- |
| * in root component `data` is an plain object |
| * in sub component `data` is a function which returns an plain object |
| * `computed` support a single getter or a getter/setter object |
| --> |
| |
| <template> |
| <div onclick="update"> |
| <text class="title">{{firstName}}</text> |
| <text class="title">{{lastName}}</text> |
| <text class="title">{{fullName}}</text> |
| <text class="title">{{today}}</text> |
| </div> |
| </template> |
| |
| <style> |
| .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>` |
| // module.exports = { |
| // data: function () { |
| // return { |
| // firstName: '', |
| // lastName: '' |
| // } |
| // } |
| // } |
| |
| module.exports = { |
| data: { |
| firstName: 'John', |
| lastName: 'Smith', |
| date: Date.now() |
| }, |
| methods: { |
| update: function () { |
| this.today = '2016-01-01' |
| } |
| }, |
| 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> |