前端（六）JS框架篇

四葉草hhc發表於2019-05-20
前端JS框架

vue篇

1、Vue 的生命週期（鉤子函式），呼叫每個鉤子的時候做了什麼

  • 建立前/後：在beforeCreated 階段， 例項的掛載元素 $el 和資料物件 data以及事件還未初始化。
  • 在 created階段，Vue例項的資料物件 data以及方法的運算有了，$el還沒有。
  • 載入前/後：在 beforeMount階段，render 函式首次被呼叫，Vue例項的$el 和 data 都初始化了，但還是掛載在虛擬的 DOM節點上。
  • 在mounted階段，Vue 例項掛載到實際的 DOM操作完成，一般在該過程進行 Ajax 互動。 更新前/後：在資料更新之前呼叫，即發生在虛擬 DOM 重新渲染和打補丁之前，呼叫 beforeUpdate。
  • 在虛擬DOM 重新渲染和打補丁之後，會觸發 updated方法。
  • 銷燬前/後：在執行例項銷燬之前呼叫 beforeDestory，此時例項仍然可以呼叫。
  • 在執行 destroy方法後，對 data 的改變不會再觸發周期函式，說明此時Vue 例項已經解除了事件監聽以及和 DOM的繫結，但是 DOM 結構依然存在。

  • 首先建立一個vue例項，Vue()；

  • 在建立Vue例項的時候，執行了init()，在init過程中首先呼叫了beforeCreate。

  • Created之前，對data內的資料進行了資料監聽，並且初始化了Vue內部事件。具體如下：

  • 完成了資料觀測；

  • 完成了屬性和方法的運算；

  • 完成了watch/event事件的回撥；

  • 但是此時還未掛載dom上，$el屬性是不可見的；

  • beforeMount之前，完成了模板的編譯。把data物件裡面的資料和vue的語法寫的模板編譯成了html，但是此時還沒有將編譯出來的html渲染到頁面；

    • 1）、在例項內部有template屬性的時候，直接用內部的，然後呼叫render函式去渲染。
    • 2）、在例項內部沒有找到template，就呼叫外部的html（“el”option（選項））。例項內部的template屬性比外部的優先順序高。 render函式 > template屬性 > 外部html；
    • 3）、要是前兩者都不滿足，那麼就丟擲錯誤。

  • Mounted之前執行了render函式，將渲染出來的內容掛載到了DOM節點上。mounted是將html掛載到頁面完成後觸發的鉤子函式；當mounted執行完畢，整個例項算是走完了流程；在整個例項過程中，mounted僅執行一次；

  • beforeUpdate：資料發生變化時，會呼叫beforeUpdate，然後經歷virtual DOM，最後updated更新完成；

  • beforeDestory是例項銷燬前鉤子函式，銷燬了所有觀察者，子元件以及事件監聽；

  • destoryed例項銷燬執行的鉤子函式；

如果有子元件的話，那麼呼叫順序為：

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

1.2、什麼是 Vue 生命週期？

Vue 例項從建立到銷燬的過程，就是生命週期。從開始建立、初始化資料、編譯模板、掛載 DOM -> 渲染、更新 -> 渲染、銷燬等一系列過程，稱之為 Vue 的生命週期。

1.3、第一次頁面載入會觸發Vue 哪幾個鉤子？

會觸發 4 個生命鉤子：建立前/建立後、掛載前/掛載後
複製程式碼

1.4、DOM 渲染在哪個週期就已經完成？

在 beforeMounted時它執行了 render函式，對$el 和 data進行了初始化，但此時還是掛載到虛擬的DOM節點，然後它在 mounted時就完成了 DOM 渲染，這時候我們一般還進行 Ajax 互動。

2、Vue 的渲染過程

  • vue模板的本質是字串，利用各種正則，把模板中的屬性去變成 js 中的變數，vif,vshow,vfor 等指令變成 js 中的邏輯
  • 模板最終會被轉換為 render 函式
  • render 函式執行返回 vNode
  • 使用 vNode 的 path 方法把 vNode 渲染成真實 DOM

