对于vue的单向绑定与双向绑定理解
发布日期:2021-10-09 15:35:01 浏览次数:1 分类:技术文章

本文共 2741 字,大约阅读时间需要 9 分钟。

概述

Vue.js 最显著的特点就是响应式和数据驱动,也就是将Model和View进行单向绑定或者双向绑定。

单向绑定:把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。因此,我们不需要进行额外的DOM操作,只需要进行Model的操作就可以实现视图的联动更新。
双向绑定:把Model绑定到View的同时也将View绑定到Model上,这样就既可以通过更新Model来实现View的自动更新,也可以通过更新View来实现Model数据的更新。所以,当我们用JavaScript代码更新Model时,View就会自动更新,反之,如果用户更新了View,Model的数据也自动被更新了。
 

弄清了它的这种数据绑定的机制,我们再来看Vue.js代码就会很清晰了,Vue.js主要有三种数据绑定形式,并且都是基于单向绑定和双向绑定。

 

插值形式绑定

插值形式就是{

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

 
  1. <body>

  2. <div id="vm">

  3. <p>Hello, {

    {name}}!</p>

  4. <p>You are {

    {age}} years old!</p>

  5. </div>

  6. </body>

  7.  
  8.  
  9. <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  10. <script type="text/javascript">

  11. var vm = new Vue({

  12. el: '#vm',

  13. data: {

  14. name: 'DroidMind',

  15. age: 18

  16. }

  17. });

  18. </script>

Vue实例就是ViewModel的代理对象:

el: 指定了要把Model绑定到id为vm的DOM节点上。
data: 指定了Model,我们初始化了Model的两个属性name和age,在View内部的<p>节点上,可以直接用{
{ name }}引用Model的某个属性。
当我们创建一个Vue实例,Vue可以自动把Model的状态映射到el指定的View上,并且实现绑定,这样我们就可以通过Model的操作来实现对DOM的联动更新,例如,打开浏览器console,在控制台输入vm.name = 'Bob',执行上述代码,可以观察到页面立刻发生了变化,原来的Hello, Robot!自动变成了Hello, Bob!。Vue作为MVVM框架会自动监听Model的任何变化,在Model数据变化时,更新View的显示。这种Model到View的绑定就是单向绑定。

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的动态更新。

 
  1. <body>

  2. <div id="vm">

  3. <p v-bind:class="classed">Hello, {

    {name}}!</p>

  4. </div>

  5. </body>

  6.  
  7.  
  8. <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  9. <script type="text/javascript">

  10. var vm = new Vue({

  11. el: '#vm',

  12. data: {

  13. name: 'DroidMind',

  14. classed: 'red'

  15. }

  16. });

  17. </script>

  18.  
  19.  
  20. <style>

  21. .red {

  22. background: red;

  23. }

  24.  
  25.  
  26. .blue {

  27. background: blue;

  28. }

  29. </style>

如上面代码所示,vm.classed的初始值为red,此时<p>的样式属性对应的是.red,此时背景就为红色,我们可以通过在浏览器的控制台输入vm.classed='bule',此时背景就自动变成了蓝色。可以看到通过对class属性进行绑定我们就可以动态的改变class对应的样式,这个都是通过Model的操作完成的,没有设置任何的DOM操作。

v-model形式绑定

v-model主要是用在表单元素中,实现了双向绑定。

当用户填写表单时,View的状态就被更新了,如果此时Model的数据也会随着输入的数据动态的更新,那就相当于我们把Model和View做了双向绑定。

 
  1. <body>

  2. <form id="vm" action="#">

  3. <p><input v-model="email"></p>

  4. <p><input v-model="name"></p>

  5. </form>

  6.  
  7.  
  8. </body>

  9. <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  10. <script type="text/javascript">

  11. var vm = new Vue({

  12. el: '#vm',

  13. data: {

  14. email: '',

  15. name: ''

  16. }

  17. });

  18. </script>

我们可以在表单中输入内容,然后在浏览器console中用vm.$data查看Model的内容,也可以用vm.name查看Model的name属性,它的值和FORM表单对应的<input>是一致的。如果在浏览器console中用JavaScript更新Model,例如,执行vm.name='Bob',表单对应的<input>内容就会立刻更新。可以看到通过v-model实现了表单数据和Model数据的双向绑定。

 

把上面的内容搞清楚了,我们就可以清楚的知道Vue.js中View跟Vue实例之间的关系了,写起代码来整个思路也变得非常的清晰,如果没有把上面的原理搞清楚,学习Vue.js肯定就是云里雾里,不知所然。

转载地址:https://blog.csdn.net/qinwuxian19891211/article/details/105943421 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:maven使用assembly打包zip文件
下一篇:Axios实例的使用实践

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年02月29日 01时55分15秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

php dns更新,php_mzdns: 站群,大量域名 通过 dns 服务商 api 批量添加 ip 工具。你懂的~ 基于 mzphp2 框架。... 2021-06-24
jdk 1.8 java.policy,JDK1.8 导致系统报错:java.security.InvalidKeyException:illegal Key Size 2021-06-24
php linux权限,Linux权限详细介绍 2021-06-24
典型环节的matlab仿真分析,典型环节的MATLAB仿真.doc 2021-06-24
Php contenttype类型,各种类型文件的Content Type 2021-06-24
php使用redis持久化,redis如何持久化 2021-06-24
php7.1解压包安装,【Swoole】php7.1安装swoole扩展 2021-06-24
linux centos删除安装的包,CentOS yum认为已删除的软件包仍在安装中 2021-06-24
酒店管理系统c语言带注释,酒店管理系统--C语言版.pdf 2021-06-24
c语言 实现sizeof功能,C语言简单实现sizeof功能代码 2021-06-24
c语言sin函数近似值,用泰勒公式求sin(x)的近似值 2021-06-24
c 语言登录系统源代码,c语言源代码---------------个人图书管理系统 2021-06-24
android线程通信方式,Android 主线程和子线程通信问题 2021-06-24
cps1 cps2 android,图文教程:CPS1和CPS2模拟器使用 2021-06-24
在线设计 html5 表单,html5注册表单制作-表单制作-小程序表单制作 2021-06-24
android小闹钟课程设计,《小闹钟》教学设计 2021-06-24
mysql文件系统_MySQL文件系统先睹为快(1) 2019-04-21
nums在python_程序找到一对(i,j),其中nums [i] + nums [j] +(i -j)在Python中最大化?... 2019-04-21
jquery后台内容管理_教育平台项目后台管理系统:课程内容模块 2019-04-21
grouping函数 mysql_sql聚合函数有哪些 2019-04-21