v-bind单向绑定与v-model双向绑定

Vue.js 最显著的特点就是响应式和数据驱动，也就是将Model和View(View在下面的图示中)进行单向绑定或者双向绑定。

Vue.js主要有三种数据绑定形式，并且都是基于单向绑定和双向绑定。

1.插值形式 {{}}

2.单向绑定(v-bind)：把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。

3.双向绑定(v-model)：把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。

弄清了它的这种数据绑定的机制，我们再来看Vue.js代码就会很清晰了，

#-------------------------------------------{{}}------------------------------------------------------------------------------------

插值形式
插值形式就是{{data}}的形式，它使用的是单向绑定。
我们首先定义好一个JavaScript对象作为Model，并且把这个Model的两个属性绑定到DOM节点上：

<body><div id="vm"><p>Hello, {{name}}!</p><p>You are {{age}} years old!</p></div></body><!------>
<script src="https://cdn.jsdelivr.net/npm/vue"></script><script type="text/javascript">var vm = new Vue({el: '#vm',data: {name: 'DroidMind',age: 18}});</script>

Vue实例就是ViewModel的代理对象：
el: 指定了要把Model绑定到id为vm的DOM节点上。
data: 指定了Model，我们初始化了Model的两个属性name和age，

在View内部的<p>节点上，可以直接用{{ name }}引用Model的某个属性。

扯白了,就是New Vue下面的就是模型,页面上的<p></p>就是DOM节点,就是View.

映射关系:

Model->View

修改Model,View就更新,这种绑定是单向绑定.

浏览器按下F12,

例如，打开浏览器console，

在控制台输入vm.name = 'Bob'，按下回车，可以观察到页面立刻发生了变化，原来的Hello, Robot!自动变成了Hello, Bob!。

运行前:(按下F12,选择右侧的Console)

运行后:

#-------------------------------------------------------------------------------------------------------------------------------

单向绑定(v-bind)

如果我们希望html的某些属性能够支持单向绑定，我们只需要在该属性前面加上v-bind:指令，这样Vue在解析的时候会识别出该指令，就会将该将其属性的值跟Vue实例的Model进行绑定。这样我们就可以通过Model来动态的操作该属性从而实现DOM的联动更新。
例如：
<p class="classed">
上面<p>节点的class样式指定的值为classed，它是一个静态的属性值，如果我们希望将该属性值跟Model进行一个绑定，只需要加上一个v-bind:指令，如下所示：
<p v-bind:class="classed">

绑定之后，classed不再是一个静态的字符串，而是vue实例中的data.classed变量，也就是它跟Model的classed进行了绑定，所以我们可以通过操作Model的classed来实现对View的class属性的动态更新，从而实现View的动态更新。

这里为啥不再使用{{data}},因为绑定的是样式,而不是具体的数值

<body><div id="vm"><p v-bind:class=classed>Hello, {{name}}!</p>
<p class="{'blue':true}">Hello, {{name}}!</p>
<p class=red>Hello, {{name}}!</p><!---上面是3种等效的写法--->
<!---第1种是直接引用data里面的变量,变量再引用css中的模块--->
<!---第2种是直接引用css模块--->
<!-- 第3种是直接给样式赋值 -->
</div></body><script src="https://cdn.jsdelivr.net/npm/vue"></script><script type="text/javascript">var vm = new Vue({el: '#vm',data: {name: 'DroidMind',classed: 'red'}});</script><style>/*<!-- 下面的是映射到上面的classed -->*/.red {background: red;}.blue {background: blue;}</style><!-- 为什么不是{{data}}的形式,而是v-bind的形式,是因为前者不能绑定样式 -->

如上面代码所示，vm.classed的初始值为red，此时<p>的样式属性对应的是.red，此时背景就为红色.

我们可以通过在浏览器的控制台输入vm.classed='blue'，此时背景就自动变成了蓝色。

可以看到通过对class属性进行绑定我们就可以动态的改变class对应的样式，这个都是通过Model的操作完成的，没有设置任何的DOM操作。

操作前:

操作后:

原理图如下:

自己总结:绑定的是"Model中的样式对应的变量"和"p节点"

#########################################################################

v-model形式

v-model主要是用在表单元素中，实现了双向绑定。
当用户填写表单时，View的状态就被更新了，

如果此时Model的数据也会随着输入的数据动态的更新，

那就相当于我们把Model和View做了双向绑定。

这个意思是:View接受的数据,传给model,model的数据再传给view.

代码如下 :

<body><form id="vm" action="#"><p><input v-model="email"></p><p><input v-model="name"></p></form></body><script src="https://cdn.jsdelivr.net/npm/vue"></script><script type="text/javascript">var vm = new Vue({el: '#vm',data: {email: '',name: ''}});</script>

修改console之前(View->Model):

修改console之后(Model->View):

