vue ie8 兼容方案

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

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

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

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

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

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

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

基础部分

new Vue -->  avalon.defineel: -->$idid="xxx" --> ms-controller="footer"去掉data外层包裹去掉methods外层包裹

语法部分

v-model --> ms-duplexv-for --> ms-for ,(index,item)顺序需要替换:href  -->  ms-attr="{href: ''}"v-show --> ms-visible v-html --> ms-htmlv-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下参数前务必带上$符号!!!!

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

vue ie8 兼容方案相关推荐

Nerv --- React IE8 兼容方案
创建项目创建一个目录,使用npm快速初始化 $ mkdir my-project && npm init -y 安装依赖安装webpack以及babel $ npm install ...
vw 前端_前端适配之vw兼容方案（Vue版）
前端适配可以说是前端工程师一个永恒的话题,而解决方案也是层出不穷,其目的都是为了在各个分辨率中最大程度还原设计稿.今天给大家介绍的是vw兼容方案,其原理就是根据视口宽度自动计算页面上的尺寸,无论高度. ...
box-shadow IE8兼容处理
根据canisue(http://caniuse.com/#search=box-shadow),box-shadow兼容性如下图所示: 测试代码: 1 <!DOCTYPE html> 2 ...
css borderradius ie8,border-radius IE8兼容处理的方法
测试代码: * { margin: 0; padding: 0; } #header { width: 400px; height: 400px; margin: 10px; border-radiu ...
css borderradius ie8,border-radius IE8兼容处理方法介绍
根据canisue(http://caniuse.com/#search=border-radius),border-radius兼容性如下图所示: 测试代码: * { margin: 0; padd ...
android popupwindow 自定义背景,Android PopupWindow背景半透明兼容方案
大家想必对PopupWindow不会很陌生吧,我们在开发中经常会遇到要求使其背景半透明的需求,但网上的很多解决方案只能是在大部分机型上满足要求,像华为这样的机型就会发现我们原来设置的背景变暗效果的代码 ...
IE中的CSS3不完全兼容方案
IE中的CSS3不完全兼容方案 Opacity透明度元素的透明度在IE中可以很方便的用滤镜来实现. view source print? 1 background-color:green; 2 op ...
Emoji表情符号兼容方案(适用ios,android,wp等平台)
http://blog.csdn.net/qdkfriend/article/details/7576524 Emoji表情符号兼容方案一什么是Emoji emoji就是表情符号:词义来自日语(え ...
javascript 解决IE8 兼容 placeholder 属性含password
javascript 解决IE8 兼容 placeholder 属性含password function placeholderfun(){if( !('placeholder' in docume ...
js中getBoundingClientRect的作用及兼容方案
js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

vue ie8 兼容方案

vue ie8 兼容方案相关推荐

最新文章

热门文章