vue 支持IE，回车点击事件

上几篇文章说过了，最近在做vue 项目，由于项目前端人员紧张，所以身为后台人员的我也做了一下前端工作，而在使用vue 过程中遇得了一些小问题，下面针对这些问题做一些记录

一、vue 支持IE问题，

由于Chrome 浏览器的强大简洁，所以大部分开发人员都在使用Chrome 浏览器做开发和调试，但是在上线后要兼容许多其他浏览器

最普遍的就是IE浏览器兼容问题，那么如何使用vue兼容IE呢

1、安装 babel-polyfill 

npm install --save babel-polyfill

2、 引用 babel-polyfill——修改webpack.base.conf.js 中 entry（我是用的方式）

module.exports = {
//原来配置
  // entry: {
  //   app: './src/main.js';
  // },

//新的配置
  entry: {
    app: ["babel-polyfill", "./src/main.js"]
  },
  ........
}

备注：

针对该问题查了一些其他的网上的解决方案——下面一位开发人员的说明更详细一些（原链接：https://www.cnblogs.com/princesong/p/6728250.html）

安装babel-polyfill后

引用方式有三种：

1.require("babel-polyfill");

2.import "babel-polyfill";

3.module.exports = {

　　entry: ["babel-polyfill", "./app/js"]

};

注：第三种方法适用于使用webpack构建的同学，加入到webpack配置文件(webpack.config.js)entry项中

重新执行构建命令，在低版本的浏览器中就可以正常打开页面了。

说了半天babel-polyfill到底是干什么的；在网上查找一些资料后发现原因（参考文章：https://www.jianshu.com/p/4822852792d1）

 vue 应用了许多ES6语法和API,但是一些浏览器由于版本和开发等问题无法识别和支持这些语法和命令；而BabelBabel 可以将ES6代码转为ES5代码，但是BabelBabel 默认只转换新的JavaScript语法（syntax），如箭头函数等，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码；因此我们需要polyfill

 

二、回车键——点击事件

在进行列表页面开发时，会不可避免的设计查询操作，比较好的用户体验是——输入查询条件后，点击回车键，自动触发事件于是添加了代码（为了更好的体现内容删减了一些）

<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  <el-form :inline="true" :model="filters" @submit.native.prevent>
      <el-form-item>
         <el-autocomplete class="inline-input"  v-model="filters.unitName" placeholder="请输入内容"style="min- 240px;"    @keyup.enter.native="handleSearch"></el-autocomplete>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </el-form-item>
  
  </el-form>
</el-col>

其中  @keyup.enter.native="handleSearch"  为回车键功能

但是在使用的时候，发现在点击回车键时会整个页面刷新，而不是根据条件局部数据更新——由于不是前端人员所以问题原因不再做细致分析；

只针对网上查找的解决方案进行记录

做过的同学应该已经看出来了 <el-form>中的一段代码就是解决该问题的

@submit.native.prevent

 @submit.native.prevent  阻止默认提交