3、Vue的整個實現流程

  • 1）先把模板解析成 render 函式，把模板中的屬性去變成 js 中的變數，vif,vshow,vfor等指令變成 js 中的邏輯
  • 2）執行 render 函式，在初次渲染執行render函式的過程中 繫結屬性監聽，收集依賴，最終得到 vNode，利用 vNode的 Path方法，把 vNode 渲染成真實的 DOM
  • 3）在屬性更新後，重新執行 render 函式，不過這個時候就不需要繫結屬性和收集依賴了，最終生成新的vNode
  • 4）把新的 vNode和 舊的 vNode去做對比，找出真正需要更新的 DOM，渲染

4、Vue 的響應式原理

Vue 內部使用了 Object.defineProperty() 來實現資料響應式，通過這個函式可以監聽到set 和 get 的事件。

1）首先利用 Object.defineProperty()給 data中的屬性去設定 set, get 事件 遞迴的去把 data 中的每一個屬性註冊為被觀察者

2）解析模板時，在屬性的 get 事件中去收集觀察者依賴

3）當屬性的值發生改變時，在 set事件中去通知每一個觀察者，做到全部更新

4、vue 特點：漸進式 框架 雙向資料繫結

  • 雙向資料繫結：檢視改變 資料自動更新；資料更新 檢視自動改變
  • 漸進式：vue vue-router路由 vuex axios
  • 框架：自己寫的程式碼被框架呼叫（庫：自己呼叫庫的程式碼）

5、vue元件如何傳值

1）父傳子

  • 過程

    • （1）.通過v-bind繫結屬性，把相應的資料傳遞給子元件
    • （2）.子元件通過props接收傳進來的資料

2）子傳父

本質上是父元件使用子元件的資料

  • 通過自定義事件觸發父元件中的方法
  • 再由子元件方法的執行通過this.$emit('自定義事件名',this.qqq)傳遞子元件的資料
import Vue from 'vue'

const component = {
  props: ['value1'],
  template: `
    <div>
      <input type="text" @input="handleInput" :value="value1">
    </div>
  `,
  data () {
    return {
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value)
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  template: `
    <div>
      <comp-one :value1="value" @input="value = arguments[0]"></comp-one>
    </div>
  `,
  data () {
    return {
      value: '123'
    }
  }
})

複製程式碼

3）非父子元件間的資料傳遞

兄弟元件傳值eventBus，就是建立一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件。

4）假設在工作中，有三個 .vue 檔案：A.vue、B.vue、C.vue。A.vue 是主頁面，B.vue 和 C.vue 類似於頭部導航條和底部導航欄。現在，B.vue 點選會切換路由，C.vue 需要獲取 B.vue 傳遞的資訊。

A.vue

<template>
  <div>
    <top-nav></top-nav>
    <div class="container">
      <router-view></router-view>
    </div>
    <bottom-nav></bottom-nav>
  </div>
</template>
複製程式碼

bus.js

import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue();

export default bus;
複製程式碼

B.vue

<template>
  <div class="bottom-nav">
    <div class="nav-one" @click="goToPage({path: '/HomeIndex', meta:'首頁'})">
      <i class="icon-home"></i>
      <span>首頁</span>
    </div>
  </div>
</template>

<script>
  import bus from '../utils/bus'
  export default {
    methods: {
      goToPage(route) {
        this.$router.push(route.path);
        bus.$emit('meta', route.meta);
      }
    }
  }
</script>
複製程式碼

C.vue

<template>
  <div class="top-nav">
    <span class="title">{{title}}</span>
  </div>
</template>

<script>
  import bus from '../utils/bus'
  export default {
    data() {
      return {
        title: ''
      }
    },
    created() {
      bus.$on('meta', msg=> {
        this.title = msg;
      })
    }
  }
</script>
複製程式碼

6、實現一個 EventEmitter 方法

EventEmitter 方法主要包含了 on,emit,once,off方法。

  class Event {
    constructor() {
          this.events = Object.create(null);
      }
      on(name, fn) {
        if (!this.events[name]) {
            this.events[name] = []
          }
          this.events[name].push(fn);
          return this;
      }
      emit(name, ...args) {
        if (!this.events[name]) {
            return this;
        }
        const fns = this.events[name]
        fns.forEach(fn => fn.call(this, ...args))
        return this;
      }
      off(name,fn) {
        if (!this.events[name]) {
            return this;
        }
          if (!fn) {
            this.events[name] = null
            return this
          }
          const index = this.events[name].indexOf(fn);
          this.events[name].splice(index, 1);
        return this;
      }
      once(name,fn) {
        const only = () => {
          fn.apply(this, arguments);
          this.off(name, only);
        };
        this.on(name, only);
        return this;
      }
  }

