Vue中的v-model，v-bind，v-on的区别解析
作者：起个名字好难__
vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合，vue.js有配套的第三方类库，可以整合起来做大型项目的开发，这篇文章主要介绍了v-model，v-bind，v-on的区别,需要的朋友可以参考下
v-model
v-model是进行动态双向绑定的（只能用在input, textarea, select上），以input为例，进行绑定后，vue对象中data的相应值会与input的输入同步变动。
// HTML
<input type="text" v-model="message">
new Vue({
data {
message: ' ', //最开始message为空
}
})如果我们在input的输入框输入“打游戏”，则在data中message属性的值也会变为“打游戏”。
<input type="text" v-model="message"> / /在input中输入：打游戏
data {
message: '今天好困 ', // 此时message中数据自动更新为"打游戏"
}v-bind（缩写为 : ）
通常来说，当我们需要给一个<a href=""></a>标签赋值时，可以直接给href属性赋上相应的地址即可，但是这样，往往会导致代码不灵活。为了使得标签的一些属性可以动态的改变，我们可以在这些标签加上v-bind属性。
当data中url属性改变后，相应的，<a></a>标签的href值也会改变。
<a v-bind:href="url" rel="external nofollow" >网络测试</a> //v-bind绑定href。
new Vue({
...
data {
url: "http://www.baidu.com"
}
})类似的，对于其他标签，我们可以将标签中的属性值与vue对象中data相应的值绑定。如下列代码中的，class属性绑定isPlaying，src属性绑定picUrl
<div class="player_con" :class="{playing:isPlaying}">
<img src="images/player_bar.png" class="play_bar" />
<img :src="picUrl" class="cover autoRotate" />
</div>
new Vue({
...
data {
isPlaying: true,
picUrl:"www.xxx.com"
}
})v-on（缩写为@）
v-on属性绑定是HTML事件，例如：
<!-- 完整语法 -->
<a v-on:click="doSomething(tmp)">123</a>
<!-- 缩写 -->
<a @click="doSomething(tmp)">123</a>
new Vue({
...
methods:{
doSomething(tmp){
}
}
})总结
总结来说，v-model用来进行data数据与页面数据的双向绑定。即数据对数据绑定。v-bind是data数据对页面标签中属性的绑定，即属性对数据绑定。v-on，是methods对页面事件的绑定，即事件对接口（methods）的绑定
到此这篇关于v-model，v-bind，v-on的区别的文章就介绍到这了,更多相关v-model，v-bind，v-on内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！