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>

这里面涉及一些知识点

  1. vm,使用avalon.define方法生成,必须带$id属性
  2. 指令,以ms-开头的属性及双花括号的插值表达式
  3. 圈定作用域,使用ms-controller告诉框架,只处理这个范围内的标签
  4. 引导符,使用@或##来告诉框架这些变量是来自vm的
  5. 自动扫描机制

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的更多相关文章

  1. UIkit – 轻量级前端框架

    原始地址:UIkit – 轻量级前端框架 高效轻量级前端框架: 来自:咕噜分享

  2. 前端框架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 ...

  3. UIkit – 轻量级前端框架，帮助你快速构建 Web 界面

    UIKit 是一个轻量级,模块化的前端框架,用于构建快速和强大的 Web 界面.UIKit 为您提供了 HTML,CSS 和 JavaScirpt 组件,使用简单,容易定制和扩展.UIKit 基于 L ...

  4. (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]

    https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...

  5. 【入门篇】前端框架Vue.js知识介绍

    一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...

  6. 前端框架React Js入门教程【精】

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  7. 可能是目前最完整的前端框架 Vue.js 全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...

  8. MakaJs：基于 React, Redux 的轻量级前端框架

    github: maka.js 留下您宝贵的STAR!谢谢 maka maka源于中文码咖,意为写代码的大咖 一眼即可看懂的前端框架,简约而不简单 1.安装 bash sudo npm i -g @m ...

  9. 使用MVVM框架avalon.js实现一个简易日历

    最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简易日历,毕竟也是第一次造日历这种轮子,所以这里记录下我当 ...

随机推荐

  1. Java编程代码性能优化总结

    如果有足够的时间开发.维护代码,这时候就必须考虑每个可以优化的细节了,一个一个细小的优化点累积起来,对于代码的运行效率绝对是有提升的. 代码优化的目标是: 1.减小代码的体积 2.提高代码运行的效率 ...

  2. 使用C#创建SQLite桌面应用程序

    本文属于原创,转载请注明出处,谢谢! 一.开发环境 操作系统:Windows 10 X64 开发环境:VS2015 编程语言:C# .NET版本:.NET Framework 4.0 目标平台:X86 ...

  3. .net 自动摘要等算法 HanLP.net

    参考资料: http://www.hankcs.com/nlp/call-hanlp-in-csharp.html 目前自动摘要算法似乎没有.net 版本,而以java,python 居多 自动摘要算 ...

  4. DAX/PowerBI系列 - 关于时间系列 - 如何用脚本生成时间维度 (Generate Date Dimension)

    跟大家的交流是我的动力. :) DAX/PowerBI系列 - 关于时间系列 - 如何用脚本生成时间维度 (Generate Date Dimension) 难度: ★☆☆☆☆(1星) 适用范围: ★ ...

  5. 华为OJ之放苹果

    题目描述: 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法.输入每个用例包含二个整数M和N.0<=m< ...

  6. 网关(Gatesvr) 设计(1)

    Gate解决的问题: 1.用户在服务端的实例可以在不同的进程中,也可以移动到同一个进程中.2.用户只需要与服务端建立有限条连接,即可以访问到任意服务进程.这个连接的数量不会随服务进程的数量增长而线性增 ...

  7. ETL作业调度软件TASKCTL4.1单机部署

    单机部署,实际上就是将EM节点和一个Server节点安装到同一个地方.EM节点是TASKCTL服务端的最顶层,主要负责客户端与服务端之间的通信.Server节点是TASKCTL的调度服务控制层,也有A ...

  8. pwnable.kr leg之write up

    看代码: #include <stdio.h> #include <fcntl.h> int key1(){ asm("mov r3, pc\n"); } ...

  9. 【整理】01. jQuery.Form.js 用法分析

    前言: 为什么使用JQuery.From.js,因为原生<form>表单没有回调函数,不过可以通过jquery-form.js这个插件来实现回调函数. jQuery.form.js是一个f ...

  10. java_AWT常用组件

    Button:按钮,可接受单击操作. Canvas:用于绘图的画布. Checkbox:复选框组件(也可以变成单选框组件). CheckboxGroup:用于将多个Checkbox组件合成一组,一组C ...