您的位置：首页 > Web前端

前端交互设计利器--MVVM框架avalon.js

2017-12-06 10:16 134 查看

前端交互设计，少不了使用js框架，特别是近来非常火爆的MVVM框架。MVVM框架的确是前端交互设计的利器！

最近接触到国内大牛编写的前端框架–avalon.js

功能强大，兼容性好，非常好用。

MVVM框架核心思想是模型数据与视图绑定，改变了模型数据，即自动更新视图，完全不用再进行DOM操作。

一个简单的例子：

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test",
name: "",
dept: "",
array: ['项目部','销售部','后勤部']
})
</script>
</head>

<body ms-controller="test" style="padding:30px;">
<p>请输入名字：<input ms-duplex="@name"></p>
<p>
请选择部门：<select :duplex="@dept">
<option>请选择部门</option>
<option ms-for="($index,el) in @array">{{el}}</option>
</select>
</p>

<br><hr><br>

<p>你输入的名字是：{{@name}}</p>
<p>你选择的部门是：{{@dept}}</p>
</body>
</html>

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

标签： MVVM

相关文章推荐

新的分享

章节导航