avalon2学习心得(1)
github上,avalon2的项目描述是这样的:“avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架, 适用于各种场景, 兼容各种古老刁钻浏览器, 吸收最新的技术成果, 能迅速堆砌组件与应用。”而对于我来说,一方面是由于项目的需要。另一方面是avalon的学习成本确实比ng低了相当多,个人感觉入门还是相当快的。当然,这也可能是因为个人有学习angular的基础在里面。学习了一个多礼拜的avalon2,是时候总结下这段时间的学习成果了。
1、通用形式为
<div ms-controller="AAA">
{{@name}}:{{@color}}
</div>
<script type="text/javascript">
avalon.define({
$id:"AAA",
name:"label",
color:'red'
});
</script>
得到的结果为。具体来说可以分成两个方面,一方面是html语句,与ng相同,定义一个不可复用的控制器,使用指令ms-controller;另一方面,在js代码中的常用形式即为avalon.define({});其中$id的内容表示控制器的名称(如上为AAA),其他变量可以自由设置,以逗号分隔开。与avalon1不同的是,使用avalon1时,绑定数据的时候只需要使用双花括号,而现在需要加上符号"@"或者"##"才能实现数据的单向绑定。
2、实现数据双向绑定。
angular中使用ng-model进行双向绑定,实时将数据展示到前台。avalon2使用指令ms-duplex来进行数据的双向绑定。如以下代码:
<div ms-controller="BBB">
<input type="text" ms-duplex="@yuyuyu">
{{@yuyuyu}}
</div>
<script type="text/javascript">
avalon.define({
$id:'BBB',
yuyuyu:111
});
</script>
得到的结果如图:
改变input里面的值,显示的值也会相应改变,这就是avalon2中简单的双向绑定。
3、属性操作。属性操作html中使用的指令是ms-attr,它的值是一个对象。即使用一个ms-attr绑定所有的自定义属性。而且,所有的指令最好写在一行以内,以提高性能。
4、样式操作。使用指令ms-css,处理思路和ms-attr一样。需要注意的是,带“-”的css属性名需要使用驼峰命名法,或者添加引号。例如font-size要写成fontSize或者ms-css="{{'font-szie':@fontSize}}"
5、循环操作。使用指令ms-for,和ng-repeat类似,ms-for="el in @eles"。进行循环的时候,同时可以进行过滤操作,形如:ms-for="el in @eles | filterName",filterName可以是自定义的过滤指令或者内置的过滤指令。想要获取特定的某个循环因子,可以使用$index来获得.
6、组件
avalon2中组件的使用形式主要是以下几种:
<xmp ms-widget='{is:"ms-button"}'></xmp>
<wbr ms-widget='{is:"ms-button"}'/>
<template ms-widget='{is:"ms-button"}'></template>
或者可以跟ng一样直接使用,即<ms-button></button>.js中的书写方法如下:
avalon.component('ms-button', {
template: '<button type="button"><span><slot name="buttonText"></slot></span></button>',
defaults: {
buttonText: "默认内容"
},
soleSlot: 'buttonText'
})
断断续续学了一周多,学到的东西都不是很深,日还还要多多深入学习。
avalon2学习心得(1)的更多相关文章
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(二) 数据类型宽度
我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(三) 查看字段长度
我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(四) 数据类型
我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(五) 运算符
我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...
- 我的MYSQL学习心得(六) 函数
我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
- 我的MYSQL学习心得(七) 查询
我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
- 我的MYSQL学习心得(八) 插入 更新 删除
我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...
- 我的MYSQL学习心得(九) 索引
我的MYSQL学习心得(九) 索引 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
随机推荐
- 如何让网页打开就运行JS代码,不用onclick
打开网页直接运行是要调用window.onload( )函数: <html> <head> </head> <body> < ...
- jaxb xml to bean
package www.garbin.com.utils; import javax.xml.bind.JAXBContext; import javax.xml.bind.JAXBException ...
- BZOJ4006 JLOI2015 管道连接(斯坦纳树生成森林)
4006: [JLOI2015]管道连接 Time Limit: 30 Sec Memory Limit: 128 MB Description 小铭铭最近进入了某情报部门,该部门正在被如何建立安全的 ...
- arm汇编(c内嵌汇编及c和汇编互调)
C语言编译成汇编: arm-linux-gcc -S test.c -o test.S C语言编译成可执行文件: arm-linux-gcc test.c -o test 多个文件编译链接: arm- ...
- shell中的case表达式
语法格式 case var in pattern1 | patter2) command1 command2;; pattern3) command1 command2;; *) default co ...
- 我的django之旅(二)模板和静态文件
我的django之旅(二)模板和静态文件 标签(空格分隔): django 1.为什么要使用模板 在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个 ...
- Hbase写数据,存数据,读数据的详细过程
Client写入 -> 存入MemStore,一直到MemStore满 -> Flush成一个StoreFile,直至增长到一定阈值 -> 出发Compact合并操作 -> 多 ...
- 六度分离--hdu1869
六度分离 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- Linux下安装并启动MongDB
1.下载MongoDB 下载链接: http://www.mongodb.org/downloads 2.解压下载的压缩包 tar -zxvf mongodb-linux-x86_64-3.2.8.t ...
- [Codeforces Round #247 (Div. 2)] A. Black Square
A. Black Square time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...