版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mengtianqq/article/details/81979742
web前端框架avalon使用详解
目录
一、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>