Vue培訓項目總結

　　　　昨天是最後一次給同事進行Vue的培訓，此次培訓主要是以基礎入門爲主。

　　　　整篇講義參考了一些文章：https://gitbook.cn/gitchat/column/5a4af1c5658b7c0d9ebe1131/topic/5a4dfdddbb7105032b4fa06b

　　　　　　　　　　　　　　　　https://blog.csdn.net/insistlzh/article/details/79381796

　　　　在學習任何一種語言或者框架的時候，學到的知識，要會把它用出來才能變成本身的經驗。你們本身平時學習的時候也要學會總結。此次，從總體說一下Vue常見的坑。　　　　

　　  1、Vue.js

　　　　我認爲Vue.js是一個數據驅動的漸進式的框架，雙向數據綁定，經過指令的方式實現不少功能，組件式開發。

　　　　通常的項目中，只要不涉及到特殊的頁面效果，均可以採用數據驅動頁面的方法，包括頁面間各類展現效果，經過CSS屬性和Vue.js的指令配合就能夠解決大部分的問題了。因此，你們在用這個框架的時候，要記住：數據驅動頁面，用數據控制你的頁面。

　　　　

　　2、Vue常見的坑

　　　　一、this

　　　　在開發中，咱們使用data中定義的變量或者methods定義的方法時，都是經過this.xxx或者this.xxx()的方式去調用。可是有的時候會出現報錯，說this.xxx爲undefined；咱們明明已經定義了這些變量或方法，但它仍會報錯

　　　　出現這種問題的緣由：

　　　　①箭頭函數　　　

new Vue({
  data: {
      item: {
        title: '',
        description: '',
      }
  },
  methods: {
    saveItem: function() {
      let vm = this;

      this.$http.post('item', this.item)
        .then(

          function (response) {
            vm.item.title = '';
            vm.item.description = '';
          }, 

          function (response) {
            console.log('error', response);
          }
        );
    }
  }
});　　

　　　　咱們如今看一下上述代碼，經過變量vm將tihs保存，這樣的目的就是爲了咱們可以不受函數執行上下文影響獲取Vue的實例對象；這種方式寫起來很麻煩，咱們可使用箭頭函數的方式，去精簡咱們的代碼,以下：這樣咱們就能夠不用老是保存一下this變量就能夠獲取到Vue實例了

saveItem: function() {
      this.$http.post('item', this.item)
        .then( (response)=> {
            vm.item.title = '';
            vm.item.description = '';
          },(response) =>{
            console.log('error', response);
          }
        );
    }

　　箭頭函數雖然很好用，但並非全部的函數定義都要用到它。

saveItem:()=>{
    this.$http.post('item',this.item).then(
        //callbacks in here
    )
}

　　若是寫成這樣的話，代碼看起來更精簡，可是會遇到一個坑，就是this的指向問題，此時的this並無指向Vue實例，它獲取的是window.item

　　ES6約定了一種新的函數定義方式，能夠直接把函數名看成函數來聲明。以下：

var obj = {
    foo:function(){},
    bar:function(){}
}
//ES6 methods definitions it becomes
var obj ={
    foo(){},
    bar(){}
}

　　咱們用這種方式簡寫咱們的saveItem方法，也不會出現this的繼承問題

　　這也就是爲何在Vue中儘可能用ES6的語法去寫js

　　data相關

　　　　在Vue中的組件開發中，咱們定義的data這個對象能夠看成一個閉包return回來，官方文檔的解釋是：爲了保證組件內部的狀態獨立，避免多個組件共用一個data

　　　　以前也說過，在data中也能夠寫成函數的形式

var sum = (a,b)=>{return a+b}//傳統的塊級結構，須要有return
var sum = (a,b)=>a+b;//簡單結構  ---（爲了代碼規範，不建議用這種方式）
//若是返回一個值得時候，能夠直接把值寫上，可是若是返回得是一個對象字面量，就必須把你返回得對象用括號包起來返回。