複製程式碼

7、vue的雙向資料繫結

Vue 採用 資料劫持 結合 釋出者-訂閱者 模式的方式，通過 Object.defineProperty() 來劫持各個屬性的 setter以及getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。

  • 第一步：需要 Observe的資料物件進行遞迴遍歷，包括子屬性物件的屬性，都加上 setter 和 getter。這樣的話，給這個物件的某個值賦值，就會觸發setter，那麼就能監聽到了資料變化。

  • 第二步：Compile 解析模板指令，將模板中的變數替換成資料，然後初始化渲染頁面檢視，並將每個指令對應的節點繫結更新函式，新增監聽資料的訂閱者，一旦資料有變動，收到通知，更新資料。

  • 第三步：Watcher 訂閱者是Observer和 Compile 之間通訊的橋樑，主要做的事情有：

    • 在自身例項化時往屬性訂閱器（dep）裡面新增自己。
    • 自身必須有一個 update() 方法
    • 待屬性變動 dep.notice()通知時，能呼叫自身的update()方法，並觸發 Compile 中繫結的回撥，則功成身退。

  • 第四步：MVVM作為資料繫結的入口，整合 Observer、Compile 和 Watcher 三者，通過 Observer來監聽自己的 model 資料變化，通過 Compile 來解析編譯模板指令，最終利用 Watcher搭起 Observer 和 Compile 之間的橋樑，達到資料變化 -> 檢視更新；檢視互動變化（input） -> 資料 model 變更的雙向繫結效果。

8、key值的作用

使用 v-for更新已渲染的元素列表時,預設用就地複用策略。

列表資料修改的時候,他會根據key值去判斷某個值是否修改：如果修改,則重新渲染這一項;否則複用之前的dom，僅修改value值。

9、vue2中的diff演算法是怎樣實現的？

當資料發生改變時，set方法會讓呼叫Dep.notify通知所有訂閱者Watcher，訂閱者就會呼叫patch給真實的DOM打補丁，更新相應的檢視。

diff流程

  • patch函式接收兩個引數oldVnode和Vnode分別代表新的節點和之前的舊節點

    • 判斷兩節點是否值得比較，值得比較則執行patchVnode；
    • 不值得比較則用Vnode替換oldVnode；

  • patchVnode：當我們確定兩個節點值得比較之後我們會對兩個節點指定patchVnode方法；

    • 找到對應的真實dom，稱為el；
    • 判斷Vnode和oldVnode是否指向同一個物件，如果是，那麼直接return；
    • 如果他們都有文字節點並且不相等，那麼將el的文字節點設定為Vnode的文字節點；
    • 如果oldVnode有子節點而Vnode沒有，則刪除el的子節點；
    • 如果oldVnode沒有子節點而Vnode有，則將Vnode的子節點真實化之後新增到el；
    • 如果兩者都有子節點，則執行updateChildren函式比較子節點，這一步很重要；

  • updateChildren函式圖解

前端（六）JS框架篇

  • 現在分別對oldS、oldE、S、E兩兩做sameVnode比較，有四種比較方式，當其中兩個能匹配上那麼真實dom中的相應節點會移到Vnode相應的位置，這句話有點繞，打個比方：

    • 如果是oldS和E匹配上了，那麼真實dom中的第一個節點會移到最後；
    • 如果是oldE和S匹配上了，那麼真實dom中的最後一個節點會移到最前，匹配上的兩個指標向中間移動；
    • 如果四種匹配沒有一對是成功的，那麼遍歷oldChild，S挨個和他們匹配，匹配成功就在真實dom中 將成功的節點移到最前面，如果依舊沒有成功的，那麼將S對應的節點插入到dom中對應的oldS位置，oldS和S指標向中間移動。

10、Vue.js的template編譯

  • 可以分成三部分

    • 將模板轉化為抽象語法樹；
    • 優化抽象語法樹；
    • 根據抽象語法樹生成程式碼；

答案：

  • 首先，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 原始碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以- 建立編譯器的。另外compile還負責合併option。
  • 然後，AST會經過generate（將AST語法樹轉化成render funtion字串的過程）得到render函式，render的返回值是VNode，VNode是Vue的虛擬DOM節點，裡面有（標籤名、子節點、文字等等）；

