Vue正式篇（一）番外 v-model和:model的区别？

v-model和:model的区别？
v-model通常用于input的双向数据绑定<input v-model="parentMsg">，也可以实现子组件到父组件数据的双向数据绑定。
父组件：

<div>
	<input type="text" v-model="msg">
	<child v-model='msg'></child>
</div>

子组件：

Vue.component('child', {
	props: ['value'],
	template: '<input type="text" @input="handleInput" :value=value />',
	methods: {
		handleInput(e) {
			console.log(e)
			this.$emit('input', e.target.value)
		}
	}
})
new Vue({
	el: '#example',
	data: {
		msg: '好天气',
		parentMsg: ''
	}
})

无论改变父组件还是子组件的输入框，value和msg的值都会改变，两个输入框的值也就同时改变了。

:model是v-bind:model的缩写，<child :model="msg"></child>这种只是将父组件的数据传递到子组件，并没有实现子组件和父组件的双向绑定，当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。