Vue：v-model和v-bind的区别（转载）
v-model
我们可以使用 v-model 指令在 <input> (<input> 标签有多种类型，如 button、select 等等)及 <textarea> 元素上进行双向数据绑定。但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data选项中声明初始值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<title>vue</title>
</head>
<body>
<div id="app">
<input v-model="message">
<p>The input value is : {{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Word!'
}
})
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
那么输入框的初始值就是 Hello World! 。
实际上，由于v-model 只是语法糖， <input v-model="message"> 与下面的两行代码是一致的：
<input v-bind:value="message" v-on:input="message = $event.target.value" />
<input :value="message" @input="message = $event.target.value" />
1
2
v-bind
它的用法是后面加冒号，跟上html元素的属性，例如：
<p v-bind:class="someclass"></p>
1
如果不加 v-bind 那么 someclass 就是个常量，没有任何动态数据参与。当加上 v-bind 之后，它的值 someclass 不是字符串，而是vue实例对应的 data.someclass 这个变量。具体传入变量类型可参考 Class与Style绑定 。这非常适合用在通过css来实现动画效果的场合。除了class，其他大部分html原始的属性都可以通过这种方式来绑定，而且为了方便，它可以直接缩写成冒号形式，例如：
var app = Vue({
el: '#app',
template: '<img :src="remoteimgurl">',
data: { src: '', },
beforeMount() { fetch(...).then(...).then(res => this.src = res.remoteimgurl) },
})
1
2
3
4
5
6
上面这段代码中，默认情况下 data.src 是空字符串，也就说不会有图片显示出来，但是当从远端获取到图片地址之后，更新了 data.src，图片就会显示出来了。
v-bind与v-model区别
有一些情况我们需要 v-bind 和 v-model 一起使用：
<input :value="name" v-model="body">
1
data.name 和 data.body，到底谁跟着谁变呢？甚至，它们会不会产生冲突呢？
实际上它们的关系和上面的阐述是一样的，v-bind 产生的效果不含有双向绑定，所以 :value 的效果就是让 input的value属性值等于 data.name 的值，而 v-model 的效果是使input和 data.body 建立双向绑定，因此首先 data.body 的值会给input的value属性，其次，当input中输入的值发生变化的时候，data.body 还会跟着改变。
上文提到过下面两句是等价的：
<input v-model="message">
<input v-bind:value="message" v-on:input="message = $event.target.value" />
1
2
那么 v-model 其实就是 v-bind 和 v-on 的语法糖。看到此处，是不是豁然开朗呢？
---------------------
作者：transformer_WSZ
来源：CSDN
原文：https://blog.csdn.net/transformer_wsz/article/details/80245962
版权声明：本文为博主原创文章，转载请附上博文链接！
posted on 2018-12-29 16:33 Postgre叮当牛i 阅读(453) 评论(0) 编辑 收藏 举报
