vue框架使用說明
1.目前後臺框架主要運用了Bootstrap，用Vue模板去渲染數據。
2.運用webpack進行打包壓縮加版本號，並實時監控頁面變化,使用命令npm run dev啓動
如上圖所示（除dist外，README.md是介紹，通過npm install安裝的node_module中有些配置需要修改）
1） build和config文件主要是webpack打包和端口的信息配置
2） dist是打包以後纔會生成的文件（npm run build執行此命令）
3） node_modules是webpack的依賴模塊，在node中使用npm install命令進行安裝
4） static文件夾主要放的是一些靜態資源。（CSS+JS+IMG+JSON+fonts等）
5） src 主要放的是你當前項目文件,一般是由組件+模塊組成
components存放的就是你需要的組件
module就是當前需要的模塊
模塊裏面建好對應模塊的文件名稱即可。每個模塊裏面包含的文件
其中紅框標識出來的是每個模塊都必要的
APP.vue裏面由三部分構成
1.樣式表
<style scoped>
@import "../../../static/css/plugin/footable.core.mim.css";
th{color:#ab333a}
.mr-0{margin:0 0 0 11px!important;}
.table tbody{text-align: center;}
.count{position: absolute;}
</style>2.模板
<template>
//TODO
</template>3.JS邏輯處理
<script>
//TODO
</script>這裏先補充點vue知識
從開始創建、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命週期
基本組件的使用：
new Vue({
el, //要綁定的DOM element
data, //要綁定的資料
props, //可用來接收父原件資料的屬性
template, //要解析的模板，可以是#id , HTML 或某個DOM element 實體
computed, //定義資料的getter 與 setter,即需要計算後才能使用的屬性
components, //定義子元件，可用ES6簡寫法 例如（MyHeader）
methods, //定義可以在元件或樣版內使用的方法
propsData, //存放預設的props 內容，方便測試用
relplace, //要不要用template取代el指向的DOM Element預設爲ture
})這裏說一下v-if和v-show的差別
v-if與v-show最大的差別在於對DOM的操作，v-if會依照條件決定是否將原件渲染至網頁上，並決定時間於材料的監聽是否要綁定至原件或直接銷燬該原件
v-show則是必定會產出原件，但以條件來切換css（style）的現實與否，若條件改變頻繁，用v-show來切換更適合
再來一張vue1.0和vue2.0的對比圖
這裏在解釋一下method和component以及slot
<b>methods:</b>一次加載一個數據
<b>component:</b>一次加載多個數據,相當於屬性的一個實時計算，如果實時計算裏關聯了對象，那麼當某個值改變的時候，同時會發出實時計算。
<b>slot:</b>使用slot分發內容，他的作用主要是爲了讓組件組件之前可以進行組合（混合父組件的內容和子組件自己的模板，這個過程叫做內容<b>分發</b>）
<slot>的意思是插槽，插入的內容是從父組件傳進來的,淺顯點說就是提前站好坑，等需要用的時候，在過來用，好比老爹和兒子去吃飯，吃飯前，老爹要去上廁所，讓兒子去佔好餐桌，等老爹回來後，二人在一起吃。<slot>就是外部調用時，標籤中的內容。如果外部調用時沒有提供內容的話，那麼它就會使用自己默認的內容。舉一個例子說明：
<template>
<div>
<slot name="CPU">這兒插你的CPU</slot>
<slot name="GPU">這兒插你的顯卡</slot>
</div>
</template>假設有個組件computer
<template>
<computer>
<div slot="CPU">Intel Core i7</div>
<div slot="GPU">GTX980Ti</div>
</computer>
</template>補充vue的幾個很重要生命週期：
beforecreate:這個Vm 在實例化之後 就是剛生下來
beforeCreate: function(){}
create:這裏已經完成了 數據觀測 屬性和方法 的運算 事件回調
created: function(){}
掛載：
beforemount:掛載之前使用 掛載就是 $el屬性不能用
beforeMount: function(){}
mount:掛載到實例上了，原有的 el 被新創建的vm.$el替換了
mounted: function(){}
DOM：
beforeupdated:當數據更新時調用
beforeUpdate: function(){}
updated:由於數據的修改，虛擬DOM 重新渲染和打補丁 這個之後調用該鉤子
updated: function(){}
Vue父子級的傳值
1、 父頁面向子頁面傳值
①例如：
<editmerchant v-ref:profile></editmerchant>父頁面通過賦值
self.$refs.profile.items = items[i];把父頁面的值放到items中存儲，
（注：在一個父頁面中有多個v-ref時，profile是你可以定義的名字，但是注意要和$refs調用的名稱保持一致。）
在子頁面中直接調用items的方法屬性即可。但是必須在初始化數據的時候return items: {}，
export default {
data() {
return {
items:{}
}
},
}不然沒有預期效果哦～
②在父頁面中綁定事件，調用子頁面的方法，子頁面通過props來觸發。
父：<editamount v-ref:profile2 :msginfo="msgInfo" ></editamount>
子：
2、子頁面向父頁面傳值（子頁面修改完成，父頁面的數據不刷新得到更新）
父頁面通過v-on綁定對應的事件
<editgoods v-ref:profile v-on:parentinfo="search"></editgoods>子頁面使用$emit
這樣就實現了子頁面傳值給父頁面啦~
導入導出
如果是涉及到後臺管理的系統開發，這個多半都會用到~這裏會介紹兩種方法來實現，不過都大同小異：
1（第一種）、
① 導入
導入是通過表單來做的，所以必須要使用FormData（使用FormData的最大優點就是我們可以異步上傳一個二進制文件。）
②導出
1.如果是get方式可以直接把下載的鏈接寫到href裏面如：<a href=”xxx.com”></a>這種方式的侷限性是不適合傳很多參數。
2.可以通過form表單解決
傳遞很多個參數，就這樣實現O(∩_∩)O（截圖部分是主要代碼）
2、（第二種）
① 上傳
- 在實現下載的過程中，總是會遇到請求方式post的問題。我需要的是get請求的方式。
這裏找了一下，axios可以強制轉爲get的方式。
axios.get('http://10.1.5.217:8080/api/loanRace/excelDownload').then( res => {
console.log(res);
})
api.excelExport().then( res =>{
if(res.errcode == "00000000"){
console.log(res.datas);
this.tableData = res.datas;
}
})- 外部api中需要import引入axios
import axios from 'axios'- 在接口api.js中，export導入baseUrl
export default {
baseURL: axios.defaults.baseURL，
//TODO....
}錯誤的上傳（×）：
importInfo:function() {
var file = document.getElementById('upload');
//e.currentTarget.files 是一個數組，如果支持多個文件，則需要遍歷
// var name=e.currentTarget.files[0];
// var params = new FormData(name);
var formData = new FormData(file[0]);
console.log(formData);
api.excelConfirm(formData).then( res =>{
console.log(res);
if(res.errcode == "00000000"){
this.tableData = res.datas;
}
});
}正確的上傳（√）：
importInfo:function() {
var file = document.getElementById('upload');
//e.currentTarget.files 是一個數組，如果支持多個文件，則需要遍歷
// var name=e.currentTarget.files[0];
// var params = new FormData(name);
console.log(file.files[0]); //獲取當前的文件
var params = new FormData(); //一般數據都放在form表單裏
params.append('file',file.files[0]);
//excelConfirm()上傳的接口
api.excelConfirm(params).then( res =>{
console.log(res);
// if(res.errcode == "00000000"){
// this.tableData = res.datas;
// }
});
}上傳執行結果：
②下載
因爲下載的方式是get請求，不涉及到傳很多參數的問題，所以這裏直接可以用a鏈接就可以下載，如：
<a v-bind:href="downloadUrl" class="downloadExcel">下載Excel</a>exportInfo:function() {
window.location.href = this.downloadUrl;
}暫時就寫到這裏，更好的實現方式，還會在補充～
