vue双向数据绑定指令v-model的用法
目录
- 基本使用
- 响应式
- v-model数据双向绑定步骤
- 响应式
- v-model简易实现原理
v-model，被称为双向数据绑定指令，就是Vue实例对数据进行修改，页面会立即感知，相反页面对数据进行修改，Vue内部也会立即感知。
v-model 是vue中唯一实现双向数据绑定的指令。
v-bind(单向)数据绑定，Vue实例修改数据，页面会感知到，相反页面修改数据Vue实例不能感知。v-model(双向)数据绑定，页面修改数据，Vue实例会感知到，Vue实例修改数据，页面也会感知到。
基本使用
语法：
<标签 v-model="data成员"></标签>
注意：
- 1.v-model只针对value属性可以绑定，因此经常用在form表单标签中，例如input(输入框、单选按钮、复选框)/select(下拉列表)/textarea(文本域)，相反div、p标签不能用。
- 2.v-model只能绑定data成员，不能设置其他表达式，否则错误。
- 3.v-model绑定的成员需提前在data中声明好。
示例代码：
<div id="app">
<p>{{ city }}</p>
<p><input type="text" :value="city"></p>
<p><input type="text" v-model="city"></p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
city:'北京'
},
})
</script>
- v-model对应的city发生变化后，其他的{{ }} 和 :value的值也会发生变化。
响应式
v-model数据双向绑定步骤
1.页面初始加载，vue实例的data数据渲染给页面的div容器。
2.页面通过v-model修改绑定数据，修改的信息会直接反馈给vue内部的data数据。
3.vue的data数据发生变化，页面上(也包括Vue实例本身)用到该数据的地方会重新编译渲染。
2和3步骤在条件满足情况下会重复执行。
响应式
vue实例的data数据如果发生变化，那么页面上(或Vue实例内部其他场合)用到该数据的地方会重新编译执行，这样就把更新后的内容显示出来了，这个过程就是“响应式”，即上面步骤3。
如果Vue实例内部对变化的数据有使用，也会同步更新编译执行。
注意：响应式是Vue中非常重要的机制。
v-model简易实现原理
给input输入框中定义oninput事件，在该事件中把用户输入的信息都给随时获得到，并对data成员进行赋值，
data成员变化了，页面上用到数据的地方就重新渲染，达成简易双向绑定的效果。
oninput：是事件，可以随时感知输入框输入的信息。
具体设置：
<div id="app">
<h2>v-model简易原理</h2>
<p>{{city}}</p>
<p><input type="text" :value="city"></p>
<hr />
<!-- 事件@xxx="方法名称/js语句" -->
<!-- $event:在vue的事件被绑定元素的行内部，代表事件对象 -->
<p><input type="text" :value="city" @input="city = $event.target.value"></p>
<p><input type="text" :value="city" @input="feel"></p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
city:'北京'
},
methods:{
feel(evt){
// console.log(evt) // InputEvent输入键盘事件对象
// evt.target: 触发当前事件的元素节点dom对象(类似document.getElementById()的返回结果)
// console.dir(evt.target)
// console.log(evt.target.value) // evt.target.value 获得输入框当前输入的信息
// 把输入框已经输入的信息赋予给city
this.city = evt.target.value
}
}
})
</script>
注意：
1.事件声明没有小括号()，第一个形参就是 事件对象。
2.在元素行内事件驱动中可以直接使用$event,其也是事件对象。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
浅谈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要实现双向数据代理不可缺少,期待后续在更新 vue双向数据绑定 -> Object.defineProperty() //2.0核心语法 -> 数据代理 -> 双向绑定 -> 订阅发布模式 compile-> 模版解析 (template模版 html 指令 {{表达式}}) observer-> 观察者(订阅发布) data里的所有的属性
-
深入了解Vue中双向数据绑定原理
目录 数据的变化反应到视图 命令式操作视图 声明式操作视图 小结 视图的变化反应到数据 现存的问题 数据的变化反应到视图 前面我们了解到数据劫持之后,我们可以在数据发生修改之后做任何我们想要做的事情,操作视图当然也是OK的 命令式操作视图 目标:我们通过原始的操作dom的方式让每一次的name的最新值都能显示到p元素内部 <div id="app"> <p></p> </div> <script> let data = { n
-
Vue响应式原理及双向数据绑定示例分析
目录 前言 响应式原理 双向数据绑定 前言 之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是Vue,所以免不了问到其响应式原理和Vue的双向数据绑定.但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数据绑定原理,来面试的同学大都会认为是一回事,那么这里我们就说一下二者的区别. 响应式原理 是Vue的核心特性之一,数据驱动视图,我们修改数据视图随之响应更新,就很优雅~ Vue2.x是借助Object.defineProperty()实现的,而Vue3.x是借助
-
Vue数据双向绑定的实现方式讲解
目录 前言 一.input和textarea 二.radio和CheckBox 三.select 四.双向绑定的修饰符 前言 在web开发应用中,很多项目都会用到表格一列的组件进行数据的传输.获取和提交,在开发使用中,表格类组件数据的传输,我们一般可以使用v-model将输入的数据同步到data属性中,这个指令可以为不同的输入元素使用不同的属性,这个指令一般在form表单中的input等等元素上面来创建双向的数据绑定. 一.input和textarea 在vue实战项目中,vue里面的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双向数据绑定(MVVM)的原理
MVVM MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel. ViewModel负责连接 View 和 Model,保证视图和数据的一致性
-
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是
-
vue 双向数据绑定的实现学习之监听器的实现方法
提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和 发布订阅者模式(观察者),下面讲的就是数据劫持在代码中的具体实现. 1.先看如何调用 new一个对象,传入我们的参数,这个Myvue ,做了啥? 上面看到了在实例化一个Myvue 对象的时候,会执行init方法, init 方法做了两个事,调用了observer 方法,和 实例化调用了 compile 方法. 到这里我们就明白了,实例化一个Myvue后,我们要做的就是监听数据变化和编译模板 . 上面O
-
vue双向数据绑定知识点总结
1.原理 vue的双向数据绑定的原理相信大家都十分了解:主要是通过ES5的Object对象的defineProperty属性:重写data的set和get函数来实现的 所以接下来不使用ES6进行实际的代码开发:过程中如果函数使用父级this的情况:还是使用显示缓存中间变量和闭包来处理:原因是箭头函数没有独立的执行上下文this:所以箭头函数内部出现this对象会直接访问父级:所以也能看出箭头函数是无法完全替代function的使用场景的:比如我们需要独立的this或者argument的时候 1.
-
vue双向数据绑定原理探究(附demo)
昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与UI层的同步,数据再两者之间的任一者发生变化时都会同步更新到另一者. 双向绑定的一些方法 目前,前端实现数据双向数据绑定的方法大致有以下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元
-
详解Vue双向数据绑定原理解析
基本原理 Vue.采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,数据变动时发布消息给订阅者,触发相应函数的回调. 思路整理 要实现mvvm的双向绑定,需要实现如下几点: 1.实现一个数据监听器Observer,能够对对象的所有属性进行监听,发生变化时拿到最新值通知订阅者 2.实现一个解析器Compile,对每个子元素节点的指令进行扫描和解析,根据模板指令替换数据,初始化视图以及绑定相应的回调函数: 3.实现
-
Vue2.0/3.0双向数据绑定的实现原理详解
Vue2.0/3.0 双向数据绑定的实现原理 双向数据绑定简意 即数据的改变能让页面重新渲染 Vue2.0 ES5的原理: Object.defineProperty 对数据进行拦截 简单小案例 <body> 姓名: <span id="name"></span> <br /> <input type="text" id="inputName" /> </body> 改变in