紀錄當輸入網址到瀏覽器中，中間的 資料傳輸 和 網頁解析 分別經歷了那些過程

Vue 元件 emit 和 props 傳輸概念

Vue 的 v-on 觸發事件應用

Vue 的 v-model 雙向綁定應用

v-for

這邊的功能就是利用 v-for 來遍歷一個陣列或者一個物件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---HTML---
<div id="app">
  <h1 v-for="(user,index) in userDataArray"> {{ user.name }}</h1>
  <h1 v-for="(value,key) in userDataObj"> {{ key }}</h1>
  <span v-for="num in 10"> {{ key }}</span>  // 呈現 1 - 10 的內容 
</div>

---JavaScript---
let vm = new Vue({
  el: '#app',
  data: {
    userDataArray: [
    {
      name: 'Landy',
      gender: 'male'
    },
    {
      name: 'Sara',
      gender: 'female'
    }
  ],
  userDataObj: {
    Landy: 'male',
    Sara: 'female'
  }
  }
})

以上兩種方式，都可以達到將裡面的內容透過 v-for 呈現在畫面上，不過要注意一下，物件那邊的寫法，key 會呈現該屬性名稱 而 value 會呈現該 key 所夾帶的值。
另外，我們也可以用 v-for 單純去遍歷一個數字

1

<div v-for="num in 10"> {{ num }} </div>

以上範例就會從 1 到 10 顯示出來，記得這個部分數字會從 1 開始算喔。

Alex 宅幹嘛-眉眉角角

v-for 不要搭配 v-if 來使用

因為，在 Vue 中，v-for 的優先度是高於 v-if 的，這就代表，v-for 會先將目標陣列中的元素全部先渲染出來，然後，才會再執行你的 v-if 判斷內容。
而 v-if 就會將不滿足判斷式的內容給抽離掉，這樣就會浪費掉之前 v-for 渲染出來的元素的資源，所以，才不建議這樣用。
那比較好的方式可以 v-for 搭配 v-show，因為，v-show 只是為不滿足判斷式的元素，去更改其 display 的樣式，這樣比較不會浪費資源。
另外，你也可以先用 computed 過濾掉原始不要的資料，最後，再透過 v-for 去渲染出 computed 過濾後的結果。

v-if

這個 directive 的功能是，藉由判斷一個內容，來決定要不要將相對應的內容呈現在網頁上。
如果今天你有兩個以上的元素的 v-if 是要判斷同一個元素的話，官方文件建議你用 template 將這些元素包起來，然後，在這個 template 上用 v-if 統一對同一個內容做判斷
ex:

1
2

<div v-if="isShow">這一個區塊</div>
<span v-if="isShow">這一個span</span>

可以用 template 改寫成

1
2
3
4

<template v-if="isShow">
  <div>這一個區塊</div>
  <span>這一個span</span>
</template>

以上範例就能統一去判斷 isShow 這個內容，而且 template 這個 tag 也不會出現在 DOM 上面。

這篇的內容式複習 Vue 中有一個很重要的功能，體現資料驅動畫面的概念，那就是 v-bind。
首先， v-bind 可以用來綁定很多東西，在 Vue 的官方文件中就有提到，可以綁定 DOM 元素的屬性、class、樣式。

動態綁定屬性

以上這個範例，就利用v-bind的方式，來為這個a連結動態的綁定上 Vue 物件裡面的資料。

動態綁定 Class

綁定 class 物件

在 Vue 中，動態綁定 class 的方式，可以透過判斷某個判斷式是否是 true 或 false，來判斷是否要加入該 class

上面這個範例，可以看到綁定一個 classObj 的物件，裡面包裹了兩個 class，這兩個 class 都自帶自己的樣式，那我們就將它們設為 true，如此，就會把 classObj 裡面的 class 都加到目標元素中。

如何看元素的hover效果樣式

在 Bootstrap 中，在鼠標移到按鈕的元件上時，會發現它的按鈕的背景顏色會變暗，那我要怎麼看 Bootstrap 的按鈕元件的 hover 樣式呢?
你先對該按鈕元件按右鍵，選擇檢查

這一篇就簡單整理一下在網路上看到有關 ES6 管理模組的語法。
因為，在我撰寫的 Vue 專案裡面，常常用到 export 和 import 的語法，所以，特別來記錄一下。

export和import使用時機

ES6 模組語法，使用 export (輸出) 與 import (輸入) 語句來進行模組輸出與輸入。輸出通常位於檔案最後，輸入位於最前面。

時常會用的font-size單位

我們時常會用 px, %, em, rem 的四種單位

px

px 是絕對單位

%

% 是每個子元素透過「百分比」乘以父元素的 px 值。

以上這個範例，可以看到最外層的父層是 10 px，接著，內層的 font-size: 200%; ，所以是10px * 2 = 20px，最後，最內層的 p，font-size:200%;
所以是繼承自 .inside 的 font-size ，所以是 20px * 2 = 40px。