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学习心得(四) 数据类 ...
随机推荐
- C# 将对象序列化为Json格式
public static string JsonSerializer<T>(T t) { DataContractJsonSerializer ser = new DataContrac ...
- .net后台 Silverlight 页面 动态设置 ASPX 页面 控件的Margin值(位置设置)
silverlight后台代码:using System.Windows.Browser;public Page1(){HtmlPage.RegisterScriptableObject(" ...
- iOS_SN_Socket网络编程(一)
1.Socket简介 首先让我们通过一张图知道socket在哪里? socket在哪里 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口. 2.TCP和UDP的区别 在这里就 ...
- Mac系统cocos2dx + android 开发环境配置
Mac系统cocos2dx + android 开发环境配置 /****************************************************** 这遍文章主要转载自:htt ...
- Oracle11g R2学习系列 之十 解决EM不能用
不知道是什么原因https://localhost:1158/em,今天突然就不能用了.做了好多搜索也没有解决.现象是在services.msc中,不能重启OracleDBConsole服务,提示: ...
- Tempter of the Bone--hdu1010--zoj2110
Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- LeetCode_Pascal's Triangle
Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5, Retu ...
- Ubuntu下配置NFS服务
Table of Contents 1.下载相关软件 2.建立共享目录 3.修改该配置文件 4.重启服务 5.测试服务器 6.测试客户端 测试系统:Ubuntu8.04 1.下载相关软件 使用如下命令 ...
- visual studio 使用正则查找或替换示例
visual studio 使用正则查找或替换示例 注意哟:使用之前应做好备份 visual studio 2015: 多行替换 (.*)point\ =(.*);\r\n.+this.([A-Za- ...
- Js,alert出现乱码问题,赶紧记下来,额~~~
原文 http://www.cnblogs.com/still-windows7/archive/2011/08/28/2156010.html 前些天还可以正常使用的js文件,在添加了一些东西后,其 ...