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. C# 工程中引用出现感叹号

    问题:在工程中引用出现感叹号 原因1:  这是由于之前引用的Dll文件不见了. 右键有感叹号的项,然后选择 “属性” 里边有一个路径属性 这个路径就是之前这个Dll文件的路径,现在这个文件不在了,你需 ...

  2. WinForm点击按钮,访问百度

    命名空间 using System.Diagnostics; button的click事件中写入如下 Process.Start("http://www.xxx.com"); 注: ...

  3. jq生成目录文件树jQuery Ztree基本用法

    转自:http://www.cnblogs.com/linjiqin/p/4547452.html 1.首先在页面上有<ul/>标签 ? 1 <ul id="tree&qu ...

  4. 国家与城市的sql

    --省表 create table tb_province ( pID int NOT NULL PRIMARY KEY, pName ) ) --省 ,'北京市') ,'天津市') ,'上海市') ...

  5. MBR 基础

    1.简介 MBR,全称为Master Boot Record,即硬盘的主引导记录,它位于整个硬盘的0磁道0柱面1扇区,其主要对硬盘进行了组织,是在驱动器最前端的一段引导扇区. MBR是不属于任何一个操 ...

  6. POJ3252 Round Numbers(不重复全排列)

    题目问区间有多少个数字的二进制0的个数大于等于1的个数. 用数学方法求出0到n区间的合法个数,然后用类似数位DP的统计思想. 我大概是这么求的,确定前缀的0和1,然后后面就是若干个0和若干个1的不重复 ...

  7. 2015ACM/ICPC亚洲区长春站 E hdu 5531 Rebuild

    Rebuild Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total S ...

  8. cocos2d CCArray

    CCArray* arr=CCArray::create(); arr->retain();//如果不加这个东西,CCArray会被清空 arr->addObject(CCSprite:: ...

  9. TYVJ P1074 武士风度的牛 Label:跳马问题

    背景 农民John有很多牛,他想交易其中一头被Don称为The Knight的牛.这头牛有一个独一无二的超能力,在农场里像Knight一样地跳(就是我们熟悉的象棋中马的走法).虽然这头神奇的牛不能跳到 ...

  10. 【wikioi】1904 最小路径覆盖问题(最大流+坑人的题+最小路径覆盖)

    http://wikioi.com/problem/1904/ 这题没看数据的话是一个大坑(我已报告官方修复了),答案只要求数量,不用打印路径...orz 最小路径覆盖=n-最大匹配,这个我在说二分图 ...