Vue单向绑定与双向绑定解析

在讲绑定之前我们要理解MVVM框架,这对我们理解单向以及双向绑定有很大的帮助.

一 MVVM框架

M : model(模型) 数据保存
V : view(视图) 用户界面
VM : ViewModel 把Model和View关联起来,ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

所有的通信模式是双向的.

Vue单向绑定与双向绑定解析

1.1 MVVM框架的互动模式

用户向 View 发送指令（DOM 事件,改变URL,输入表单等）由viewmodel这个观察者感知变化,然后通知 Model 发生相应改变.
当 Model(数据) 发生改变，ViewModel 也能感知到变化，使 View 作出相应更新,用户看到的界面更新。

总结: 上面的过程就是我们所熟知的双向绑定,在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

这样开发者就可以只关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

1.2 实例体会MVVM框架

上面的话,可能让你有些费解,那么我们来看一个例子:

例子: 改变p标签里的文本内容

①原生的操作方式

<!-- html部分 -->
<p id="pTxt"></p> 

// JS部分
var PTxt = document.getElementById('pTxt');
PTxt.textContent = '我是原生操作DOM';

我们发现在原生的里面即需要我们提供数据,又需要我们去操作DOM元素,那么在MVVM框架(Vue)里呢.

② MVVM操作方式

<!-- html部分 -->
<p id="pTxt"> {{ pTxt }}</p>  

// JS部分
var vm = new Vue({

 el : '#pTxt',
   data : {
       pTxt : '我是MVVM的框架方式'
   }
})

在MVVM框架里，我们不关心DOM的结构与操作，而是关心数据如何存储。这里没有操作DOM也达到了效果,只要我们修改了数据,那么view(界面)就会得到相应的改变.而操作DOM的过程都是MVVM这个框架帮助我们去完成了.所以我们就可以只关注数据了.

二单向数据绑定

MVVM框架自动把Model的变化映射到DOM结构上，那么Model和View进行数据传递的方式又是怎样的呢?

单向绑定：把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。( Model —> View )

2.1 插值表达式的形式

插值表达式 {{Model中的变量名称}} 写在两个标签之间的

<div id="app">
    <p> {{ firstname }}</p> 
    <p> {{ lastname }}</p> 
</div>

var vm = new Vue({

           el : '#app',
           data : {
                firstname : 'alex',
                lastname : 'li'
           }
       })

数据是在data中定义好了之后传递过去的.model —> view
Vue单向绑定与双向绑定解析

2.1.1 使用插值表达式的注意点

Vue实例需要长时间编译的时候，会出现闪烁现象（页面出现 “{{ 内容 }}” ）。比如：引入vue.js在页面底部引入，当浏览器解析的时候回从上到下解析时，会先显示插值表达式的原样，当解析完之后，才会用model中的数据去替换插值表达式里的内容。

<p>{{message}}</p>
<p v-text="message"></p>

<script src="/vue.js"></script>

第一种解决办法：使用v-cloak配合css

//html内容
<div id="app" v-cloak>
  {{msg}}
</div>

//css内容
[v-cloak] {
 display: none;
}

第二种解决办法：使用指令v-text、v-html

<p v-text="message"></p>
<p v-html="message2"></p>

因为即便是Vue实例需要长时间编译，可是我的标签里面没有文本内容，是后面编译完成后再渲染上去的，所以并不会出现闪烁的现象。

2.2 v-bind指令

绑定属性的方法，这样我们即可动态的改变属性值

v-bind:属性名 = " 值1 "

//简写

：属性名 = "值1"

v-bind指令能够支持数据的单向绑定,只需要在该属性前面加上v-bind:指令，这样Vue在解析的时候会识别出该指令，就会将该将其属性的值跟Vue实例的Model进行绑定。这样我们就可以通过Model来动态的操作该属性从而实现DOM的联动更新。( Model —> View )

<!-- view视图 -->
<div id="vm">
	   <!-- v-bind全写的形式 -->
       <p v-bind:class="classed">Hello, {{name}}!</p>
	   <!-- v-bind简写的形式 -->
	   <!-- <p :class="classed">Hello, {{name}}!</p> -->
 </div>

// model
var vm = new Vue({
   el: '#vm',
     data: {
         name: 'DroidMind',
         classed: 'red'
     }
 });

Vue单向绑定与双向绑定解析

2.2.1 什么时候用v-bind

什么时候用:
如果我们需要把我们的属性值，当成一个变量来使用，那么就是用v-bind

三双向绑定

单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。但是能不能用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

3.1 v-model指令
v-model主要是用在表单元素中，实现了双向绑定。
当用户填写表单时，View的状态就被更新了，如果此时Model的数据也会随着输入的数据动态的更新，那就相当于我们把Model和View做了双向绑定。

<!-- view视图 -->
<form id="vm" action="#">
     <p><input v-model="email"></p>
     <p><input v-model="name"></p>
 </form>

// model
var vm = new Vue({
   el: '#vm',
    data: {
        email: '',
        name: ''
    }
});

Vue单向绑定与双向绑定解析

这里的数据与视图之间的关系是:

刚开始viewmodel模块这个观察者将model中初始化数据email和name交给view渲染展现到界面上.
当用户在输入框里输入内容,view发生变化此时viewmodel这个观察者察觉到变化,将输入框里的内容返回给model中的数据email和name,此时model中的数据email和name一致是实时更新的.

四 MVC设计模式

MVC 模式代表 Model-View-Controller（模型-视图-控制器）模式。这种模式用于应用程序的分层开发。但是所有的通信都是单向的.

Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
View（视图） - 视图代表模型包含的数据的可视化。
Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

Vue单向绑定与双向绑定解析

4.2 互动模式

4.2.1 View 接受指令，传递给 Controller
Vue单向绑定与双向绑定解析
这里的用户直接修改界面,让view接收指令,比如表单输入将数据传递给控制器(controller),通过控制器再来要求model来改变view的视图.

4.2.2 通过controller接受指令
Vue单向绑定与双向绑定解析

本文参考资料:

[1] 阮一峰《MVC，MVP 和 MVVM 的图示》 http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
[2] 廖雪峰《MVVM,单向绑定，双向绑定》
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00147574857851718682c42639f466a934ad9d4f485d1f2000

秒客网

Vue单向绑定与双向绑定解析

相关文章