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. 编辑WCF配置不出现

    在使用VS2010创建

  2. Android_就像小朋友“搭积木”一样。

    就像小朋友“搭积木”一样.感觉这句话很有意思.完整的话是这样的: Android提供了大量功能丰富的UI组件,开发者只要按一定规律把这些UI组件组合起来 --就像小朋友“搭积木”一样,把这些UI组件搭 ...

  3. cocos2dx游戏开发——微信打飞机学习笔记(五)——BackgroundLayer的搭建

    一.创建文件~ 文件名:BackgroundLayer.h BackgroundLayer.cpp 架构就跟前面的一样,我就直接进入正题 啦,而且github有完整代码,欢迎下载~ 二.创建滚动的背景 ...

  4. maven打的jars项目,log4j不会输出日志

    通过maven打完包,运行jars时,会输出警告 log4j:WARN No appenders could be found for logger (com.dlht.DataCenterSYNC. ...

  5. hdu 1269 迷宫城堡 强连通分量

    迷宫城堡 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  6. Ajax 学习之创建XMLHttpRequest对象------Ajax的核心

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. FireBug使用总结

    FireBug是一个用于网站前端的开发工具,它是Firefox浏览器的一个拓展插件,它可以调试JavaScript.查看DOM.分析CSS.监控网络流量以及进行Ajax交互等.提供了几乎前端开发需要的 ...

  8. 拓扑排序 POJ 1049 Sorting It All Out

    题目传送门 /* 拓扑排序裸题:有三种情况: 1. 输入时发现与之前的矛盾,Inconsistency 2. 拓扑排序后,没有n个点(先判断cnt,即使一些点没有边连通,也应该是n,此时错误是有环): ...

  9. stack+DFS ZOJ 1004 Anagrams by Stack

    题目传送门 /* stack 容器的应用: 要求字典序升序输出,所以先搜索入栈的 然后逐个判断是否满足答案,若不满足,回溯继续搜索,输出所有符合的结果 */ #include <cstdio&g ...

  10. 模拟 POJ 2996 Help Me with the Game

    题目地址:http://poj.org/problem?id=2996 /* 题意:给出白方和黑方的棋子和对应的坐标,输出该副棋盘的样子 模拟题 + 结构体排序:无算法,switch区分读入的字符,按 ...