Vue開發中的常見問題

最近在羣裏看到在你們在學習vue的過程當中，遇到的不少問題都十分的相似，這裏作一下總結：

2016-6-12 更新

新的基於Vue實現的問題和解決方案查詢文庫上線 地址

• 能夠根據關鍵字查詢相關的問題

• 每一篇均可以分享

• 能夠貢獻你的問題和解決方案，加入到文庫中

歡迎你們的pull request & star

---

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>

注意：是"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');

若是你的webpack配置了html-loader，那麼久很方便了，只在img的src中寫入相對路徑

<img src="./images/logo.png" />

輕鬆又愉快

---

暫時想到這麼多，若是有新的內容會及時的更新的。