Vue項目框架

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父子級的傳值

一、 父頁面向子頁面傳值 
①例如：

<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> 
 
子： 

二、子頁面向父頁面傳值（子頁面修改完成，父頁面的數據不刷新獲得更新） 
父頁面經過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（截圖部分是主要代碼）

二、（第二種） 
① 上傳

• 在實現下載的過程當中，老是會遇到請求方式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; }