一款轻量级前端框架Avalon.Js
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的 - 自动扫描机制
define
创建一个vm对象,必须指定$id
avalon.define({
$id: 'aaa',
bbb: 1
})
插值表达式
位于文本节点中的双重花括号,当然这个可以配置.此指令其中文本ms-text指令的简单形式.
<body ms-controller="test">
<script>
avalon.define({
$id: 'test',
aaa: 'aaa',
bbb: 'bbb'
}) </script>
<p>{{@aaa}}{{@bbb}} 这个性能差些</p>
<p>{{@aaa+@bbb}} 这个性能好些</p>
<p>{{@aaa+@bbb | uppercase}} 选择器必须放在表达值的后端</p>
</body>
一款轻量级前端框架Avalon.Js的更多相关文章
- UIkit – 轻量级前端框架
原始地址:UIkit – 轻量级前端框架 高效轻量级前端框架: 来自:咕噜分享
- 前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue
前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...
- UIkit – 轻量级前端框架，帮助你快速构建 Web 界面
UIKit 是一个轻量级,模块化的前端框架,用于构建快速和强大的 Web 界面.UIKit 为您提供了 HTML,CSS 和 JavaScirpt 组件,使用简单,容易定制和扩展.UIKit 基于 L ...
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- 【入门篇】前端框架Vue.js知识介绍
一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...
- 前端框架React Js入门教程【精】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- 可能是目前最完整的前端框架 Vue.js 全面介绍
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...
- MakaJs：基于 React, Redux 的轻量级前端框架
github: maka.js 留下您宝贵的STAR!谢谢 maka maka源于中文码咖,意为写代码的大咖 一眼即可看懂的前端框架,简约而不简单 1.安装 bash sudo npm i -g @m ...
- 使用MVVM框架avalon.js实现一个简易日历
最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简易日历,毕竟也是第一次造日历这种轮子,所以这里记录下我当 ...
随机推荐
- python新手之一环境安装
今天开始学习python,首先环境安装 1.在https://www.python.org/downloads/下载python2.X或者3.X(ps:这里建议下载32位的python ,因为64位p ...
- 不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结
XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...
- 服务器Hadoop+Hive搭建
出于安全稳定考虑很多业务都需要服务器服务器Hadoop+Hive搭建,但经常有人问我,怎么去选择自己的配置最好,今天天气不错,我们一起来聊一下这个话题. Hadoop+Hive环境搭建 1虚拟机和系统 ...
- javascript实现朴素贝叶斯分类与决策树ID3分类
今年毕业时的毕设是有关大数据及机器学习的题目.因为那个时间已经步入前端的行业自然选择使用JavaScript来实现其中具体的算法.虽然JavaScript不是做大数据处理的最佳语言,相比还没有优势,但 ...
- 计时器C#
用于测某一方法执行所用的时间: Stopwatch sw = new Stopwatch(); sw.Start(); //功能代码块 sw.Stop(); long totalTime = sw.E ...
- drbd.9.0版本部署
DRBD9.0部署 1) drbd软件安装 软件:drbd-9.0.0.tar.gz . drbd-utils-8.9.5.tar.gz(从8.4.5开始,drbd软件分成了两部分:核心模块和管理工具 ...
- 【分享】01. Eclipse for PHP + phpStudy 搭建php开发环境
配置php编译器 配置phpStudy服务器项目发布目录 修改hosts文件127.0.0.1 www.350zx.cn 新建项目 启动的你的phpStudy
- 枪战Maf[POI2008]
题目描述 有n个人,每个人手里有一把手枪.一开始所有人都选定一个人瞄准(有可能瞄准自己).然后他们按某个顺序开枪,且任意时刻只有一个人开枪.因此,对于不同的开枪顺序,最后死的人也不同. 输入 输入n人 ...
- 玛雅游戏[NOIP2011]
题目描述 Mayan puzzle 是最近流行起来的一个游戏.游戏界面是一个7 行5 列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指在规定 ...
- Hibernate学习总汇
Hibernate的基础知识 什么是框架? 什么是Hibernate框架? |--1.应用在javaee三层结构中的dao层 |--2.在dao层里面做对数据库进行crud操作,使用hibernate ...