（一）eslint靜態檢查
在大家用vue-cli創建工程的時候，會有一項，使用使用eslint，如果選擇了y，那么工程就會安裝並啟用eslint。
這里列舉一下常見的錯誤：
1.多余的分號 
2.定義了卻未使用的變量 
3.結尾多余空格 
4.超過一行的空行 
5.代碼尾行應該有空行 
錯誤肯定是列舉不完的，那么提示錯誤的時候，我們應該先去看提示信息（翻譯），如果發現沒有錯誤，可以對照eslint的官方文檔
在大家適應了eslint的寫法后，效率和正確率會直線上升，這里安利下我的另一篇文章，提升效率的eslint+vscode的開發環境搭建
（二）this指向
經常會有朋友問一些undifined的錯誤，比如：
<script>
import Hello from './components/Hello'
export default {
data () {
return {
list: ['a', 'b', 'c'],
idx: 0,
current: ''
}
},
methods: {
iter () {
this.list.map(function (v, k) {
if (k === this.idx) {
this.current = v
console.log(this.current)
}
})
}
},
components: {
Hello
}
}
</script>
這是剛創建的工程，我們定義了list，idx和current，在執行iter方法時，我們就給current賦值以idx為下標的值，當我們執行后會發現，瀏覽器報了一個錯誤
這么回事，我們不是定義了idx了嗎？
其實是因為我們在map里的this是指向當前map的迭代對象，而非我們vue的實例，所以this里沒有我們需要的idx。
解決方式有兩種，其一是通過保存this
let _this = this
其二是使用es6箭頭函數
methods: {
iter () {
this.list.map((v, k) => {
if (k === this.idx) {
this.current = v
console.log(this.current)
}
})
}
},
現在再看我們的瀏覽器
已經可以達到我們預期的效果了！
再來一發
<div @click="check"></div>
methods: {
check () {
alert('ok')
}
}
大家會發現並不會alert，但是語法沒錯誤呀，這是為什么呢？
讓我媽修改alert
methods: {
check () {
window.alert('ok')
}
}
這下alert就能正常工作了，大家肯定都明白是怎么一回事了！
沒錯 就是this的鍋！
（三）方法傳值
我們在input中的方法希望獲取input的value，怎么獲取呢？
可以通過$event這個對象，通過將$event傳入方法
<input type="text" value="value" @input="change($event)"/>
我們可以成功的拿到我們希望的值
change (e) {
console.log(e.target.value)
this.value = e.target.value
}
（四）迭代判斷
比如我們有一個列表，我們希望能顯示我們當前選中的那一個，如何實現呢？
基本思路是通過$index來判斷是否是當前迭代對象，然后去增減class或者style來實現不同的樣式
<ul>
<!-- 方法1 class-->
<li v-for="item in list" :class="{'active': $index === activeId}">{{item}}</li>
<!-- 方法2 style-->
<li v-for="item in list" :style="{backgroundColor: $index === activeId ? 'red' : 'white'}">{{item}}</li>
</ul>
data () {
return {
list: ['a', 'b', 'c'],
activeId: 0
}
},
（五）camelCase vs. kebab-case
HTML 特性不區分大小寫。名字形式為 camelCase 的 prop 用作特性時，需要轉為 kebab-case（短橫線隔開）(官網例子)
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>
另外props的寫法
簡寫
props: ['demo-first', 'demo-second']
帶類型
props: {
'demo-first': Number,
'demo-second': Number
}
帶多種檢查
props: {
'demo-first': {
type: Number,
default: 0
}
}
所以， 當你獲取不到props的值的時候，可以先仔細檢查拼寫是否正確。
（六）傳值與傳字面量
在vue的組件中傳遞數據，如果是單純傳遞字面量，如
<hello result="success"></hello>
那么在hello中獲取的props result的值就是“success”，如果希望進行值傳遞，需要在指令前加 ‘:’ 冒號，這樣，父層的success的值改變，hello的值也會跟着改變。
（七）轉場動畫
在vue中有個很好用的指令，transition，通過它我們可以實現自定義的router切換中的動畫
方法就是在
<router-view transition="fade"></router-view>
加入自定義的class fade-transition , fade-leave , fade-enter即可。
（八）數據驅動 vs dom
vue是基於數據驅動的，最好不要直接去修改dom（雖然官方給出了這樣的方法）
（九）v-cloak
如果出現{{}}的短暫出現的情況，可以通過添加v-cloak來處理。
這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例准備完畢。
（十）使用sass
首先安裝依賴
npm i node-sass sass-loader -D
然后在vue的style里添加
<style lang="scss" scoped></style>
注意：是"scss"!然后重啟webpack，就ok啦
（十一）vue片段
有時候我們會看到這個警告 
這是因為我們的template中，出現了片段，那么這個片段到底是什么gui呢？
我們可以理解為是一段沒有根的dom元素，官網上是這么描述的
下面幾種情況會讓實例變成一個片斷實例：
模板包含多個頂級元素。 模板只包含普通文本。 模板只包含其它組件（其它組件可能是一個片段實例）。 模板只包含一個元素指令，如 <partial> 或 vue-router 的 <router-view>。 模板根節點有一個流程控制指令，如 v-if 或 v-for。vue建議我們為片段添加一個根節點，這樣方便傳遞props和過渡效果，也可以讓dom更好的溯源，所以，解決方法很簡單，在template的內部套一層div即可，像這樣
// 片段 <template> <h1>hello</h1> <h2>world</h2> </template>
// 套div
<template>
<div>
<h1>hello</h1>
<h2>world</h2>
</div>
</template>
（十二）引用圖片
首先，如果使用的是img標簽那么可以這樣
data () {
return {
img: require('path/to/your/source')
}
}
然后在template中
<img :src="img" />
如果使用的是背景圖的方式，那么
可以這樣data () {
return {
img: require('path/to/your/source')
}
}
<div :style="{backgroundImage: 'url(' + img + ')'}"></div>
或者直接在css中定義
background-image: url('path/to/your/source');
轉自：http://cnodejs.org/topic/5750d752491b9c4f36910fec