一. vue要求我們轉變像jquery一樣直接操作dom的思想妄壶，擁抱數(shù)據(jù)驅動的思想霞扬，例如，需要操作列表中其中一個元素時翼闹，可以為該列表所有元素添加index遍歷斑鼻，然后使用index達到想要實現(xiàn)的目的
// 綁定索引和事件
<ul>
<li v-for="(item, index) in items" @click="changeActive">
</ul>
// 在方法中使用索引
methods: {
changeActive (index) {
console.log(index)
}
}
二. 即使完全是數(shù)據(jù)驅動，有些時候還是會造成一些麻煩猎荠，我們難免會想要通過操作dom來直接獲取我們想要的元素坚弱，別擔心，vue也能替我們解決的
<div ref="selectdiv">我是div</div>
mounted () {
console.log(Vue.$refs.sellectdiv.innerHTML) // 我是div
}
三. vue實例化以后綁定到data上的數(shù)據(jù)是無法響應式更新的关摇，這是es5語法本身的限制荒叶，所有初始化一個空數(shù)組然后ajax更新數(shù)組的想法在一般情況下是行不通的，但是vue提供了一個方法输虱，使用Vue.$set可以動態(tài)的綁定數(shù)據(jù)到data上并能夠響應式刷新
四. 使用vue.$router.go(0)可以對當前組件強制刷新些楣，這里也是使用了history API和vue-router的編程式導航
五. vux組件樣式的重寫，解決組件下重寫vux樣式不能加scoped的問題，解決方法是可以將vux組件寫為一個新的自定義組件愁茁，在該組件下重寫全局樣式（不加scoped）蚕钦，然后其他組件引用這個自定義組件就可以了
六. vux內部集成了ajaxPlugin，可以使用像vue-resource一樣的api鹅很，類似this.$http來發(fā)起ajax請求嘶居，有個小問題，在this.$http的回調函數(shù)then中促煮，不能再使用this來調用實例的數(shù)據(jù)和方法邮屁，應該在請求外部定義let that = this，然后再在請求內部使用它
let that = this
this.$http({
method: 'get',
url: 'http://xxx.com',
data: ''
}).then(function (response) {
let res = response.data
that.data = res
console.log(that.data)
})
七. 下拉刷新污茵，由于vue數(shù)據(jù)驅動視圖的特點樱报，那下拉刷新就很好實現(xiàn)了葬项，判斷頁面滾動的高度與頁面文檔的高度進行一定條件的對比泞当，在mounted中使用js監(jiān)聽頁面滾動即可
window.addEventListener("scroll",yourFunction)
八. vue提供了一個監(jiān)聽函數(shù)可以頁面路由的變化，watch民珍，在這個函數(shù)中可以監(jiān)聽路由的變化而執(zhí)行相應的事件（這個函數(shù)也可以監(jiān)聽頁面數(shù)據(jù)的變化）
watch: {
// route代表你的路由襟士，路由變化即執(zhí)行你的函數(shù)
'route': 'yourFunction'
}
九. 在使用vux的組件時（如輪播圖，其實不論哪個插件哪個組件都一樣）嚷量，如果組件處在一個條件渲染（v-show）的父組件下會出現(xiàn)各種詭異的問題陋桂，因為使用了v-show時父組件會隱藏，而各類插件的輪播圖會獲取不到父級寬度蝶溶，這時候可能出現(xiàn)的問題就隨著不同輪播的實現(xiàn)方式不同而不同（這個問題可能只有在具體碰到的時候才會明白我在說什么）
十. 在對router-link進行狀態(tài)切換時嗜历，首先可以采用vue自帶的方式，當你選中一個路由時抖所，vue會給你的router-link加上一個class:router-link-active梨州，當class滿足不了你的需求時，可以給你的所有路由都加上一個狀態(tài)田轧，然后用數(shù)據(jù)切換暴匠，這里就可以在你點擊不同的路由時切換顯示的圖片
<ul>
<li v-for="(item, index) in ifimgsrc" @click="changeActive(index)">
<router-link :to="/index/index">
<div>
<img :src=item.imgsrc1 alt="" v-show="!ifimgsrc[index].status">
<img :src=item.imgsrc2 alt="" v-show="ifimgsrc[index].status">
</div>
</router-link>
</li>
</ul>
export default {
data () {
return {
ifimgsrc: [
{'status': false},
{'status': true},
{'status': false},
{'status': false},
{'status': false}
]
},
methods: {
changeActive (index) {
for (let i = 0; i < this.ifimgsrc.length; i++) {
this.ifimgsrc[i].status = false
}
this.ifimgsrc[index].status = !this.ifimgsrc[index].status
}
}
}
十一. routerEach配合meta字段可以實現(xiàn)單頁面修改頁面標題
// 路由鉤子
router.afterEach((to, from, next) => {
if (to.meta) {
document.title = to.meta
}
})
