Vue作为前端MV*架构，Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

常见的几种数据绑定形式：

1　使用{{expression}}，这种方法比较简单。但是如果网速比较慢，可能给用户看到{{expression}}的体验

　　，当然也可以和Angular一样加入一个v-cloak，使其在加载完后在进行显示。这种表达式还有另外两种扩展：

  • {{*expression}}一次性绑定，后面即使expression中内容有变化，显示也不会发生改变。
  • {{{expression}}}将expression中的内容转义成html，同时起到了js注入的问题。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>
  7.  
  8. </head>
  9. <body>
  10.     <input type="text" v-model="username" />
  11.     <p>绑定：输入是啥，输出就是啥</p>
  12.     {{username}}
  13.     <hr>
  14.     <p>一次性绑定，初始化绑定，之后即便是修改了，也不会发生变化了</p>
  15.     {{*username}}
  16.     <hr>
  17.     <p>会将绑定内容转义成html</p>
  18.     {{{username}}}
  19. </body>
  20. <script type="text/javascript">
  21.     new Vue({
  22.         el:"body",
  23.             data:{
  24.             username:'buffer'
  25.         }
  26.     })
  27.     </script>
  28. </html>

2.使用标签

　　主要标签有v-model:进行双向数据绑定,注意这个一般是控制在input标签上，如果放到其他标签可能没有效果。

  • v-text:对应上面的{{expression}}
  • v-once：对应上面的{{*expression}}
  • v-html：对应上面的{{{expression}}}
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>v-model</title>
  6.     <script type="text/javascript" 
    src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>
  7.  
  8. </head>
  9. <body>
  10.     <input type="text" v-model="username" />
  11.     <p>绑定：输入是啥，输出就是啥</p>
  12.     <p v-text="username"></p>
  13.     <hr>
  14.     <p>一次性绑定，初始化绑定，之后即便是修改了，也不会发生变化了</p>
  15.     <p v-once="username"></p>
  16.     <hr>
  17.     <p>会将绑定内容转义成html</p>
  18.     <p v-html="username"></p>
  19.     <p>使用v-model进行数据绑定</p>
  20.     <p v-model="username"></p>
  21. </body>
  22. <script type="text/javascript">
  23.     new Vue({
  24.         el:"body",
  25.             data:{
  26.             username:'buffer'
  27.         }
  28.     })
  29.     </script>
  30. </html>

这里可能需要注意computed这个vue属性，一般情况expression表达式会出现vue.data中的字段，但是

compute也可以出现字段，例如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" 
    src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>
  7.  
  8. </head>
  9. <body>
  10.     <div id="box">
  11.         <p>a=>{{b}}</p>
  12.         <!-- <p>b=>{{b}}</p> -->
  13.         <input type="text" v-model="a" />
  14.     </div>
  15. </body>
  16. <script type="text/javascript">
  17.     // window.onload=function(){
  18.         var vm=new Vue({
  19.             data:{
  20.                 a:10
  21.             },
  22.             computed:{
  23.                 b:{
  24.                     get:function(){
  25.                         alert("调用了get方法"+this.a);
  26.                         return parseInt(this.a)+2;
  27.                     }
  28.                 }
  29.             }
  30.         }).$mount("#box")
  31.     // }
  32. </script>
  33. </html>

运行这个例子的时候发现，页面在加载{{b}}是会去调用b:get 方法,我们在vue定义的数据，vue底层都回去生成一个set和get方法

这个类似面向对象语言中的bean对象。打开控制输出一下vue对象，可以找到如下图的定义。

  1. asddsadasd

　　

01Vue数据双向绑定的更多相关文章

  1. 我的angularjs源码学习之旅3——脏检测与数据双向绑定

    前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...

  2. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  3. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  4. vuejs数据双向绑定原理（get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  5. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  6. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  7. Jquery实现数据双向绑定（赋值和取值），类似AngularJS

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  8. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

  9. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

随机推荐

  1. 201521123012 《Java程序设计》第二周学习总结

    1. 本章学习总结 1.Java中String和StringBuilder的区别. 2.Arrays()的用法. 2.课后作业 1.使用Eclipse关联jdk源代码(截图),并查看String对象的 ...

  2. python学习笔记1.1

  3. Java 课程设计 "Give it up"小游戏设计（个人） 201521123077

    1.团队课程设计博客链接 http://www.cnblogs.com/agts/p/7067948.html 2.个人负责模块或任务说明 个人任务:实现游戏画面的制作,游戏逻辑的编写,以及一些模块与 ...

  4. 201521123052 《Java程序设计》 第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  5. [04] Object类

    1.基本概念 Object类是所有类的父类,位于java.lang包中.任何类的对象,都可以调用Object类中的方法,包括数组对象. 2.常用方法 2.1 toString toString可以将任 ...

  6. OSGi-简介(01)

    OSGi是什么? OSGi联盟现在将OSGi定义为一种技术: OSGi技术是指一系列用于定义Java动态化组件系统的标准.这些标准通过为大型分布式系统以及嵌入式系统提供一种模块化架构减少了软件的复杂度 ...

  7. 【机器学习实战】Machine Learning in Action 代码 视频 项目案例

    MachineLearning 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远 Machine Learning in Action (机器学习实战) | ApacheCN(apa ...

  8. Spring在JSP页面使用ServletContext

    在 JSP 页面使用Application 可以 看到使用的是WebApplicationContextUtils 而不是WebApplicationContext.ROOT_WEB_APPLICAT ...

  9. Java中的类型转换(Integer、Long、String)

    这段时间将项目中一个模块参照C++源代码,实现一个JAVA版.主要功能是将一些字段信息转换为String类型,传输后可以进行解析. Integer.Long转为String,Java本身提供了这种转换 ...

  10. java 多态（动态绑定）

    一.面向对象最核心的机制--动态绑定,也叫多态 1.1.通过下面的例子理解动态绑定,即多态 1 package javastudy.summary; 2 3 class Animal { 4 /** ...