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({
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>