前端框架avalon替换vue示例，适应IE8

2024-04-27 15:13:49

字体：大中小

来源：转载

供稿：网友

　　最近接手一个学校网站的修改工作，硬性要求是支持IE8，但是坑爹的是源代码的前端框架用了vue。由于avalon与vue模板比较相似，最后决定用avalon替换掉它。下面写一个示例以便以后查看。

下面的vue模板

<div id="app"> <div>{{ "name: " + name }}</div> <div>{{ "sex: " + sex }}</div> <div v-for="e in arr"> <a href="yourweb/{{e}}.html">{{ e }}</a> </div> <bottom text="It's bottom!"></bottom></div><script type="text/javascript"> var app = new Vue({ el: "#app", data: { name: "amu", sex: "man", arr: [a, b, c] } }); Vue.component("bottom", { PRops: ["text"], template: "<div>{{text}}</div>" });</script>

在avalon中如下书写

<div ms-controller="app"> <div>{{ "name: " + @name }}</div> <div>{{ "sex: " + @sex }}</div> <div ms-for="e in @arr"> <a ms-attr="{href: 'yourweb/'+e+'.html'}">{{ e }}</a> </div> <xmp ms-widget="{is:'ms-bottom', text:'It's bottom!'}"></xmp></div><script type="text/Javascript"> var app = avalon.define({ $id: "app", name: "amu", sex: "man", arr: [a, b, c] }); avalon.component("ms-bottom", { template: "<div>{{@text}}</div>", defaults: { text: "" } });</script>

avalon存在的问题

替换的过程中，发现avalon在某些方面实现存在缺陷 1.数字循环

<div v-for="i in 5"></div><div ms-for="i in @arr|limitBy(5)"></div><script type="text/javascript"> var vm = avalon.define({ $id: "", arr: new Array(20) });</script>

2.成员类型 在vue中，允许一个成员为对象，如Date类型的对象。而avalon中，想要实现一个对象类型需要用{}模拟

//vuenew Vue({ el: "", currentDate: new Date()});//avalonavalon.define({ $id: "", currentDate: { year: 2017, month: 2, day: 9 }});

上一篇：bootstrap table插件运用

下一篇：图片裁剪插件Jcrop.js的使用