11、vue的computed和watch區別

  • computed 是計算一個新的屬性，並將該屬性掛載到 vm（Vue 例項）上，而 watch 是監聽已經存在且已掛載到 vm 上的資料，所以用 watch同樣可以監聽 computed 計算屬性的變化（其它還有 data、props）

  • computed 本質是一個惰性求值的觀察者，具有快取性，只有當依賴變化後，第一次訪問 computed 屬性，才會計算新的值，而watch則是當資料發生變化便會呼叫執行函式 從使用場景上說，computed 適用一個資料被多個資料影響，而 watch 適用一個資料影響多個資料；

12、Vuex是什麼

vuex 就像一個全域性的倉庫，公共的狀態或者複雜元件互動的狀態我們會抽離出來放進裡面。

vuex的核心主要包括以下幾個部分：

  • state：state裡面就是存放的我們需要使用的狀態，他是單向資料流，在 vue 中不允許直接對他進行修改，而是使用 mutations 去進行修改
  • mutations: mutations 就是存放如何更改狀態的一些方法
  • actions： actions 是來做非同步修改的，他可以等待非同步結束後，再去使用 commit mutations 去修改狀態
  • getters: 相當於是 state 的計算屬性

使用：

  • 獲取狀態在元件內部 computed中使用 this.$store.state得到想要的狀態
  • 修改的話可在元件中使用 this.$store.commit方法去修改狀態
  • 如果在一個元件中，方法，狀態使用太多。 可以使用 mapState，mapMutations輔助函式

13、vue指令

指令都是行內屬性

`v-model`放在input、textarea、select>option上的，實現雙向資料繫結

`v-text` 展示對應的文字

`v-once`  對應的標籤只渲染一次

`v-show=布林` 是否能顯示，true能顯示，false不能顯示（存在隱式轉化）

`v-html`  把值中的標籤渲染出來
複製程式碼

v-for

迴圈顯示元素
可以迴圈陣列、物件、數字、字串
最好加:key='a+i'
v-for='item in ary'
複製程式碼

v-bind

用於繫結行內屬性
簡寫成:
複製程式碼

v-if

控制是否渲染該元素
值是true，則渲染該元素；false則不渲染
與v-else v-else-if連著使用
可以使用template標籤，就不會出現多餘標籤
複製程式碼

14、vue-router

基本用法

步驟

  • 1、宣告元件
  • 2、編寫路由對映表
  • 3、把編輯好的對映表注入到router例項中
  • 4、把router例項注入到根例項中router-link 控制跳轉的連結和顯示的文字 router-view控制顯示的元件內容 active-class控制選中對應路徑的類名tag 控制渲染成什麼標籤
<body>
    <div id="app">
       <router-link to='/home' active-class='current'>首頁</router-link>
       <router-link to='/list' tag='div'>列表</router-link>
       <router-view></router-view>
    </div>
</body>

</html>
<template id="home">
    <div>home</div>
</template>
<template id="list">
    <div>list</div>
</template>
<script src="../node/node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>

    let home = {
        template: '#home',

    }
    let list = {
        template: '#list',

    }

    //路由對映表
    let routes = [{
            path: '/home',
            component: home
        },
        {
            path: '/list',
            component: list
        }
    ]

    let router=new VueRouter({
        routes:routes,
    })
    let vm = new Vue({
        el: '#app',
        data: {
            name: "liu"
        },
        router,
    })
</script>

複製程式碼

傳參

提供了兩種傳參方式

  • 1、query傳參（問號傳參） 路由對映表不用改動 :to={path:'',query:{}}或者:to={name:'',query:{}}
  • 2、params傳參（路徑傳參） 在對映表中新增 /:變數 的形式； :to={name:'',params:{變數:''}}}

<router-link :to='{path:"/list",query:{id:123,e:name}}' tag='div'>列表</router-link>

重定向redirect

let routes = [
        {
            path:'/',
            redirect:'/son2/222'
        },
        {
            path:'/son1',
            // redirect:'/son2/5555',
            name:'son1',
            component:son1,
            redirect:'/son1/sz',
            children:[
                {
                    path:'/son1/sz',
                    component:sz
                }
            ]
        },
        {
            path:'/son2/:bl1234',
            name:'son2',
            component:son2
        },
        {
            path:'/*',
            redirect:'/son1'
        }
    ]

複製程式碼

推薦文章 前端面試題—vue部分詳解

