view

<div id='demo' class="container">
<input type="text" v-model='name'> <pre> {{ $data | json }}</pre>
</div>

js

new Vue({
el: '#demo', data: {
name: 'foobar'
}
});

显示

aaarticlea/png;base64,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" alt="" />

添加函数

new Vue({
el: '#demo', data: {
name: 'foobar'
}, ready:function(){
var that = this; setInterval(function(){
that.name = 'Updated';
}, 5000);
}
});

vue model双向绑定的更多相关文章

  1. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  2. Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

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

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

  4. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  5. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  6. vue 之 双向绑定原理

    一.实现双向绑定 详细版: 前端MVVM实现双向数据绑定的做法大致有如下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的 ...

  7. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  8. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  9. vue数据双向绑定

    Vue的双向绑定是通过数据劫持结合发布-订阅者模式实现的,即通过Object.defineProperty监听各个属性的setter,然后通知订阅者属性发生变化,触发相应的回调. 整个过程分为以下几步 ...

随机推荐

  1. Duilib非官方更新贴~

    GitHub: https://github.com/movsb/duilib.git 2014-07-20: [76a04d1]    [BugFix] 修复无法解析类似<Control/&g ...

  2. [译]SQL Server 之 查询优化器

    因为生成查询计划的代价比较大,所以查询计划将会被缓存. 树形结构 SQL 查询首先被转化为树形结构,每个节点都是一个查询操作.例如: SELECT * FROM Customers C INNER J ...

  3. 以app形式启动chrome——关于chrome命令行

    转自:http://wiselyman.iteye.com/blog/2179043 转自:http://bbs.ithome.com/thread-589651-1-1.html 转自:http:/ ...

  4. 【GruntMate】一个让你更方便使用Grunt的工具

    GruntMate是什么? 一个基于Grunt的项目管理可视化工具(还不知道Grunt是什么?可以谷歌一下就知道了!) GruntMate有哪些功能? 方便的管理基于Grunt的项目 方便统一管理Gr ...

  5. img 默认是行内元素,它旁边的空格是会保留的

    img 默认是行内元素,它旁边的空格是会保留的.因此图片宽度设置百分百后下面会有点找不出原因的间隙. 解决办法:img{display:block}

  6. ember.js:使用笔记5 使用view

    在已经设置route的情况下,以table为例,可以如下设置,范围为对应的模版: App.TableView = Em.View.extend({ }); App.TableIndexView = E ...

  7. HealthKit开发教程之HealthKit的主要类型数据

    HealthKit开发教程之HealthKit的主要类型数据 在HealthKit中,我们将最常用到的数据称之为主要数据.主要数据基本上有三种:长度类型的数据.质量类型的数据.能量类型的数据.本节将主 ...

  8. Maven中多模块的编译顺序

    在多模块的工程中,如果模块之间存在依赖关系,那模块的编译必须要有顺序的要求.例如:P(parent)中包含A模块和B模块,且A模块依赖于B模块,那么在P中的pom,xml中需申明为: <modu ...

  9. 简单几何(点与线段的位置) POJ 2318 TOYS && POJ 2398 Toy Storage

    题目传送门 题意:POJ 2318 有一个长方形,用线段划分若干区域,给若干个点,问每个区域点的分布情况 分析:点和线段的位置判断可以用叉积判断.给的线段是排好序的,但是点是无序的,所以可以用二分优化 ...

  10. 线段树 Codeforces Round #197 (Div. 2) D. Xenia and Bit Operations

    题目传送门 /* 线段树的单点更新:有一个交叉更新,若rank=1,or:rank=0,xor 详细解释:http://www.xuebuyuan.com/1154895.html */ #inclu ...