avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架, 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。
入门实例:
<!DOCTYPE html>
<html>
<head>
<title>first example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./dist/avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test",
name: "司徒正美",
array: [11,22,33]
})
setTimeout(function(){
vm.array.set(0, 444)
}, 3000)
</script>
</head>
<body ms-controller="test">
<input ms-duplex="@name">
<p>Hello,{{@name}}!</p>
<ul>
<li ms-for="($index,el) in @array">{{$index}}--{{el}}</li>
</ul>
</body>
</html>
- 涉及到的知识点:
- vm,使用avalon.define方法生成,必须带$id属性
- 指令,以ms-开头的属性及双花括号的插值表达式
- 圈定作用域,使用ms-controller告诉框架,只处理这个范围内的标签
- 引导符,使用
@
或##
来告诉框架这些变量是来自vm的 - 自动扫描机制
掌握了上面的入门实例,如果还是一脸懵逼的状态,没关系,下面的教程会带你直冲云霄
官方教程链接:http://avalonjs.coding.me/directive.html