SOURCE

console 命令行工具 X clear

                    
>
console
Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
	
  template: '<input\
      type="checkbox"\
      v-bind:checked="checked"\
      v-on:change="$emit(\'change\', $event.target.checked)"\
    >'
})

Vue.component('base-input', {
  props: ['value'],
  template: '<input type="text"\
		v-bind:value="value"\
		v-on:input="$emit(\'input\', $event.target.value)"\
		>'
})

//异步组件
Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})


new Vue({
  el: '#demo1',
  data: {
    message: 'Hello Vue!',
		lovingVue: false
  },
	methods: {
		onFocus: function(event) {
			this.message = 'onfocus message'
		},
		onBlur: function(event) {
			this.message = 'onBlur message'
		}
	}
})

<div id="demo1">
	<div>Message: {{ message }}</div>
	<div>lovingVue: {{ lovingVue }}</div>
	<base-checkbox v-model="lovingVue" ></base-checkbox>
	<base-input v-model="lovingVue" v-on:focus.native="onFocus" v-on:blur.native="onBlur"></base-input>
	<async-example></async-example>
</div>