v-on 、v-bind 、v-model

v-on绑定html事件

v-on:click 缩写为 @click

<!-- 完整语法 -->
<a v-on:click="doSomething(tmp)">123</a>

<!-- 缩写 -->
<a @click="doSomething(tmp)">123</a>

new Vue({
	...
	methods:{
	doSomething(tmp){
	}
}
})

v-bind设置html属性

v-bind:href 缩写为 :href

<a v-bind:href="url">网络测试</a>  //v-bind绑定href。
new Vue({
	...
	data {
		url: "http://www.baidu.com"
		}
})

v-model动态双向绑定

只能用在input, textarea, select上

// HTML
// data的值和input输入同步更新
<input type="text" v-model="message">
new Vue({
	data {
		message: ' ', //最开始message为空
	} 
})

总结

• v-model进行数据data和页面html数据的双向绑定，即数据对数据的绑定
• v-bind 是html标签属性和数据data的绑定，即属性对数据的绑定
• v-on是methods对页面事件的绑定，即事件对接口的绑定