我们可以在表单中输入内容，然后在浏览器console中用vm.$data查看Model的内容，也可以用vm.name查看Model的name属性，它的值和FORM表单对应的<input>是一致的。

如果在浏览器console中用JavaScript更新Model，例如，执行vm.name='Bob'，表单对应的<input>内容就会立刻更新。可以看到通过v-model实现了表单数据和Model数据的双向绑定。

###################################################################################

下面是一个v-model的计算器的例子.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>蜀云泉</title><script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head>
<body><!-- 这个div就是MVVM(Model-View-ViewModel)中的V，View --><!-- 输入需要View->Model绑定 --><!-- 输出需要Model->View绑定 --><div id="app"><h3 v-text="msg"></h3><input type="text" style="width:100%" v-model="msg"><!-- v-model模拟简易计算器 --><input type="text" v-model="num1"><!-- 下面的对应页面上的+符号 --><select v-model="opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><!-- 双向绑定第二个数据 --><input type="text" v-model="num2"><!-- 绑定=号 --><input type="button" value="=" @click="calc"><!-- 输出结果 --><input type="text" v-model="result"></div><script>// 这个vm就是MVVM中的VM，ViewModelvar vm=new Vue({el: '#app',//  这个data就是MVVM中的M，Modeldata: {msg:"大家好，我是Vae",num1:0,num2:0,result:0,opt:'+'},//下面是加减乘除四种运算methods: {calc(){switch(this.opt){//这里接收data中的opt的值case '+':this.result=parseInt(this.num1)+parseInt(this.num2);break;case '-':this.result=parseInt(this.num1)-parseInt(this.num2);break;case '*':this.result=parseInt(this.num1)*parseInt(this.num2);break;case '/':if(this.num2==0) {alert('除数不能为0');break;}this.result=parseInt(this.num1)/parseInt(this.num2);break;}}}})</script>
</body>
</html>

参考链接:

https://blog.csdn.net/u012207345/article/details/81737509

v-bind单向绑定与v-model双向绑定相关推荐

02.Vue3 基础语法：常用语法、列表渲染、事件绑定和表单双向绑定
Vue3 基础语法 1. Vue 中应用和组件的基础概念 createApp createApp 表示创建一个 Vue 应用,存储在 app 变量中. 传入的参数表示,这个应用最外层的组件,应该如何展 ...
angularjs双向绑定_AngularJS隔离范围双向绑定示例
angularjs双向绑定 Earlier we looked at AngularJS Isolate scope attribute binding and I hope you got a be ...
vue绑定事件、vue双向绑定 2022-3-14
一.Vue绑定事件 1.1Vue的7个常用属性以下一图是网络上的图 1.2 methods属性 <!DOCTYPE html> <html lang="en"& ...
html 数据双向绑定,javascript实现数据双向绑定的三种方式小结
前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下.目前实 ...
mvvm绑定checkbox wpf_LoxodonFramework 数据双向绑定通过控制数据流向防止更新死循环...
框架地址github.com 用这个框架也有一段时间了,刚引入的时候还没感受到MVVM的威力,随着项目的逐渐复杂,才真正感受到 VM和V分离后对于多端项目的巨大优势目前项目有两套完全不同的界面布局 ...
Vue关于双向绑定和单向数据流的理解
很多接触Vue开发不久的同学会有疑问,vue既然是单向数据流为什么会有双向绑定一说? 关于Vue数据绑定首先引用官网原话: AngularJS 使用双向绑定,Vue 在不同组件间强制使用单向数据流.这 ...
深入ASP.NET数据绑定（中）——数据双向绑定机理
转载自阿不 http://hjf1223.cnblogs.com/ 在上一篇<深入ASP.NET数据绑定(上)>中,我们分析了在.NET中的数据绑定语法的一些内部机理.简单说来就是ASP ...
组件间的双向绑定、如何自己定制双向绑定
1.组件间的双向绑定 1.1 组件的双向绑定的介绍由于vue中的单项数据流,一般来说,父组件通过自定义属性传输数据,子组件通过props字段接受数据,如果子组件想要更改父组件传过来的数据,可以通过t ...
前端技术栈：Vue 双向绑定
目录 MVVM模式 Vue 数据双向绑定原理通过一个"加<XXX>"的例子来理解思路分析实现双向绑定实现最简单的双向绑定 Vue 代码实现 1. 实现 obs ...
“约见”面试官系列之常见面试题第四十篇之双向绑定以及实现原理（建议收藏）
目录 MVC模式 MVVM模式双向绑定原理 1.实现一个Observer 2.实现一个Watcher 3.实现一个Compile 4.实现一个MVVM 最后写一个html测试一下我们的功能 MVC模 ...

v-bind单向绑定与v-model双向绑定

v-bind单向绑定与v-model双向绑定相关推荐

最新文章

热门文章