本文介绍了avalon.js的基本用法，包括下载源码、创建第一个avalon小程序以及常用指令的使用。通过实例展示了MVVM模式下如何使用avalon定义ViewModel，利用ms-controller、ms-duplex、ms-visible等指令实现数据绑定和交互。
一、下载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({
最低0.47元/天 解锁文章
扫一扫
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
