web前端框架avalon使用详解

web前端框架avalon使用详解

目录

一、avalon介绍：

二、avalon使用详解：

1、 引入avalon.js。

2、创建avalon实例。

3、编写引用的代码，注意事项，

---

一、avalon介绍：

        avalon是一款基于虚拟DOM与属性劫持的迷你，易用，高性能的前端MVVM框架，拥有超优秀的兼容性，支持移动开发，后端渲染，WEB Component式组件开，无需编译，开箱即用。

二、avalon使用详解：

1、 引入avalon.js。

<script src="../js/avalon.js"></script>

2、创建avalon实例。

<script>
    var vm = avalon.define({
        $id: 'div_show',
        index: 0,
        show: function (index) {
            this.index = index;
        }
    })
</script>

3、编写引用的代码，注意事项，

  创建一个id为"div_show"的div，avalon的工作区域就只这个div的范围之内。

<div class="box" id="div_show">
    <!--选项卡-->
    <div class="title">
        <div class="title_div title_div_active" :click="show(0)" :class="(index==0? 
            'title_div_active':'')">新闻公告</div>
        <div class="title_div" :click="show(1)" :class="(index==1? 'title_div_active':'')">
              内部通知</div>
        <div class="title_div" :click="show(2)" :class="(index==2? 'title_div_active':'')">
           企业文化</div>
        <div class="title_div" :click="show(3)" :class="(index==3? 'title_div_active':'')">
          临时消息</div>
    </div>

</div>