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

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

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

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

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

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

  • {{*expression}}一次性绑定，后面即使expression中内容有变化，显示也不会发生改变。
  • {{{expression}}}将expression中的内容转义成html，同时起到了js注入的问题。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>

</head>

<body>

    <input type="text" v-model="username" />

    <p>绑定：输入是啥，输出就是啥</p>

    {{username}}

    <hr>

    <p>一次性绑定，初始化绑定，之后即便是修改了，也不会发生变化了</p>

    {{*username}}

    <hr>

    <p>会将绑定内容转义成html</p>

    {{{username}}}

</body>

<script type="text/javascript">

    new Vue({

        el:"body",

            data:{

            username:'buffer'

        }

    })

    </script>

</html>

2.使用标签

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

  • v-text:对应上面的{{expression}}
  • v-once：对应上面的{{*expression}}
  • v-html：对应上面的{{{expression}}}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-model</title>

    <script type="text/javascript" 
src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>

</head>

<body>

    <input type="text" v-model="username" />

    <p>绑定：输入是啥，输出就是啥</p>

    <p v-text="username"></p>

    <hr>

    <p>一次性绑定，初始化绑定，之后即便是修改了，也不会发生变化了</p>

    <p v-once="username"></p>

    <hr>

    <p>会将绑定内容转义成html</p>

    <p v-html="username"></p>

    <p>使用v-model进行数据绑定</p>

    <p v-model="username"></p>

</body>

<script type="text/javascript">

    new Vue({

        el:"body",

            data:{

            username:'buffer'

        }

    })

    </script>

</html>

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" 
src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>

</head>

<body>

    <div id="box">

        <p>a=>{{b}}</p>

        <!-- <p>b=>{{b}}</p> -->

        <input type="text" v-model="a" />

    </div>

</body>

<script type="text/javascript">

    // window.onload=function(){

        var vm=new Vue({

            data:{

                a:10

            },

            computed:{

                b:{

                    get:function(){

                        alert("调用了get方法"+this.a);

                        return parseInt(this.a)+2;

                    }

                }

            }

        }).$mount("#box")

    // }

</script>

</html>

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

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

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. json：JSONObject包的具体使用（JSONObject-lib包是一个beans,collections,maps,java arrays和xml和JSON互相转换的包）

    1.JSONObject介绍 JSONObject-lib包是一个beans,collections,maps,java arrays和xml和JSON互相转换的包. 2.下载jar包 http:// ...

  2. delphi引用别的单元时问题

    当需要添加别的工程总的unit文件时,将unit的pas文档放入工程目录下,在工程页面Uses添加 Unit2 in 'Unit2.pas' {DataModule2: TDataModule}, U ...

  3. 深入理解计算机系统（2.5）------C语言中的有符号数和无符号数以及扩展和截断数字

    上一篇博客我们讲解了计算机中整数的表示,包括无符号编码和补码编码,以及它们之间的互相转换,个人觉得那是非常重要的知识要点.这篇博客我们将介绍C语言中的有符号数和无符号数以及扩展和截断数字. 1.C语言 ...

  4. 异常处理第一讲(SEH),筛选器异常,以及__asm的扩展,寄存器注入简介

    异常处理第一讲(SSH),筛选器异常,以及__asm的扩展 博客园IBinary原创  博客连接:http://www.cnblogs.com/iBinary/ 转载请注明出处,谢谢 一丶__Asm的 ...

  5. hadoop超租约报错：

    解决方法:修改linux打开文件最大限制Java代码 echo "fs.file-max = 65535" >> /etc/sysctl.conf echo " ...

  6. springmvc返回枚举属性值

    使用fastJSON ,在枚举中写toString 方法 如下@Overridepublic String toString() {return "{" + this.name() ...

  7. 在JavaScript中使用json.js：Ajax项目之POST请求（异步）

    经常在百度搜索框输入一部分关键词后,弹出候选关键热词.现在我们就用Ajax技术来实现这一功能. 一.下载json.js文件 百度搜一下,最好到json官网下载,安全起见. 并与新建的两个文件部署如图 ...

  8. crontab的两大坑：百分号和环境变量

    今天想给服务器加个自动备份mysql数据库的功能(别怪我这么久才加,阿里云每天全盘备份的,不怕丢数据库),本以为只要5分钟就能搞定的,结果入了两个大坑. 我的crontab是这样写的: * * * m ...

  9. 配置 VirtualBox backend - 每天5分钟玩转 Docker 容器技术（75）

    Rexy-Ray 支持多种 backend,上一节我们已经安装配置了 Rex-Ray,今天演示如何配置 VirtualBox backend. 在 VirtualBox 宿主机,即我的笔记本上启动 v ...

  10. JS数字金额转换为货币汉字形式

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...