Vue3学习心得3-数据绑定

数据绑定的类型

1. v-bind
2. v-model

区别

v-bind的数据是从data到页面，v-model的数据是页面和data双通。

v-bind只写监听的属性，:src="url" :href="url"

v-model只表达监听的意思，v-model

因为v-model只监听输入类元素的固定属性，无需声明。

原文如下：

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

示例：

	<div id="v-model">
		<input type="text" v-model="url" placeholder="edit me"/>
		<br>
		<input type="text" v-bind:value="url"/>
		<br>
		<a v-bind:href="url"></a>
		<p>{{url}}</p>
	</div>

		let vm = Vue.createApp({
			data() {
				return{
					url: "http://www.baidu.com"
				}
			}
		}).mount("#v-model");