文章目录
一、v-model与v-bind区别
v-model与v-bind区别：
1、v-bind是单向绑定，用来绑定数据和属性以及表达式，数据只能从data流向页面。
2、v-model是双向绑定，数据能从data流向页面，也能从页面流向data。
3、v-bind可以给任何属性赋值；v-model只能给具备value属性的元素进行数据双向绑定，如text、radio、checkbox、selected。
这个原因也很好理解，从页面流向data，v-model是捕获用户的输入值，如果没有value,捕获不了，所以这个流向没有意义，v-model就是收集value值。
二、v-bind
含义 : 单向绑定 , 数据只能从data流向页面
v-bind是一个通用指令，用于动态地绑定一个或多个属性，或者一个组件prop到表达式。
它可以绑定任何类型的属性，如class、style、href等。
语法格式通常是v-bind:属性名="表达式"或简写为:属性名=“表达式”。
例如，如果你想要动态绑定一个类名，可以使用:class=“className”。
<img :src="imageSrc" :class="className" />
使用示例：
<!-- 普通写法： -->
<a v-bind:href="school.url">点我去学习</a><br/>
<!-- 简写： -->
<a :href="school.url">点我去学习1</a>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:"tom",
school:{
name:"百度",
url:"http://www.baidu.com"
}
}
})
</script>
v-bind在使用时可以省略不写，直接写:即可，如上示例。
2.1、单向绑定示例
以上我们说v-bind是单向绑定，这是什么意思呢？以下结合代码示例一起看一下。
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id = "root">
<!-- 普通写法: -->
<!--
单向数据绑定：<input type="text" v-bind:value="name"/><br/>
双向数据绑定：<input type="text" v-model:value="name"/><br/> -->
<!-- 简写： -->
单向数据绑定：<input type="text" :value="name"/><br/>
双向数据绑定：<input type="text" v-model="name1"/><br/>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'单向绑定1',
name1:'双向绑定1'
}
})
</script>
</body>
</html>
在VSCode中运行代码后如下图：
从上面我们可以看到，更改data流中的值页面会同步更新，但是更改页面输入框中的值不会影响data流中的值，因此为单向绑定。
2.2、v-bind更多示例
v-bind:属性名 =“属性值”（简写 :属性名=“属性值”)
A. 绑定属性设置属性值
B. 可以绑定任意属性,可以多个属性
C. 属性值默认"变量名" 会自动查找data中的数据; 设置字符串不会自动查找
示列:
v-bind:dage='"age1"' 字符串
v-bind:dage='age' 变量
D. 属性名也可以是data中的数据
E. v-bind:属性=“属性值” 简写 :属性=“属性值”
F. v-bind是一个单向的数据绑定 data数据流向页面,页面不会流向data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="app" >
<p :dage='"age1"' >{
{name}}</p>
<!-- <img v-bind:src="url" alt=""> -->
<p :class="'red'">123123</p>
<a :[arrbu]="url1">百度</a>
</div>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
bol:false,
arrbu:"href",
url1:"https://www.baidu.com",
name: "pxr",
age: 18,
sex: "<h1>你好</h1>",
url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0721%252F96b34becj00rfc5k6001mc000hs0134g.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661002442&t=4b585da82705577206ee7bd27eec7d1c"
},
})
</script>
</body>
</html>
三、v-model
含义 : 双向绑定 , 数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
v-model多在表单中使用，在表单元素上创建双向绑定，根据控件类型选择正确的方法更新元素，可以绑定text、radio、checkbox、selected
如下示例：
<!-- 普通写法： -->
双向数据绑定：<input type="text" v-model:value="name"/><br/>
<!--简写： -->
双向数据绑定：<input type="text" v-model="name"/><br/>
3.1、双向绑定示例
以上我们说v-model是双向绑定，这是什么意思呢？以下结合代码示例一起看一下。
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id = "root">
<!-- 普通写法: -->
<!--
单向数据绑定：<input type="text" v-bind:value="name"/><br/>
双向数据绑定：<input type="text" v-model:value="name"/><br/> -->
<!-- 简写： -->
单向数据绑定：<input type="text" :value="name"/><br/>
双向数据绑定：<input type="text" v-model="name1"/><br/>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'单向绑定1',
name1:'双向绑定1'
}
})
</script>
</body>
</html>
在VSCode中运行代码后如下图：
3.2、v-model更多示例
收集表单数据：
- 若：
<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 - 若：
<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。 - 若：
<input type="checkbox"/> -
-
- 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
-
-
-
- 配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
- 配置input的value属性:
-
v-model的三个修饰符：
lazy：失去焦点再收集数据number：输入字符串转为有效的数字trim：输入首尾空格过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<body>
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码：<input type="password" v-model="userInfo.password"> <br/><br/>
年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br/><br/>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<br/><br/>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
</body>
</html>
运行代码后，在表单中输入内容后，开发者工具中可以看到data流中的数据变化了。
四、总结
以下是v-bind和v-model的主要区别：
- 用途不同：v-bind用于绑定任何类型的属性，而v-model专门用于处理表单元素的数据绑定。
- 语法糖：v-model是v-bind在表单元素上的一种语法糖，自动处理了输入事件和数据更新。
- 事件处理：使用v-model时，Vue会自动监听用户的输入事件（如input事件），并根据用户的输入更新数据。而使用v-bind时，你可能需要手动监听事件并更新数据。
- 修饰符：v-model支持一些修饰符，如.lazy、.number、.trim等，这些修饰符可以改变绑定数据的处理方式，而v-bind没有这些修饰符。
总的来说，v-model是Vue提供的一种简化表单元素数据绑定的方式，而v-bind则提供了更通用的数据绑定功能。