vue中的双向数据绑定以及其实现基本原理

最新推荐文章于 2024-04-22 09:07:57 发布

张小囧！冲呀！

最新推荐文章于 2024-04-22 09:07:57 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： vue javascript html js

本文链接：https://blog.csdn.net/zhangxiaojiong_zh/article/details/105947906

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1. 什么是双向数据绑定

在vue中，我们使用v-model=‘msg’ ,msg定义在数据属性data中，以此来实现双向数据绑定。在vue中，我们使用数据驱动视图，即data=>view，但使用v-model后，视图层更新后的msg可以再传给data，即view=>data，这个时候更新后的data又能驱动其它视图，即data=>view_other。总的来说，数据流的走向是data=>view=>data=>view_other。可见数据的走向是双向的，因此v-model实现了双向数据绑定的功能。需要特别注意的是，v-model只能在包含value属性的标签中使用。

2. v-model的简单实现

v-model的实现主要基于v-bind:value以及v-on:input两个指令。具体实现见如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="uft-8">
		<title>Vue的双向绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 即使用v-bind:value对Input的value属性进行绑定
			若是手动修改input中的值，p中的内容并不会随之变化，因为View中的值没法修改到data中去
		-->
			<div class='div1'>
				<input type="text" :value="msg1">   
				<p>{{msg1}}</p>
			</div>
			
			<!-- v-model的使用则可以实现双向的绑定，首先data数据渲染到view层，再是view层的修改渲染到data层，因此最新的data数据又使得新的view发生改变，但是v-model实现双向绑定只能在标签包含Value属性的情况下才能实现
		-->
			<div class='div2'>
				<input type="text" v-model="msg2">
				<p>{{msg2}}</p>
			</div>
			
			<!-- v-model的具体实现是依靠v-bind:value=""以及v-on:input=""来实现的,input事件调用的方法会将view中最新的内容赋值给Vue对象中的数据属性，因此整个view中使用了该数据属性的标签对应的内容也发生了改变
		-->
			<div class='div3'>
				<input type="text" :value="msg3" @input="changeHandler">
				<p>{{msg3}}</p>
			</div>
		</div>
		<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data:function() {
					return {
						msg1:"张三",
						msg2:"李四",
						msg3:"王五"
					}
				}, 
				methods:{
					changeHandler:function(e) {
						this.msg3 = e.target.value  //e.target指向的是input元素，this指向的是实例化后的Vue
					}	
				},
			}) 
		</script>
	</body>
</html>

以上代码对应的页面结果如下，'xx’为手动输入页面输入框中的内容，可见v-bind:value和v-on:input的配合使用与v-model实现的效果一致，都成功让data中的数据得到更新，更新后的data再重新驱动页面，最终得出以下效果
在这里插入图片描述

张小囧！冲呀！

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue中的双向数据绑定以及其实现基本原理

1. 什么是双向数据绑定在vue中，我们使用v-model=‘msg’ ,msg定义在数据属性data中，以此来实现双向数据绑定。在vue中，我们使用数据驱动视图，即data=>view，但使用v-model后，视图层更新后的msg可以再传给data，即view=>data，这个时候更新后的data又能驱动其它视图，即data=>view_other。总的来说，数据流的走向是d...
复制链接

扫一扫