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. C# 将对象序列化为Json格式

    public static string JsonSerializer<T>(T t) { DataContractJsonSerializer ser = new DataContrac ...

  2. .net后台 Silverlight 页面 动态设置 ASPX 页面 控件的Margin值(位置设置)

    silverlight后台代码:using System.Windows.Browser;public Page1(){HtmlPage.RegisterScriptableObject(" ...

  3. iOS_SN_Socket网络编程(一)

    1.Socket简介 首先让我们通过一张图知道socket在哪里? socket在哪里 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口. 2.TCP和UDP的区别 在这里就 ...

  4. Mac系统cocos2dx + android 开发环境配置

    Mac系统cocos2dx + android 开发环境配置 /****************************************************** 这遍文章主要转载自:htt ...

  5. Oracle11g R2学习系列 之十 解决EM不能用

    不知道是什么原因https://localhost:1158/em,今天突然就不能用了.做了好多搜索也没有解决.现象是在services.msc中,不能重启OracleDBConsole服务,提示: ...

  6. Tempter of the Bone--hdu1010--zoj2110

    Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  7. LeetCode_Pascal's Triangle

    Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5, Retu ...

  8. Ubuntu下配置NFS服务

    Table of Contents 1.下载相关软件 2.建立共享目录 3.修改该配置文件 4.重启服务 5.测试服务器 6.测试客户端 测试系统:Ubuntu8.04 1.下载相关软件 使用如下命令 ...

  9. visual studio 使用正则查找或替换示例

    visual studio 使用正则查找或替换示例 注意哟:使用之前应做好备份 visual studio 2015: 多行替换 (.*)point\ =(.*);\r\n.+this.([A-Za- ...

  10. Js,alert出现乱码问题,赶紧记下来,额~~~

    原文 http://www.cnblogs.com/still-windows7/archive/2011/08/28/2156010.html 前些天还可以正常使用的js文件,在添加了一些东西后,其 ...