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'}"

一个小实例

<script type="text/javascript" src="https://unpkg.com/avalon2@2.2.4/dist/avalon.js"></script>
<div ms-controller="app">
	<div ms-if="isshow" ms-attr="{'a': 'b','c':'d'}">show attr</div>
	<div ms-for="(index,item) in datas">{{index}}--{{item}}</div>
	<div ms-for="(index,item) in nums">{{index}}</div>
	
</div>
<script>
	var _vm_wbstc = avalon.define({
		$id: 'app',
       	isshow:true,
		datas:['a','b','c'],
		nums:new Array(5),
        init: function() {
        }
	});
	console.log(_vm_wbstc);
	_vm_wbstc.init();
</script>

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

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

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