(六) Vue元件

Vue 中元件也是一個很重要的概念，例如一個頁面中，頭部、底部、側邊欄、主內容區 都可以看做一個一個元件，不過有一些元件是固定的，例如頭部，還有一些是變換的例如內容區

Vue 中就允許我們使用小型、獨立和通常可複用的元件構建大型應用。

注：實際都是建立 .vue 模板檔案，並不會用直接在頁面中書寫的這種形式

直接拿一個簡單，不過還算相對完善的案例來進行講解

先說一下最終我們想幹嘛，例如 div 或者 input 等等 都是一個一個標籤，我們現在向做的就是通過建立自定義元件模板，自定義出一個這樣的標籤，我們在需要的地方只需要引用這個標籤，我們就可以達到顯示出模板中想要的效果，達到抽取複用的效果

首先使用 Vue.component....... 這樣的格式建立元件，在其中 ideal-20 就是元件標籤的名字， template 就代表模板中的內容，props 代表我們在引用處傳入的引數名

接著在一個已經繫結好的 hello-7 的 div 中引入自定義元件標籤 ideal-20，而我們想要遍歷 data 中的 fruits 陣列，在 ideal-20 屬性中進行 for 遍歷即可，同時我們需要將每一項通過 v-bind:ideal="item" 繫結引數到元件模板中，因為陣列不是一個普通的陣列，所以賦 id 為 key值

<div id="hello-7">
  <
 
ideal-20 v-for="item in fruits" v-bind:ideal="item" v-bind:key="item.id"></ideal-20>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
    // 定義名為 todo-item 的新元件
    Vue.component('ideal-20', {
        props: ['ideal'],
        template: '<li>{{ideal.name}}</li>
 
'
    })
    var vm = new Vue({
        el: "#hello-7",
        data: {
            fruits: [
                {id: 0, name: '蘋果'},
                {id: 1, name: '櫻桃'},
                {id: 2, name: '山竹'}
            ]
        }
    })
</script>

(七) Axios 入門

首先我們需要提一下，為什麼要用這個東西呢？

我們在以前傳統的開發中，我們一般會使用 Ajax 進行通訊，而 Vue,js 作為一個檢視層框架，並不支援 Ajax 的通訊功能，所以可以使用 Axios 來實現 Ajax 的非同步通訊

首先看一下它的特點：

• 從瀏覽器中建立 XMLHttpRequests
• 從 node.js 建立 http 請求
• 支援 Promise API
• 攔截請求和響應
• 轉換請求資料和響應資料
• 取消請求
• 自動轉換 JSON 資料
• 客戶端支援防禦 XSRF

首先我們拿一段 json 來模擬資料

{
  "name": "BWH_Steven",
  "blog": "www.ideal-20.cn",
  "about": {
    "country": "中國",
    "phone": "13888888888"
  },
  "students": [
    {
      "id": 0,
      "name": "張三"
    },
    {
      "id": 1,
      "name": "李四"
    },
    {
      "id": 2,
      "name": "王五"
    }
  ]
}

通過下圖我們就可以知道 我們可以將程式碼寫到 mounted() 中去

(八)插槽 Slot

插槽就是子元件給父元件一個佔位符即 <slot></slot> 父元件就能在這個佔位符，填一些模板或者 HTML 程式碼

簡單點理解就是元件套元件

就像下面我定義了三個元件，ideal是父元件，在其中用 slot 進行佔位，同時用 name 屬性指向到了這兩個子元件 ideal-title 和 ideal-content，而為了子元件中顯示的資料來自伺服器（模擬）所以需要動態地顯示，即通過傳參（前面講解元件模板有說過），配合遍歷等讀出 data 中的資料即可

<div id="hello-10">
  <ideal>
    <ideal-title slot="ideal-title" v-bind:title="title"></ideal-title>
    <ideal-content slot="ideal-content" v-for="contentItem in contents" v-bind:content="contentItem"></ideal-content>
  </ideal>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
    Vue.component("ideal", {
        template: '<div>\
                    <slot name="ideal-title"></slot>\
                      <ul>\
                        <slot name="ideal-content"></slot>\
                      </ul>\
                   </div>'
    })
    
    Vue.component("ideal-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    })
    
    Vue.component("ideal-content", {
        props: ['content'],
        template: '<li>{{content}}</li>'
    })

    var vm = new Vue({
        el: '#hello-10',
        data: {
            title: "理想",
            contents: ["Java", "Linux", "資料庫"]
        }
    })
</script>

結果如下：