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. mac平台scala开发环境搭建

    到scala官网,下载scala的sdk,地址:http://www.scala-lang.org/download/ adeMacBook-Pro:scala- apple$ wget http:/ ...

  2. PHP定时执行任务的实现

    config.php<?php ; ?> cron.phpignore_user_abort(););*;// 每隔半小时运行 do{ $run = include 'config.php ...

  3. ural 1018(树形dp)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=17662 思路:典型的树形dp,处理的时候类似于分组背包,dp[i] ...

  4. 终于解决SQL Server 2008 64位系统无法导入Access/Excel的问题 2012/08/01

    最近更换了新服务器,操作系统Windows Server 2008 X64,数据库SQL Server 2008 X64,Office 2007(好像只有32位),在存储过程执行OpenDatasou ...

  5. CAD 快捷键Ctrl+2 Ctrl+3

    今天用cad,学习了两个快捷键,第一个Ctrl+2,打开如下 第二个是Ctrl+3,打开如下:

  6. Codeforces Round #292 (Div. 2)

    A. Drazil and Date 无算法,判断(s - (a + b)) % 2是否为零,若零,表示在s步内还能走向其他的地方并且回来 否则,都是No #include <cstdio> ...

  7. LCS(打印路径) POJ 2250 Compromise

    题目传送门 题意:求单词的最长公共子序列,并要求打印路径 分析:LCS 将单词看成一个点,dp[i][j] = dp[i-1][j-1] + 1 (s1[i] == s2[j]), dp[i][j] ...

  8. 水题 HDOJ 4716 A Computer Graphics Problem

    题目传送门 /* 水题:看见x是十的倍数就简单了 */ #include <cstdio> #include <iostream> #include <algorithm ...

  9. BZOJ1077 : [SCOI2008]天平

    首先通过差分约束系统建图,用Floyed算法求出任意两个砝码差值的上下界. 然后暴力枚举放在右边的砝码C,D,通过与A,B差值的上下界分类讨论统计方案. 时间复杂度$O(N^3)$. #include ...

  10. COJ975 WZJ的数据结构(负二十五)

    试题描述 输入一个字符串S,回答Q次问题,给你l,r,输出子序列[l,r]的最长连续回文串长度. 输入 第一行为一个字符串S. 第二行为一个正整数Q. 接下来Q行每行为l,r. 输出 对于每个询问,输 ...