# Vue.js 文件閱讀 part 1- Introduction + Installation

---
tags: Javascript relate
---

###### tags: `Javascript, Vue.js`

# 簡介(Introduction)

## Vue.js是什麼?

* 一個用來搭建使用者介面的框架
> 框架(Framework)：由包含各種功能與開發規則的函數庫組成。我們可以利用其提供的功能加速開發，不必從零開始；而其開發規則通常是經過驗證的良好開發方法，只要follow它，就可以避免很多問題與錯誤。因此框架通常有著加速開發並易於維護的特性。
* 在MVVM的架構下以視圖(view layer)為核心的網頁介面(Web UI)開發方法
* 容易上手並且容易整合進其他的資料庫或是其他的現存的專案
* 可以完美的強化單頁應用程式是(SPA)藉著一些[現代工具](https://vuejs.org/v2/guide/single-file-components.html)以及[輔助使用的資料庫](https://github.com/vuejs/awesome-vue#components--libraries)

[影片學習 - Intro to Vue 2](https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/)

<script async src="//jsfiddle.net/chiehLiu/80nLrhmp/embed/"></script>

# 安裝使用(Getting Started)

> 這份官方手冊需要有HTML, CSS, and JavaScript基本知識必較容易讀懂
> 有其他框架使用經驗也有幫助

## 相容性指示(Compatibility Note)

* Vue不支援IE8甚至更低的版本
* 因為Vue使用ECMAScript 5 features但IE8不支援


## 語意化的版本控制

簡單來說就讓版本名稱具有意義好辨識並且達成共識，避免相容性出現問題

[語意化版本](https://semver.org/lang/zh-TW/)

## 最新版本釋出

[最新版本 Github](https://github.com/vuejs/vue/releases)

## Vue 開發工具(Vue Devtools)

相當推薦使用在一個使用者友善介面下，可以更好的檢視你的作品以及幫忙debug

[Vue Devtools Github](https://github.com/vuejs/vue-devtools#vue-devtools)

## 使用`<script>`引入使用Vue

建議開發的時候引入Development Version才不會省略掉一些常見的錯誤訊息


## 內容傳遞網路 (CDN - Content delivery network)

作為原型或是學習使用

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

要用在產品身上則推薦使用特定的版本，因為最新版本可能尚未完善

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

使用原生ES Module相容的版本

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>

可以從此處瀏覽原始碼

[NPM package 原始碼](https://cdn.jsdelivr.net/npm/vue/)

[unpkg](https://unpkg.com/vue@2.6.12/dist/vue.js)

[cdnjs (最新版本有可能會比較慢登上這邊)](https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js)

### 小提醒

在你要發布的網站上面可以使用`vue.min.js`取代`vue.j`可以優化檔案大小以及執行速度

## NPM

當要使用在大型規模的app時推薦使用NPM，因為可以跟[Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/)相容的很好，

# latest stable
$ npm install vue

## CLI

使用官方CLI需要一些node.js的相關知識

[Vue CLI 官網](https://cli.vuejs.org/)

[CLI 影片教學](https://www.vuemastery.com/courses/real-world-vue-js/vue-cli/)

## Explanation of Different Builds

在[NPM package 原始碼](https://cdn.jsdelivr.net/npm/vue/) dist/處有很多不同的builds下方是他們的不同之處:

<table>
<thead>
<tr>
<th></th>
<th>UMD</th>
<th>CommonJS</th>
<th>ES Module (for bundlers)</th>
<th>ES Module (for browsers)</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Full</strong></td>
<td>vue.js</td>
<td>vue.common.js</td>
<td>vue.esm.js</td>
<td>vue.esm.browser.js</td>
</tr>
<tr>
<td><strong>Runtime-only</strong></td>
<td>vue.runtime.js</td>
<td>vue.runtime.common.js</td>
<td>vue.runtime.esm.js</td>
<td>-</td>
</tr>
<tr>
<td><strong>Full (production)</strong></td>
<td>vue.min.js</td>
<td>-</td>
<td>-</td>
<td>vue.esm.browser.min.js</td>
</tr>
<tr>
<td><strong>Runtime-only (production)</strong></td>
<td>vue.runtime.min.js</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>

### 名詞解釋(Term)

* Full: 包含Compiler, Runtime

* Compiler: 負責編譯模板字版進去JS呈現相關的函式
* Runtime: 負責Vue instances, 呈現以及修補 virtual DOM(基本上處理Compiler以下的事情)
* UMD: UMD相關的builds可以直接使用在瀏覽器下藉著`<script>`tag
UMD (Universal Module Definition)，就是一種javascript通用模塊定義規範，讓你的模塊能在javascript所有運行環境中發揮作用。
* CommonJS: 給browserify or webpack使用
* ES Module:
2.6Vue版本後才開始提供下面兩種builds
1. ESM for bundlers: 給webpack 2 or Rollup使用
1. ESM for browsers (2.6+ only): 直接引入現代的瀏覽器使用`<script type="module">`

# 宣告式渲染(Declarative Rendering)

> Vue.js的核心藉著好理解的模板語法讓使用者把資料呈現到DOM上面

## 範例

index.html

<div id="app">
  {{ message }}
</div>

<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

index.js

var app = new Vue({
  el: '#app', // 抓取哪邊的DOM
  data: {
    message: 'Hello Vue!' // 此處是要呈現的內容
  }
}
// 輸出 Hello Vue!

app.message = 'I have changed the data!'
// 輸出 I have changed the data

[影片說明Hello Vue!](https://scrimba.com/scrim/cQ3QVcr?pl=pXKqta)

* 資料以及DOM已經做了連結並且是隨時反應的
ex. app.message修改內容後輸出內容也會即時更改
* 不需要再跟HTML互動，直接在Vue instance就可以操作DOM

## 範例二

index.html

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

index.js

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})


當hover的時候在當前的string會顯示 字串+載入日期時間

* `v-bind`

這個有v前墜屬性被稱做指示(directive)，是Vue提供使用的，而這個v-bind的用法在於讓這個title的屬性隨著message屬性作同步修在Vue instance上面

所以當我使用下面的方法時，title的屬性也會及時更新

app2.message = 'some new message'

# 條件式以及迴圈(Conditionals and Loops)

## 條件式

index.html

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

index.js

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

* `v-if`

可以理解成 v-if後方的文字必須為true(然而是否為true則要去看js程式碼如何操作)，才會讓span內的文字被看見


因此當判斷式內容改成flase時，就看不見文字

app-3.seen = false;

## 迴圈

index.html

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

index.js

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

* `v-for`

可以用來製作清單類型的呈現


如果想要再加入新的清單可以這樣做

app4.todos.push({ text: 'New item' })

# 處理使用者的輸入(Handling User Input)

## 範例

index.html

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

index.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

* `v-on:click`

跟使用者互動藉由v-on 指示來連接事件監聽click並觸發函式來處理

點擊按鈕後把文字順序反過來



# 建構組件(Composing with Components)

為了建構大型專案藉著拆分成不同的小組件的優點

* 可重複利用
* 是獨立的組件
* 容量小


## 範例

index.js

// 定義一個新的組件 todo-item
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

var app = new Vue(...)

index.html

<div id="app">
    <ol>
        <todo-item></todo-item>
        <todo-item></todo-item>
    </ol>
</div>

首先在js先撰寫組件todo-item後就可以在html裡面直接使用

## 範例二

index.js

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

index.html

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

* 首先於component處新增`porp`是一個可以客製化的屬性並命名todo
* 介下來使用`v-bind`讓文字可以被動態的傳入DOM同時傳入key的部分會在後面章節作解釋
* 並且使用`v-for`製作清單列表


---

在大型專案中把內部的app做拆分是必要的，讓開發過程容易管理，下面程式碼是個範例說明比較多組件且複雜的html長相

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

# 與自定義元素的關係(Relation to Custom Elements)

* Vue的組件非常類似於[Custom Elements](https://developers.google.com/web/fundamentals/web-components)

* 舉例說明
Vue組件執行[Slot API](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/slot) 以及 [is](https://v3.vuejs.org/api/special-attributes.html#is) 特殊屬性

> Slot是存在web component内部的占位符，用户可以通過slot屬性在web component的内部插入自定義的標記文本。

* 不同之處
1. Web Components規範已經完成通過但是依舊沒有被所有瀏覽器支援
(目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components)
2. Vue 组件不需要任何 polyfill，並且支援所有瀏覽器 (IE9以下不支援)，必要時Vue组件也可以包裝於原生自定義元素之内

> polyfill代指為舊瀏覽器實現或模擬現有版本已實現之功能的程式碼片段

3. Vue 组件提供了Custom Elements沒有的功能，跨组件數據流、自定義事件溝通以及bulid整合工具。

* Vue 並沒有使用Custom Elements，不過在應用以及發布Custom Elements上還是有很好的[互通性](https://custom-elements-everywhere.com/#vue)，Vue CLI 也支持 Vue 组件建構成為原生的Custom Elements