　　　　②交互

　　　　　　在使用axios進行交互的時候，你返回函數中想用this.xxx進行賦值或調用方法，this.xxx或this.xxx() 有時也會報undedined的錯誤

　　　　　　解決方法：　　　　　

var that=this;
axios.get('/list?now_page=4')
 .then(function (res) {
    that.listData=res.data
 })
 .catch(function (err) {
     console.log(err);
 });

　　二、父子組件傳參

　　　　父組件給子組件的數據是異步獲取的，子組件獲取到數據後再渲染，在父組件傳遞數據以前，子組件先進行渲染時，子組件此時在 mounted 中打印數據是 undefined。

　　　　解決方法一：

　　　　　　給子組件加v-if，先不讓它顯示，等到數據獲取後再顯示。

　　　　解決方法二：

　　　　　　能夠用vuex狀態管理 

　　三、圖片路徑

　　　　在開發中涉及到圖片路徑的切換，你會發如今一開始設置的時候，路徑是可用的，可是在打包的時候，會報錯，變成‘../../../a/b/c/image/bg.png’。出現這種問題的緣由是在開發時和打包後的路徑是不同的，這時咱們能夠用require('相對路徑')的方式解決　　

<img :src="imgUrl">

data(){
    return {
       imgUrl:require('../asserts/images/bg.png'); 
    }
}

　　四、請求問題

　　　　XMLHttpRequest cannot load XXX. Response for preflight has invalid HTTP status code 405

　　　　出現這種問題是由於在post請求中，post的默認格式是request payload，而不是 form data。解決這個問題，咱們只須要添加一個 headers 進行設置，以下。　　　　

headers: {'Content-Type': 'application/x-www-form-urlencoded'}

　　五、template的問題

<template>
    <div class="box1"></div>
    <div class="box2"></div>
</template>

　　以上代碼會報錯以下：

　　　　template syntax error Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

　　　　解決方法：

　　　　　　在 template 下面只能有一個元素，你的其餘元素都應該在這個元素中，以下面的代碼。　　　

<template>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</template>

　　六、開發中的指令使用（不作講解，遇到本身查文檔）

　　七、自定義指令

　　　　最容易被忽視的環節，你們把其餘的掌握好後再去了解學習

　　八、組件開發（重點，須要不斷實踐，在實踐中處理）

　　九、axios請求

　　　　請求的通常坑我就不說了，這些都是我的緣由，這裏講解一種狀況，若是你的後臺進行了請求限制，也就是說限定了你只能用 post 或者 get 請求，這個時候你是用 axios.js 進行交互，你用的也是 post 或者 get，可是後臺也出現了錯誤請求。

　　我在工做中發現的一種狀況是，在頁面交互過程當中，axios 必定概率會發送兩次請求，一次是本身設置的請求方式，還有一次是 options。

 

　　通過查找資料，得出如下結論。

 

　　　　跨域資源共享標準新增了一組 HTTP 首部字段，容許服務器聲明哪些源站有權限訪問哪些資源。另外，規範要求，對那些可能對服務器數據產生反作用的 HTTP 請求方法（特別是 GET 之外的 HTTP 請求，或者搭配某些 MIME 類型的 POST 請求），瀏覽器必須首先使用 OPTIONS 方法發起一個預檢請求（Preflight Request），從而獲知服務端是否容許該跨域請求。服務器確認容許以後，才發起實際的 HTTP 請求。在預檢請求的返回中，服務器端也能夠通知客戶端，是否須要攜帶身份憑證（包括 Cookies 和 HTTP 認證相關數據）。

也就是說，它會先使用 options 去測試，你這個接口是否可以正常通信，若是不能就不會發送真正的請求過來，若是測試通信正常，則開始正常請求。

關於這個問題，須要在後臺進行設置，容許 options 請求，否則你的請求就會受到影響。後臺做出判斷，若是請求方式爲 options，告訴它能夠通信，其它什麼都不用作。