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. HTML与CSS入门——第十二章  在网页中使用多媒体

    知识点: 1.如何链接多媒体文件 2.如何嵌入多媒体文件 3.使用多媒体的更多技巧 多媒体文件:音频,视频和动画,以及静态的图像和文本. 这里我就直接讲HTML5了…… 此前都是用ojbect来加载或 ...

  2. js获取当前页面的网址域名地址

    1.获取当前完整网址thisURL = document.URL;thisHREF = document.location.href;thisSLoc = self.location.href;thi ...

  3. windows程序消息机制(Winform界面更新有关)--转

    1. Windows程序消息机制 Windows GUI程序是基于消息机制的,有个主线程维护着消息泵.这个消息泵让windows程序生生不息. Windows程序有个消息队列,窗体上的所有消息是这个队 ...

  4. (转).net开发者对android第二周的学习体会

    这一周相对没有春节时这么闲了,白天也比较多的工作要做,每天晚上又要被我三岁的女儿折腾到十点, 实在没有多少时间学习.在前一周的基础上,这周我试着自己练习写了一个个人管理的android的程序,主要实现 ...

  5. WCF websocket

    WebSocket, like as TCP, is a bi-directional, full-duplex communication channel over a single TCP con ...

  6. 多重和嵌套if

    多重if实例: 看例子,内容不解释了! 隐藏行号 复制代码 ? 多重if import java.util.Scanner; public class 多重if{ public static void ...

  7. 关于Oracle dmp文件导入随笔

    进入博客园已经两年多了,每次想写点什么,都是给自己个各种借口,不了了之~今天就从Oracle数据库最长用的导入开始吧! 1.低版本的exp/imp可以连接到高版本(或同版本)的数据库服务器,比如:10 ...

  8. C#获取客户端相关信息

    1.获取Uri参数 2.获取客户端操作系统.浏览器信息 3.获取客户端分辨率 4.C#判断用户是手机访问还是PC访问

  9. 8 fastJson的使用

    Fastjson介绍 Fastjson是一个Java语言编写的JSON处理器,由阿里巴巴公司开发. 1.遵循http://json.org标准,为其官方网站收录的参考实现之一. 2.功能qiang打, ...

  10. python之6-4装饰器.md

    装饰器看的说实话真心郁闷,群里一伙计说了好一会,听得一愣一愣的,查了点资料,又自己试了下,算是明白了一些,记录记录=.=更郁闷的是,博客园的markdown标记支持怎么和为知的不匹配,这转过来的文章很 ...