vue ie8 兼容方案

公司合作了一个项目，前端是用的vue构建的 非SPA

项目的最后上线，客户提出必须要 兼容IE8

最后的最后，只能寻求解决兼容方案了。在先用的双向绑定的框架中，我选用了 avalon2

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

http://avalonjs.coding.me/home.html

吐槽一句：文档写的过于一般，跟vue的文档，真是一个天，一个地....

下面说出一些对比解决的语法

基础部分

new Vue -->  avalon.define

el: -->$id

id="xxx" --> ms-controller="footer"

去掉data外层包裹

去掉methods外层包裹

语法部分

v-model --> ms-duplex

v-for --> ms-for ,(index,item)顺序需要替换

:href  -->  ms-attr="{href: ''}"

v-show --> ms-visible 

v-html --> ms-html

v-if --> ms-if

:style -->ms-css

:class 不用改动

:自定义属性 ms-attr="{'xxx': '' +  +''}"  (如果自定义属性有特殊符号切记用 引号包裹)

多个自定义属性用逗号隔开：ms-attr="{'a': 'b','c':'d'}"

一个小实例

	
show attr
	
{{index}}--{{item}}
	
{{index}}
	

最终花费了1天的时间替换了100多个页面。速度还是比较快速的。

切记：ie8下 参数前务必带上$符号!!!!

这篇先这样，下面一篇文章将讲解对比的 生命周期，事件，组件 等的转换，后续会写一个开源转换器 ：) (不能发表情真坑爹)