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-width: 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  阻止默認提交