| <!-- |
| * <template>: html-like syntax |
| * CSS-like inline style |
| * <style scoped>: only support single-class selector |
| * <script>: define the behavior of component |
| * :attr data-binding support |
| * @xxx syntax to bind event with a component method |
| --> |
| |
| <!-- |
| notes: |
| * <template> only could have just one child |
| * the text node is only allowed as the child of <text> as the shorthand of its `value` attribute |
| * the style is not inherited from parent (for example: `font-size`) |
| * <script> support ECMAScript 5 |
| * all component options assigns to `module.exports` |
| --> |
| |
| <template> |
| <div class="wrapper" @click="update"> |
| <image :src="logoUrl" class="logo"></image> |
| <text class="title">Hello {{target}}</text> |
| </div> |
| </template> |
| |
| <style scoped> |
| .wrapper {align-items: center; margin-top: 120px;} |
| .title {font-size: 48px;} |
| .logo {width: 360px; height: 82px;} |
| </style> |
| |
| <script> |
| module.exports = { |
| data: { |
| logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png', |
| target: 'World' |
| }, |
| methods: { |
| update: function (e) { |
| this.target = 'Weex' |
| console.log('target:', this.target) |
| } |
| } |
| } |
| </script> |