刷前端面試題的話，收藏這一篇就夠了！

15、Vue的路由實現：hash模式 和 history模式

hash模式：在瀏覽器中符號“#”，#以及#後面的字元稱之為hash，用window.location.hash讀取； 特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重載入頁面。

hash 模式下，僅 hash 符號之前的內容會被包含在請求中，如http://www.xxx.com，因此對於後端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。

history模式：history採用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。

history 模式下，前端的 URL必須和實際向後端發起請求的 URL 一致，如http://www.xxx.com/items/id。後端如果缺少對 /items/id的路由處理，將返回 404 錯誤。

16、請說下封裝vue元件的過程？

1）首先，元件可以提升整個專案的開發效率。能夠把頁面抽象成多個相對獨立的模組，解決了我們傳統專案開發：效率低、難維護、複用性等問題。

2）使用Vue.extend方法建立一個元件，然後使用Vue.component方法註冊元件。子元件需要資料，可以在props中接受定義。而子元件修改好資料後，想把資料傳遞給父元件。可以採用emit方法。

17、v-if和v-show的共同點和區別（考察頻率：中）

參考官方文件

  • 都是用來做條件渲染，通過條件控制元素的顯示與隱藏。
  • v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。
  • v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。
  • 相比之下，v-show就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
  • 一般來說，v-if 有更高的切換開銷，而v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

18、Virtual DOM

Vue 在 render 中 createElement 的時候，並不是產生真實的 DOM 元素，實際上 createElement 描述為 createNodeDescription，因為它所包含的資訊會告訴 Vue 頁面上需要渲染什麼樣的節點。 因此，我們將這樣的節點描述為 “虛擬節點”（Virtual Node），簡稱 VNode。“虛擬 DOM” 是我們對由 Vue 元件樹建立的整個 VNode 樹的稱呼。

推薦：

《Vue原理解析之Virtual Dom》

《virtual-dom(Vue實現)簡析》

19、Vue介面呼叫 - 請求json資料,前後端互動,

19.1、vue-resource

  • 特點  

1、體積小：vue-resource非常小巧，在壓縮以後只有大約12KB，服務端啟用gzip壓縮後只有4.5KB大小，這遠比jQuery的體積要小得多。

2、支援主流瀏覽器：和Vue.js一樣，vue-resource除了不支援IE 9以下的瀏覽器，其他主流的瀏覽器都支援

3、支援Promise API和URI Templates：Promise是ES6的特性，Promise的中文含義為“先知”，Promise物件用於非同步計算。 URI Templates表示URI模板，有些類似於ASP.NET MVC的路由模板

4、支援攔截器：攔截器是全域性的，攔截器可以在請求傳送前和傳送請求後做一些處理。 攔截器在一些場景下會非常有用，比如請求傳送前在headers中設定access_token，或者在請求失敗時，提供共通的處理方式。

  • 基本使用

1）.基於全域性Vue物件使用http

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);

Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
複製程式碼

2）.在一個Vue例項內使用$http

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
複製程式碼

  • 選項options

    • url:傳送請求的URL

    • body:作為請求主體傳送的資料

    • headers:標題物件作為HTTP請求表頭傳送

    • params:作為url引數傳送的引數物件

  • $http方式資料請求

  • get
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
    </head>
 
    <body>
        <div id="app">
            <button v-on:click="sendGet()">傳送get請求</button>
        </div>
    </body>
 
</html>
<script>
    var vm = new Vue({
        el: "#app",
        methods: {
            sendGet: function() {
                //這裡的this指代的是   vm物件
                var url = "http://127.0.0.1:3000/login?username=admin&password=123";
                this.$http.get(url).then(function(res) {
                    console.log(res.data)
                },function(err){
                    console.log(err)
                })
            }
        }
    })
</script>

複製程式碼
  • post
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
    </head>
 
    <body>
        <div id="app">
            <button v-on:click="sendPost()">傳送post請求</button>
        </div>
    </body>
 
</html>
<script>
    var vm = new Vue({
        el: "#app",
        methods: {
            sendPost: function() {
                //這裡的this指代的是   vm物件
                var url = "http://127.0.0.1:3000/postLogin";
                /**
                 * vue的post引數:如果是普通的post請求,最後一個就是{emulateJSON:true}
                 *
                 * 引數一:url
                 *
                 * 引數二:data-要傳遞的資料-物件的形式
                 *
                 * 引數三:如果是普通的post請求,最後一個就是{emulateJSON:true}
                 *
                 * */
                this.$http.post(url, {
                    username: 'lisi',
                    password: 'lisi'
                }, {
                    emulateJSON: true
                }).then(function(res) {
                    console.log(res.data)
                })
            }
        }
    })
