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)的更多相关文章

  1. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  2. 我的MYSQL学习心得(二) 数据类型宽度

    我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  3. 我的MYSQL学习心得(三) 查看字段长度

    我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  4. 我的MYSQL学习心得(四) 数据类型

    我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...

  5. 我的MYSQL学习心得(五) 运算符

    我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  6. 我的MYSQL学习心得(六) 函数

    我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  7. 我的MYSQL学习心得(七) 查询

    我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  8. 我的MYSQL学习心得(八) 插入 更新 删除

    我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...

  9. 我的MYSQL学习心得(九) 索引

    我的MYSQL学习心得(九) 索引 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

随机推荐

  1. 如何让网页打开就运行JS代码,不用onclick

    打开网页直接运行是要调用window.onload( )函数: <html>    <head>    </head>    <body>    < ...

  2. jaxb xml to bean

    package www.garbin.com.utils; import javax.xml.bind.JAXBContext; import javax.xml.bind.JAXBException ...

  3. BZOJ4006 JLOI2015 管道连接(斯坦纳树生成森林)

    4006: [JLOI2015]管道连接 Time Limit: 30 Sec Memory Limit: 128 MB Description 小铭铭最近进入了某情报部门,该部门正在被如何建立安全的 ...

  4. arm汇编(c内嵌汇编及c和汇编互调)

    C语言编译成汇编: arm-linux-gcc -S test.c -o test.S C语言编译成可执行文件: arm-linux-gcc test.c -o test 多个文件编译链接: arm- ...

  5. shell中的case表达式

    语法格式 case var in pattern1 | patter2) command1 command2;; pattern3) command1 command2;; *) default co ...

  6. 我的django之旅(二)模板和静态文件

    我的django之旅(二)模板和静态文件 标签(空格分隔): django 1.为什么要使用模板 在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个 ...

  7. Hbase写数据,存数据,读数据的详细过程

    Client写入 -> 存入MemStore,一直到MemStore满 -> Flush成一个StoreFile,直至增长到一定阈值 -> 出发Compact合并操作 -> 多 ...

  8. 六度分离--hdu1869

    六度分离 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  9. Linux下安装并启动MongDB

    1.下载MongoDB 下载链接: http://www.mongodb.org/downloads 2.解压下载的压缩包 tar -zxvf mongodb-linux-x86_64-3.2.8.t ...

  10. [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 ...