以下是我在使用vue過程中自己對vue的一些小總結，希望對學習vue的親們能有所幫助：
1. http的post請求：
this.$http({url: '/someUrl', method: 'GET'}).then(function (response) { // success callback }, function (response) { // error callback });
eg1：this.$http.post(serverApi, {'method':'getOrgInfo','params':{orgid:_orgid}}, {
headers: {
token: userToken
}
}).then(function(response) {
if(response.ok&&response.data!=undefined){
this.enterpriseData= response.data[0][0];
this.enterpriseData.orgid=_orgid;
}else{
alert('網絡請求數據失敗！');
}
},function(err) { //ajax請求出錯
alert(err.message);
});
eg2:this.$http.post(serverApi, _this.getOrgOpListData, {
headers: {
token: userToken
}
}).then(function(response) {
if (response.ok && response.data != undefined ) {
response.data[1].forEach(function(item) {
item.members = false;
item.leader = false;
});
this.getOrgOpListResult.items = response.data[1];
}
},function(err) { //ajax請求出錯
alert(err.message);
});
此處有坑請注意:當你將ajax請求拿回的數據賦值給getOrgOpListResult.items 后，並且想動態再給getOrgOpListResult.items 添加屬性時，當你在別的方法里需要改變動態添加的這個屬性時，你是訪問不到這個屬性的，所以應該在ajax請求拿回的數據里動態添加屬性，然后再將其賦給getOrgOpListResult.items，然后你就可以訪問並修改給getOrgOpListResult.items動態添加的屬性了。
2.數據雙向綁定：
適用於：<input>、<select>、<textarea>
eg：JS代碼：
data () {
return {
eg1:'張三',
}
}
html代碼：
<input type='text' v-model='eg1'>
當你在改變這個文本輸入框的值時，data中的“eg1”的值相應也會改變。
3.如果想在只是單純的顯示data里數據的值。
eg：JS代碼：
data () {
return {
eg1:'張三',
}
}
html代碼：<label >{{eg1}}</label>
4.循環遍歷v-for:
eg:
<template v-for="(index city ) in dc.city">
<option value='{{city.codeno}}'>{{ city.codename }}</option>
</template>
dc.city是你要循環遍歷的data，index代表city數據的索引，city 是dc.city的別名，city.codeno、city.codename是循環遍歷的data里的屬性。
5.邏輯判斷v-if: v-if是根據所傳的值決定是否加載該模塊/dom。
eg: JS代碼：
data() {
return {
showFlag: true,
}
}
html代碼：
<div v-if='showFlag' class='login-container' ></div>
當showFlag的值是true時，class為login-container的div才顯示。
6.v-else：在v-if或v-show后緊跟的dom后可以跟v-else,邏輯類似與if和else。
7.v-on：縮寫@,綁定事件監聽器,普通元素中只能監聽原生DOM事件,自定義組件中可以監聽組件中的自定義事件.可以傳參$event。
eg1: JS代碼：
methods: {
backLogin: function() {
this.showRegisterFlag = false;
this.showforgotPwdFlag = false;
this.showFlag = true;
},
}
html代碼：
<button type='submit' class='btn btn-warning' v-on:click='backLogin'>返回</button>
當單擊“返回”按鈕時觸發其clik事件，調用'backLogin'方法。
eg2:JS代碼：
methods: {
addSelectedTagForMembers: function(index) {
this.getOrgOpListResult.items[index].members = true;
}, }
html代碼：
<template v-for='item in getOrgOpListResult.items'>
<div class="select-item" v-on:click='addSelectedTagForMembers($index)'>{{item.name}}</div>
</template>
當單擊某一個class為select-item的div時，調用addSelectedTagForMembers($index)方法，在此方法中改變當前你點擊的getOrgOpListResult.items里members屬性的值。
8.v-bind：可以綁定src/class /style/prop等,此處重點說下v-bind:class的用法
eg1: <div class="select-item" v-bind:class="{'selected': item.members}" ></div>
當item.members的值為true時，該div的class="select-item selected"
eg2:
<input v-bind:class="{'reds': confirmPassword!=registeredData.password}" class='form-control' type="password">
當滿足confirmPassword!=registeredData.password時該密碼框class='form-control reds '
9.v-link：是一個用來讓用戶在 vue-router 應用的不同路徑間跳轉的指令。該指令接受一個 JavaScript 表達式，並會在用戶點擊元素時用該表達式的值去調用 router.go。
eg: <a v-link="{ path: '/practice/taskAssignment/'+parmasForRouter.ac_id, activeClass: 'practice-active-class'}">任務分配</a>
當你要在跳轉過去的頁面taskAssignment內拿到你跳轉頁面時傳的參數ac_id值時，用以下方式獲取傳參的值：
var acid=this.$route.params.ac_id;
鏈接活躍時的class:帶有 v-link指令的元素，如果 v-link對應的 URL 匹配當前的路徑，該元素會被添加特定的 class。默認添加的 class 是 .v-link-active，而判斷是否活躍使用的是包含性匹配。
鏈接活躍時的 class 名稱可以通過在創建路由器實例時指定 linkActiveClass全局選項 來自定義，也可以通過 activeClass內聯選項來單獨指定：
eg: <a v-link="{ path: '/a', activeClass: 'custom-active-class' }"></a>
10.引用插件：
eg : JS代碼：
import yeziTablePaing from 'yezi-vue/widget/yeziTablePaing.vue'
export default {
components:{
yeziTablePaing
},
props:{ },
}
當你用import引用插件后在 components 中記得寫入。