AvalonJs前端开发的神器

最新推荐文章于 2018-05-09 13:31:15 发布

LiMing_0820

最新推荐文章于 2018-05-09 13:31:15 发布

阅读量529

点赞数

本文链接：https://blog.csdn.net/LiMing_0820/article/details/60756391

版权

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的
自动扫描机制

掌握了上面的入门实例，如果还是一脸懵逼的状态，没关系，下面的教程会带你直冲云霄

官方教程链接：http://avalonjs.coding.me/directive.html

LiMing_0820

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AvalonJs前端开发的神器

avalon2是一款基于虚拟DOM与属性劫持的迷你、易用、高性能的前端MVVM框架，拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。入门实例：html> head> title>first exampletitle> meta charset="UTF-8"
复制链接

扫一扫