Vue数据双向绑定的实现方式讲解
目录
- 前言
- 一、input和textarea
- 二、radio和CheckBox
- 三、select
- 四、双向绑定的修饰符
前言
在web开发应用中，很多项目都会用到表格一列的组件进行数据的传输、获取和提交，在开发使用中，表格类组件数据的传输，我们一般可以使用v-model将输入的数据同步到data属性中，这个指令可以为不同的输入元素使用不同的属性，这个指令一般在form表单中的input等等元素上面来创建双向的数据绑定。
一、input和textarea
在vue实战项目中，vue里面的data属性可以和input、textarea元素进行数据绑定。简单的解释就是比如input这个事件被触发的时候，value里面的数据就可以将数据听不到Script里面的data数据中；当绑定的data数据发生改变的时候，也会实时的同步到value当中，从而就可以实现双向数据绑定。
我们可以通过代码进行验证，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>数据双向绑定</title>
</head>
<body>
<div id="app">
<p>姓名：
<input type="text" v-model="userInfo.xingming">
</p>
<p>邮箱：
<input type="text" v-model="userInfo.youxiang">
</p>
<p>简历：
<textarea name="" id="" cols="30" rows="10" v-model="userInfo.jianli"></textarea>
</p>
<p>姓名：{{userInfo.xingming}}</p>
<p>邮箱：{{userInfo.youxiang}}</p>
<p>简历：{{userInfo.jianli}}</p>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
userInfo:{
xingming:'',
youxiang:'',
jianli:"编写你的简历："
}
}
})
</script>
</body>
</html>
运行结果：
二、radio和CheckBox
在vue实战中，这两个元素也和input和textarea元素一样，都是和data属性一样，选择数据绑定，而且CheckBox就是多选元素，可以选择多个value，可以在data里面使用一个数组进行绑定。只要change事件得到触发，value属性可以同步到data里面；当绑定vue里面的数据改变的时候，就会同步到check里面，从而实现数据的双向绑定。我们还是通过简单的代码实例来看一下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>数据双向绑定</title>
</head>
<body>
<div id="app">
<p>性别：
<input type="radio" v-model="userinfo.sex" name="sex" value="男">男
<input type="radio" v-model="userinfo.sex" name="sex" value="女">女
</p>
<p>爱好：
<input type="checkbox" v-model="userinfo.hobby" value="唱"/>唱
<input type="checkbox" v-model="userinfo.hobby" value="跳"/>跳
<input type="checkbox" v-model="userinfo.hobby" value="rap"/>rap
<input type="checkbox" v-model="userinfo.hobby" value="篮球"/>篮球
</p>
<p>练习生与否：
<input type="checkbox" v-model="userinfo.lianxisheng" value="练习生">
</p>
<p>性别：{{userinfo.sex}}</p>
<p>爱好：{{userinfo.hobby}}</p>
<p>练习生与否：{{userinfo.lianxisheng}}</p>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
userinfo:{
sex:'男',
hobby:'【】',
lianxisheng:" "
}
}
})
</script>
</body>
</html>
三、select
select元素也是使用了value属性和vue里面的data属性进行属性绑定，当change事件触发的时候，value的值就会同步到vue里面的数据，当绑定的vue数据改变的时候，也会同步到value，也从而实现数据的双向绑定。代码实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>数据双向绑定</title>
</head>
<body>
<div id="app">
<p>学历：
<select name="" id="" v-model="xueli">
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
<option value="博士后">博士后</option>
</select>
</p>
<p>{{xueli}}</p>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
xueli:"本科"
}
})
</script>
</body>
</html>
结果：
四、双向绑定的修饰符
这里介绍几个双向绑定的数据修饰符。
1、lazy
默认情况下， v-model在每次innut事件触发后将输入框的值与数据进行同步;添加lazy后，只有在enter和输入框（失焦点）的时候，数据才能实现同步。
2、number
如果要将用户的输入值自动地转为数字类型，可以给 v-model添加.number修饰但v-model.number 只能输入数字
3、trim
如果要自动地过滤用户输入的首尾空白字符，可以给 v-model添加.trim 修饰符,V-model.trim可以去除前后空格。
我们还还还是通过代码实例来简单的了解一下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>数据双向绑定</title>
</head>
<body>
<div id="app">
<h1>1、数据：{{val1}}</h1>
<input type="text" v-model.lazy="val1">
<h1>2、数据：{{val2}}</h1>
<input type="text" v-model.number="val2">
<h1>3、数据：{{val3}}</h1>
<input type="text" v-model.trim="val3">
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var m = {
val1:1,
val2:2,
val3:''
};
var vm = new Vue({
el:'#app',
data:m,
})
</script>
</body>
</html>
运行结果：
在第一个框输入数据的时候，输入框的值和数据因为没有数据和它进行同步显示，所以当光标移到第二个框的时候，第一个框就会引起失焦，这个时候就可以显示出原本输入的文字，因为lazy只有在enter和失焦的时候，数据才能进行同步；在第二个框每次输入输入一个数值就可以同步显示；第三个先是输入几个空格，然后在输入数值，只有数值才能同步，而输入的空格就会呗忽视掉，因为trim可以去除前后空格。
到此这篇关于Vue数据双向绑定的实现方式讲解的文章就介绍到这了,更多相关Vue数据双向绑定内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
浅谈Vue的双向绑定和单向数据流冲突吗
目录 前言 单向绑定 vs 双向绑定 单向数据流 vs 双向数据流 为什么说v-model只是语法糖 总结 参考资料 前言 众所周知,Vue中更加推荐单向数据流的状态管理模式(比如Vuex),但Vue同时支持通过v-model实现双向数据绑定.那么问题来了,单项数据流和双向数据绑定的概念,这两种不是相互冲突的吗?即然能用v-model双向数据绑定,不应该就是双向数据流了吗? 本文主要包括以下内容 单向绑定 vs 双向绑定 单向数据流 vs 双向数据流 为什么说v-model只是语法糖 单向绑定
-
Vue双向数据绑定与响应式原理深入探究
目录 一.双向数据绑定和数据响应式是相同的吗 二.双向数据绑定的原理 三.数据响应式的原理与实现 一.双向数据绑定和数据响应式是相同的吗 不相同,原因如下: 响应式是指通过数据区驱动DOM视图的变化,是单向的过程. 双向数据绑定就是无论用户更新View还是Model,另一个都能跟着自动更新. 例如:当用户填写表单时,View的状态就被更新了,如果此时可以自动更新Model的状态,那就相当于我们把Model和View做了双向绑定. 双向数据绑定的数据和DOM是一个双向的关系. 响应式是双向绑定的一
-
Vue响应式原理及双向数据绑定示例分析
目录 前言 响应式原理 双向数据绑定 前言 之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是Vue,所以免不了问到其响应式原理和Vue的双向数据绑定.但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数据绑定原理,来面试的同学大都会认为是一回事,那么这里我们就说一下二者的区别. 响应式原理 是Vue的核心特性之一,数据驱动视图,我们修改数据视图随之响应更新,就很优雅~ Vue2.x是借助Object.defineProperty()实现的,而Vue3.x是借助
-
vue实现简单数据双向绑定
本文实例为大家分享了vue实现简单数据双向绑定的具体代码,供大家参考,具体内容如下 这里是简单的实现,有助于新手理解消化,当然vue要实现双向数据代理不可缺少,期待后续在更新 vue双向数据绑定 -> Object.defineProperty() //2.0核心语法 -> 数据代理 -> 双向绑定 -> 订阅发布模式 compile-> 模版解析 (template模版 html 指令 {{表达式}}) observer-> 观察者(订阅发布) data里的所有的属性
-
vue2与vue3双向数据绑定的区别说明
目录 vue2与vue3双向数据绑定区别 Vue2双向数据绑定存在的问题 原理 vue3.0双向数据绑定Proxy vue语法:数据的双向绑定 1.指令v-model 2.v-model与修饰符 3.v-model与自定义组件 vue2与vue3双向数据绑定区别 新的响应式机制采用了ES6的ProxyApi,抛弃了Object.defineProperty() Vue2双向数据绑定存在的问题 关于对象: Vue 无法检测 property 的添加或移除.由于 Vue 会在初始化实例时对prope
-
vue双向数据绑定指令v-model的用法
目录 基本使用 响应式 v-model数据双向绑定步骤 响应式 v-model简易实现原理 v-model,被称为双向数据绑定指令,就是Vue实例对数据进行修改,页面会立即感知,相反页面对数据进行修改,Vue内部也会立即感知. v-model 是vue中唯一实现双向数据绑定的指令. v-bind(单向)数据绑定,Vue实例修改数据,页面会感知到,相反页面修改数据Vue实例不能感知. v-model(双向)数据绑定,页面修改数据,Vue实例会感知到,Vue实例修改数据,页面也会感知到. 基本使用
-
深入了解Vue中双向数据绑定原理
目录 数据的变化反应到视图 命令式操作视图 声明式操作视图 小结 视图的变化反应到数据 现存的问题 数据的变化反应到视图 前面我们了解到数据劫持之后,我们可以在数据发生修改之后做任何我们想要做的事情,操作视图当然也是OK的 命令式操作视图 目标:我们通过原始的操作dom的方式让每一次的name的最新值都能显示到p元素内部 <div id="app"> <p></p> </div> <script> let data = { n
-
Vue数据双向绑定的实现方式讲解
目录 前言 一.input和textarea 二.radio和CheckBox 三.select 四.双向绑定的修饰符 前言 在web开发应用中,很多项目都会用到表格一列的组件进行数据的传输.获取和提交,在开发使用中,表格类组件数据的传输,我们一般可以使用v-model将输入的数据同步到data属性中,这个指令可以为不同的输入元素使用不同的属性,这个指令一般在form表单中的input等等元素上面来创建双向的数据绑定. 一.input和textarea 在vue实战项目中,vue里面的data属
-
Vue数据双向绑定原理及简单实现方法
Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一.示例 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 二.实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的. 1)数据劫持.vue是通过Object.defineProperty()来实现数据劫持
-
Vue数据双向绑定原理实例解析
Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的,首先是对数据进行监听,然后当监听的属性发生变化时则告诉订阅者是否要更新,若更新就会执行对应的更新函数从而更新视图 MVC模式 以往的MVC模式是单向绑定,即Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新 MVVM模式 MVVM模式就是Model–View–ViewModel模式.它实现了View的变动,自动反映在 ViewModel,反之亦然.对于双向绑定的理解,就是用户更
-
理解Proxy及使用Proxy实现vue数据双向绑定操作
1.什么是Proxy?它的作用是? 据阮一峰文章介绍:Proxy可以理解成,在目标对象之前架设一层 "拦截",当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种机制,类似于代理的含义,它可以对外界访问对象之前进行过滤和改写该对象. 如果对vue2.xx了解或看过源码的人都知道,vue2.xx中使用 Object.defineProperty()方法对该对象通过 递归+遍历的方式来实现对数据的监控的,具体了解 Object.defineProperty可以看我上一篇文
-
vue 数据双向绑定的实现方法
1. 前言 本文适合于学习Vue源码的初级学者,阅读后,你将对Vue的数据双向绑定原理有一个大致的了解,认识Observer.Compile.Wathcer三大角色(如下图所示)以及它们所发挥的功能. 本文将一步步带你实现简易版的数据双向绑定,每一步都会详细分析这一步要解决的问题以及代码为何如此写,因此,在阅读完本文后,希望你能自己动手实现一个简易版数据双向绑定. 2. 代码实现 2.1 目的分析 本文要实现的效果如下图所示: 本文用到的HTML和JS主体代码如下: <div id="ap
-
Vue数据双向绑定底层实现原理
简介: Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.简单的说,就是数据变视图变. 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不
-
Vue数据双向绑定的深入探究
前言 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东西,现在用不着了,对开发者来说更容易去注重对操作逻辑的思考和实现,省了不少事儿呢!!! 我是直接从原生js,jq的开发用过度到使用vue,对这个框架也是喜爱有加,闲来无事,去看了看它的一些实现原理. vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也算
-
vue数据双向绑定原理解析（get & set)
前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通过事件回调函数操作的,model到view的绑定有多种方法. angular,react,vue等mv*模式的框架都实现了数据双向绑定:angular是通过脏检查即新老数据的比较来确定哪些数据发生了变化,从而将它更新到view中:vue则是通过设置数据的get和set函数来实现的,这种方式在性能上是
-
vue数据双向绑定的注意点
最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules="rules" ref="addClass"> <el-form-item label="表单分类名称" prop="NAME" :label-width="formLabelWidth"> &
-
详解vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图来吸引各位: 代码: 效果图: 是不是看起来跟vue的使用方式差不多?接下来就来从原理到实现,从简到难一步一步来实现这个SelfVue.由于本文只是为了学习和分享,所以只是简单实现下原理,并没有考虑太多情况和设计,如果大家有什么建议,欢迎提出来. 本文主要介绍两大内容: 1. vue数据双向绑定的原