SOURCE

Vue.component('button-counter', {
  data: function() {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})


//组件使用v-model
Vue.component('custom-input', {
  props: ['value'],
  template: '<input type="text"\
		v-bind:value="value"\
		v-on:input="$emit(\'input\', $event.target.value)"\
		>'
})

//通过插槽分发内容
Vue.component('alert-box', {
  template: '\
    <div class="demo-alert-box">\
      <strong>Error!</strong>\
      <slot></slot>\
    </div>\
  '
})

new Vue({
  el: '#components-demo',
  data: {
    searchText: 'aaa'
  }
})

Vue.component('blog-post', {
  props: ['post'],
  methods: {
    test: function() {
      alert(2000)
    }
  },
  template: '<div class="blog-post">\
      <h3>{{ post.title }}</h3>\
      <button v-on:click="$emit(\'enlarge-text\')">\
        Enlarge text\
      </button>\
			<button v-on:click="$emit(\'reduce-text\', 0.2)">\
        Reduce text\
      </button>\
			<button v-on:click="$emit(\'demo-event\')">\
        Demo event\
      </button>\
			<button v-on:click="test">\
        打印\
      </button>\
      <div v-html="post.content"></div>\
    </div>'

})

new Vue({
  el: '#blog-post-demo',
  data: {
    postFontSize: 1,
    posts: [{
      id: 1,
      title: 'My journey with Vue'
    },
    {
      id: 2,
      title: 'Blogging with Vue'
    },
    {
      id: 3,
      title: 'Why Vue is so fun'
    }]
  },
  methods: {
    getFontSize: function() {
      alert(this.postFontSize)
    }
  }
})

<div id="components-demo">
  <button-counter>
  </button-counter>
  <button-counter>
  </button-counter>
  <custom-input v-model="searchText">
  </custom-input>
	<div>{{ searchText }}</div>

	<!--<input type="text" v-model="searchText"></input>-->
</div>

<div id="blog-post-demo" :style="{ fontSize: postFontSize + 'em' }">
  <p>
    fontsize: {{ postFontSize }}
  </p>
  <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"
  v-on:enlarge-text="postFontSize += 0.2" v-on:reduce-text="postFontSize -= $event"
  v-on:demo-event="getFontSize">
  </blog-post>
  <button v-on:click="getFontSize">
    获取字体大小
  </button>
</div>