您的位置：首页 > Web前端 > JavaScript

avalon.js学习笔记

2016-06-15 14:21 399 查看

一、下载avalon源码

github地址：https://github.com/RubyLouvre/avalon2

下载gist/avalon.js或者avalon.min.js

**二、第一个avalon小程序(*avalon2)**

<!DOCTYPE html>
<html>
<head>
<title>avalon</title>
<script src="js/avalon.js"></script>
<script>
var vm1 = avalon.define({
$id:"test",
username:"Cecil"
})
</script>
</head>
<body>
<div ms-controller="test">
<input ms-duplex="@username"/>
<strong>{{@username}}</strong>
</div>
</body>
</html>

实现效果

- 在input标签中输入字符实时于strong标签中显示

内容总结

1. MVVM将程序分为两大块，我们需要用avalon.define创建vm，用指令预先指定会变动的部分

2. ms-controller是圈定vm的作用域。ms-controller其实是可以套嵌的

3. ms-duplex是双向指令，通过一些事件监听我们的输入操作，从而同步vm

4. {{}}插值表达式是用于输出数据。

三、avalon指令使用

ms-visible和ms-click

ms-visible不同于传统的display:none，它的原理是保存原来的样式，在toggle之后所有样式还原。display:none可能会造成破坏。废话不多说直接上代码

<!DOCTYPE html>
<html>
<head>
<title>avalon</title>
<script src="js/avalon.js"></script>
<script>
var vm1 = avalon.define({
$id:"test",
toggle:false
})
</script>
</head>
<body>
<div ms-controller="test">
<div ms-visible="@toggle" style="background:red;height:100px;width:100px;"></div>
<button type="button" ms-click="@toggle = !@toggle">click</button>

</div>

</body>
</html>

ms-for和ms-click

ms-for的语法和angular.js一样，看代码相信能略知一二

ms-text和ms-html是另外两种数据插入方法，其中ms-html可以插入DOM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/avalon.js"></script>
<script>
var vm = avalon.define({
$id : "test",
curIndex:1,
buttons:['电影','电视剧','综艺节目'],
panels:['<div>面板1</div>','<div>面板2</div>','<div>面板3</div>']
})
</script>
<style>
button{
margin:1em 2em 1em 2em;
}
.panel div{
height: 300px;
width: 350px;
background: green;
}
</style>
</head>
<body ms-controller="test">
<button type="button" ms-for="(i,el) in @buttons" ms-click="@curIndex = i">{{el}}</button>
<div class="panel" ms-for="(j,el) in @panels" ms-visible="j == @curIndex" ms-html="el"></div>
</body>
</html>

测试小结ms-css与ms-attr是对象格式字符串，ms-class、ms-hover、ms-active是传数组格式字符串,请注意以下两点

(ms-attr中)属性名如果是有 - 符号的，请用驼峰表示法或者用单引号”

(ms-duplext中) “| change”的效果是移除实时同步值,只在焦点离开此标签时同步值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式操作</title>
<script src="http://cdn.bootcss.com/avalon.js/2.0s/avalon.min.js"></script>
<script type="text/javascript">
var vm = avalon.define({
$id:"test",
aaa:"style1 style11",
bbb:"style2",
ccc:"style3",
toggle:false,
w:50,
num:0,
classname:"test",
cName:function(e){
vm.num = (100*Math.random()).toFixed(0);
vm.classname = e.target.className;
},
color:'red',
switchColor:function(e){
vm.color = vm.color === 'red' ? 'blue': 'red';
}
});

console.log(vm);
</script>
<style>
.style1{
background-color: red;
}
.style11{
border :3px solid blue;
}
.style2{
background-color: green;
}
.style3{
background-color: black;
}
.c-red{
background:red;
}
.c-blue{
background: blue;
}
</style>
</head>
<body>
<div ms-controller="test">
<div ms-class="[@toggle && @aaa]" ms-click="@toggle = !@toggle">
{{@aaa}}
</div>
<input type="text" ms-duplex="@aaa">

<div ms-active="['style1','style2']">测试：active</div>
<div ms-hover="'style1'">测试：hover</div>
<div ms-css="{'width':@w,'height':100,'backgroundColor':'Red'}" ms-class="[@aaa]"></div>
<input type="text" ms-duplex="@w | change"/>
<button type="button" ms-click="@cName" ms-class="'text'+@num">{{@classname}}</button>

<div style="width:30px;height:30px;border:3px solid yellow" ms-hover="[@toggle ? 'c-'+@color:'']"></div>
<button type="button" ms-click="@switchColor">改变类名</button>
<button type="button" ms-click="@toggle = !@toggle">改变toggle:{{@toggle}}</button>
</div>
</body>
</html>

ms-if的指令与ms-visible相似，但是if本质上是将dom元素进行移除和添加操作.

JS中的&&运算符，表现形式为计算机从左到右计算值，直到出现0,null,”“,undefined,NaN为止。||运算符刚好相反，直到出现不是以上值为止。

以注释节点存在的ms-for指令

剩下的直接看sublime text的中的例子

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： avalon学习

相关文章推荐

新的分享

章节导航