github上，avalon2的项目描述是这样的：“avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架， 适用于各种场景, 兼容各种古老刁钻浏览器, 吸收最新的技术成果, 能迅速堆砌组件与应用。”而对于我来说，一方面是由于项目的需要。另一方面是avalon的学习成本确实比ng低了相当多，个人感觉入门还是相当快的。当然，这也可能是因为个人有学习angular的基础在里面。学习了一个多礼拜的avalon2，是时候总结下这段时间的学习成果了。
1、通用形式为
1 <div ms-controller="AAA"> 2 {{@name}}:{{@color}} 3 </div> 4 <script type="text/javascript"> 5 avalon.define({ 6 $id:"AAA", 7 name:"label", 8 color:'red' 9 }); 10 </script>
得到的结果为
。具体来说可以分成两个方面，一方面是html语句，与ng相同，定义一个不可复用的控制器，使用指令ms-controller；另一方面，在js代码中的常用形式即为avalon.define({});其中$id的内容表示控制器的名称（如上为AAA），其他变量可以自由设置，以逗号分隔开。与avalon1不同的是，使用avalon1时，绑定数据的时候只需要使用双花括号，而现在需要加上符号"@"或者"##"才能实现数据的单向绑定。
2、实现数据双向绑定。
angular中使用ng-model进行双向绑定，实时将数据展示到前台。avalon2使用指令ms-duplex来进行数据的双向绑定。如以下代码:
1 <div ms-controller="BBB"> 2 <input type="text" ms-duplex="@yuyuyu"> 3 {{@yuyuyu}} 4 </div> 5 <script type="text/javascript"> 6 avalon.define({ 7 $id:'BBB', 8 yuyuyu:111 9 }); 10 </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中组件的使用形式主要是以下几种：
1 <xmp ms-widget='{is:"ms-button"}'></xmp> 2 <wbr ms-widget='{is:"ms-button"}'/> 3 <template ms-widget='{is:"ms-button"}'></template>
或者可以跟ng一样直接使用，即<ms-button></button>.js中的书写方法如下：
1 avalon.component('ms-button', { 2 template: '<button type="button"><span><slot name="buttonText"></slot></span></button>', 3 defaults: { 4 buttonText: "默认内容" 5 }, 6 soleSlot: 'buttonText' 7 })
断断续续学了一周多，学到的东西都不是很深，日还还要多多深入学习。