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:[email protected]/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下 参数前务必带上$符号!!!!

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