</script>
複製程式碼
  • jsonp
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
    </head>

    <body>
        <div id="app">
            <button v-on:click="sendPost()">傳送post請求</button>
        </div>
    </body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        methods: {
            sendPost: function() {
                //這裡的this指代的是   vm物件
                var url = "http://127.0.0.1:3000/postLogin";
                /**
                 * vue的post引數:如果是普通的post請求,最後一個就是{emulateJSON:true}
                 * 
                 * 引數一:url
                 * 
                 * 引數二:data-要傳遞的資料-物件的形式
                 * 
                 * 引數三:如果是普通的post請求,最後一個就是{emulateJSON:true}
                 * 
                 * */
                this.$http.post(url, {
                    username: 'lisi',
                    password: 'lisi'
                }, {
                    emulateJSON: true
                }).then(function(res) {
                    console.log(res.data)
                })
            }
        }
    })
</script>

複製程式碼

19.2、axios

在Vue中傳送AJAX請求：Vue本身並不支援傳送ajax請求，需要使用第三方外掛vue-resources(1.0,但是2.0中不建議使用)、官方推薦使用axis(2.0)；但是也可以用jQuery;

  • 什麼是axios？

axios是一個基於promise的http請求客戶端，用來傳送請求，也是vue2.0官方推薦使用的；在vue2.0官方推薦的，同時不再對vue-resource進行更新和維護。

  • axios具體用來做什麼

    • 從瀏覽器中建立XMLHttpRequests

    • 讓HTTP從node.js的請求

    • 支援Promise API

    • 擷取請求和響應

    • 轉換請求和響應資料

    • 取消請求

    • 自動轉換JSON資料

    • 客戶端支援防範XSRF

axios的github地址和使用方式：github.com/axios/axios

  • 使用axios說明：

axios([options])

axios.get(url[,options]);

傳參方式：
    1.通過`url`傳參
    2.通過`params`選項傳參
複製程式碼

axios.post(url,data,[options]);

`axios`預設傳送資料時，資料格式是`Request` `Payload`，並非我們常用的`Form Data`格式，
所以引數必須要以鍵值對形式傳遞，不能以`json`形式傳參

傳參方式：
    1.自己拼接為鍵值對
    2.使用`transformRequest`，在請求傳送前將請求資料進行轉換
    3.如果使用模組化開發，可以使用`qs`模組進行轉換
複製程式碼

axios本身並不支援傳送跨域的請求，沒有提供相應的API，所以只能使用第三方庫

  • 如何解決跨域問題：

客戶端通過jsonp或者vue-resource支援

如果服務端通過CORS支援跨域，則客戶端不需要處理跨域

20、如何使用Vue動態搭建頁面

  • 1）、引入vue，引入jQuery（因為等下用Ajax請求資料用到jQuery）
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
複製程式碼
  • 2）、初始化並繫結vue

首先在自己的網頁body內新增一個div包括所有內容，並給這個div設定id

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
//你的html程式碼
    </div>
</body>
</html>
複製程式碼
  • 3）、建立vue並掛載到頁面（如果在單獨建立js檔案來寫，則需在htmll中引入這個js檔案）

建立如下：

window.onload = function() {
  new Vue({
    el: "#app",//將vue掛載到html中你建立的那個帶id="app"上
    data: {
      aboutData: [], //建一個空陣列，用來儲存呼叫介面獲取的資料
    },
    created: function() {
      this.getRoute();
    },
    mounted() {
 
    },
    methods: {
      getRoute: function() {
        var that = this;
        $.ajax({
          type: "GET",
          url:
            "填寫你的資料介面地址",
          dataType: "json",
          success: function(response) {
               aboutData = response;
            //寫在獲取資料成功後你想進行的操作
          },
          error: function() {
            alert("請求失敗");
          }
        });
      }
  });
};
複製程式碼
  • 4）、可以在html程式碼中呼叫vue相關語法來寫進動態資料了

微信小程式篇

推薦：jsliang 的 2019 面試準備

相關文章