IT虾米网

vue ie8 兼容方案详解

leader 2019年04月15日 编程语言 163 0

公司合作了一个项目,前端是用的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/[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下 参数前务必带上$符号!!!!

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

 

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Linux 查看磁盘读写速度IO使用情况详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。