初试avalon
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/avalon.js"></script>
</head> <body>
<div ms-controller="test">
<div>
<label>用户名</label>
<input type="text" :duplex="@data.uName">
</div>
<br>
<div>
<label>密码</label>
<input type="text" :duplex="@data.pWd"> </div>
<br>
<div>
<label>年龄</label>
<input type="text" :duplex="@data.age">
</div>
<br>
<div>
<label>爱好</label>
<select :duplex="@data.hobby">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<br>
<button :click="@readData">vm查看组件data</button>
<button :click="@upDate">vm修改年龄为105</button>
<button onclick="useVmMethod()">js查看组件data，并修改年龄为106</button>
</div>
</body>
<script>
// 内部调用
var vm = avalon.define({
$id: 'test',
data: {
uName: 'sang',
pWd: '123',
age: 24,
hobby: 'audi'
},
readData: function () {
console.log(vm.$model.data) // 成功
console.log(vm.data) // 成功
alert(typeof vm.$model.data.age + "--" + typeof vm.data.age)
},
// 修改数据
upDate: function () {
vm.$model.data.age = 105 // 失败
vm.data.age = 105 // 成功
}
})
// 外部调用
function useVmMethod() {
console.log(vm.$model.data) // 成功
console.log(vm.data) // 成功
vm.data.age = 106 // 成功
}
</script> </html>
初试avalon的更多相关文章
- MVVM大比拼之avalon.js源码精析
简介 avalon是国内 司徒正美 写的MVVM框架,相比同类框架它的特点是: 使用 observe 模式,性能高. 将原始对象用object.defineProperty重写,不需要用户像用knoc ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 迷你MVVM框架avalon在兼容旧式IE做的努力
很多时候,写代码就像砌砖头,只要我们不关心盖楼的原因.建筑的原理.土木工程基础和工程经验,就算我们砌了100栋高楼,我们也就只是一个砌砖工人,永远也成为不了一个工程师,更别说建筑师了.而那些包工头也只 ...
- 前端展望：取avalon，弃angular
打给比方,如果说angularJS是剑,那么avalon就是匕首.匕首比剑更易学,更快,更适合快速作战... 我们还是直接来实际的吧: 目前项目开发中有以下几个通用需求: 有前端路由系统,用来划分 ...
- 轻量级前端MVVM框架avalon - 初步接触
迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义View ...
- 轻量级前端MVVM框架avalon - 执行流程1
基本上确定了avalon的几个重要元素的关系: M,即model,一个普通的JS对象,可能是后台传过来的,也可能是直接从VM中拿到,即VM.$json.有关的这个$json的名字还在商讨 V,即Vie ...
- 轻量级前端MVVM框架avalon - 执行流程2
接上一章 执行流程1 在这一大堆扫描绑定方法中应该会哪些实现? 首先我们看avalon能帮你做什么? 数据填充,比如表单的一些初始值,切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ...
- 轻量级前端MVVM框架avalon - 整体架构
官网提供架构图 单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面 ...
- 轻量级前端MVVM框架avalon - ViewModel
废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务 ...
随机推荐
- oracle exp不生成dumpfile，预估出实际导出文件的大小。
目的:在不创建dumpfile前预估出需要的导出文件大小. 适用于export 实验步骤如下:OS: Linux test20 2.6.18-238.el5 #1 SMP Sun Dec ...
- visual Studio如何使用断点调试程序？
1.在想要添加断点的地方右侧点击,点击成功后会出现红色原点. 2.启动程序,当进行到断点处时,程序会停止,然后可以看到一个黄色的小箭头在断点处 3.快捷键F10:进行下一句代码 4.快捷键F11:进入 ...
- hdu 5279 YJC plays Minecraft——生成函数
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5279 令 n 个点的树的 EGF 是 g(x) ,则 \( g(x) = \sum\limits_{i=0 ...
- python 操作数据库的常用SQL命令
这俩天在学习PYTHON操作数据库的知识.其实基本SQL命令是与以前学习的MYSQL命令一致,只是增加了一些PYTHON语句. 1,安装pymysql,并导入. import pymysql 2,因为 ...
- python join函数
join()函数 语法: 'sep'.join(seq) 参数说明sep:分隔符.可以为空seq:要连接的元素序列.字符串.元组.字典上面的语法即:以sep作为分隔符,将seq所有的元素合并成一个新 ...
- ansible 远程执行时提示 command not found 问题
问题 最近在学习 ansible ,在使用普通用户远程执行 ip a 命令是发现提示错误:/bin/sh: ip: command not found. 原因 command not found 命令 ...
- C++——迭代器
除了每个容器定义的迭代器外,iterator库内还定义了其他的迭代器. 1.插入迭代器:向容器中插入元素 1.1 back_inserter 1.2 front_inserter 1.3 insert ...
- ES6数组方法
ES6数组方法 以下方法添加到了Array.prototype对象上(isArray除外) indexOf 类似字符串的indexOf()方法 stringObject.indexOf(searchv ...
- python作业/练习/实战：1、简单登录脚本
作业要求 写一个登陆的小程序 username = xiaoming passwd = 123456 1.输入账号密码,输入正确就登陆成功, 提示:欢迎xxxx登陆,今天的日期是xxx. 2.输入错误 ...
- 面向对象&从这里开始我们将不再是纯小白
一.面向对象初识 1.1 面向过程编程vs函数式编程 我们在没有学习函数的时候,写的代码都是面向过程式编程 # 面向过程编程 测量对象的元素的个数. s1 = 'fjdsklafsjda' count ...