一款轻量级前端框架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>

这里面涉及一些知识点

  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>{{@[email protected]}} 这个性能好些</p>
    <p>{{@[email protected]  | uppercase}} 选择器必须放在表达值的后端</p>
</body>
时间: 2024-10-22 03:09:52

一款轻量级前端框架Avalon.Js的相关文章

轻量级MVVM框架Vue.js快速上手(MVVM、SEO单页面应用)

轻量级MVVM框架Vue.js快速上手(MVVM.SEO单页面应用.×××服务器端渲染.Nuxt.js) 网盘地址:https://pan.baidu.com/s/1LkhepNpGAtRjrxp_CVJNIg 密码: d483备用地址(腾讯微云):https://share.weiyun.com/5tTLqQk 密码:pxezuj Vue.js是一套构建用户界面的轻量级MVVM框架,与其他重量级框架不同的是, Vue.js 的核心库只关注视图层,并且非常容易学习,很容易与其它前端技术或已有的项

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/details/78133622 vue构造.vue组件和vue实例这三个是不同的概念,它们的关系有点类似于Java的继承概念: 关系:vue构造->vue组件->vue实例 也就是说不同的vue组件可以共用同一个vue构造,不同的vue实例可以共用同一个vue组件.在大型项目中,用过java开发的都知

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

现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用

Vue.js高仿饿了么外卖App 前端框架Vue.js 1.0升级2.0

课程目录:第1章 课程简介介绍课程的学习目标和学习内容.第2章 Vuejs介绍从前端开发趋势分析开始,引入 MVVM 开发框架和 Vue.js,接着对比流行框架Angular 和 React,最后详细介绍 Vue.js 的核心思想-数据驱动和组件化.第3章 Vue-cli 开启 Vuejs 项目介绍 Vue 项目的脚手架,如何安装,对脚手架生成的目录文件做介绍,介绍 Vue 组件的编写方法,最后运行 demo 项目并介绍 webpack 构建脚本来说明 demo 的运行原理.第4章 项目实战-准

前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化

每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.前言 趁着10月的最后一天,来写一篇关于前端国际化的实践型博客.国际化应该都不陌生,就是一个网站.应用可以实现语言的切换. 在这就不谈原理,只说说如何实现中英文的切换.做技术的总得先把 demo 做出来嘛. 二.demo 场景需求分析 需求很简单,左上角 ''网易云音乐''就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本. 切换成英文版本: 三.实现国际化

推荐一款程序员常用的web前端框架

不知道现在大家使用的web前端框架都是什么?也许有人和我一样会想到jQuery,但今天给大家介绍的确实另外一款比较受欢迎的web前端框架,把我用的体验和大家分享一下,希望这款web前端框架能够被大家认识. 这是一款比较新颖的前端框架,但是功能不得不服.100多项功能任你选,你想要的各类表格.组件.各种不同的界面选择性很多,这也是我选择用QUICK UI的原因,很多人应该和我之前一样,不知道QUICK UI是什么?这里给大家也简单的介绍一下. QUICK UI 是基于jquery开发的一款前端UI

web前端框架

1. Bootstrap Boostrap绝对是目前最流行用得最广泛的一款框架.它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面.它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件. Bootstrap是用动态语言LESS写的,主要包括四部分的内容: 脚手架——全局样式,响应式的12列栅格布局系统.记住Bootstrap在默认情况下并不包括响应式布局的功能.因此,如果你的设计需要实现响应式布局,那么你需要手动开启这项功能.

十三种常用的Web前端框架

在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apache基金会后发布的第一个版本. 需要注意的是,Flex目前还在孵化阶段,还不是Apache的正式项目,Flex 4.8也不是一个正式的Apache版本. Apache称,该版本标志着Flex新时代的开始,Flex的未来将由社区来驱动,而不是由一个公司驱动.开发者可以通过贡献代码,来帮助改进Flex,如