---
# System prepended metadata

title: Vue
tags: [Web]

---

# Vue
###### tags: `Web`
### 什麼是Vue?
Vue 是由尤雨溪(Evan You)在2014年把Vue開源的，雖然Vue不算是嚴格遵守，但基本上還是MVVM架構，結合各個網頁架構的優點，並在缺點上做學習，所開發出來的Vue。
### MVVM
![](https://i.imgur.com/G1wS1Tw.png)

以最右邊的View，就是DOM來看，透過使用者的操作，產生DOM的event，來影響View Model，而View Model接收到操作，進而去修改Model資料裡的一些內容；資料發生變更後，Model會去通知View Model，View Model再去收改相對應DOM裡的內容。
由此可見，這三種元素為相對應的MVVM架構。
### Vue
![](https://i.imgur.com/SNUVJEg.png)

如上圖，Vue 的學習主要分三塊Vue 模板、Vue 實例以及Vue 組件。首先，Vue 模板是什麼呢?是透過v-if、v-else、v-for 等等，去描述一個模板。也就是資料跟DOM做一個連結的語法。
再來，Vue 實例是藉由`new Vue()`來宣告出來的Vue Model，例如:data、props、computed等等。之後都會在介紹。
Vue 組件，可以把模板、實例還有css部分，放在同一個檔案裏面，讓我們很好的去做開發跟管理，但學習Vue 組件就必須知道commonJS語法，它主要是組件的匯出跟匯入；還有，如何用webpack打包，這部分相對比較困難，因此之後會在學Vue cli，它會幫我們建立一個webpack的範例檔，並且可以很快的建立一個Vue專案。


# Vue + Vue Router 實作
在這裡會簡單介紹，在開發網頁時會用到的Vue工具，以及該如何使用它們。

在開始前，我們先在HTML的`<head>`裡面塞入一個Vue library，我這邊使用的是Vue.js v2.3.4以及Vue Router v2.2.1的版本(注意:Vue Router v3.x 無法相容 Vue.js 3.0)。

再來，下一步，我們會再HTML裡面準備一個名為app的容器，讓Vue跟這個容器做綁定。
```
    <div id="app">
        <router-view></router-view>
    </div>
```
使用`< router-view>< /router-view>`，當作是路由指定渲染組件所顯示的地方。

在HTML裡面定義(要路由的)組件
```
    <template id="home">
        <div>
            <h2>Home</h2>
            <ul>
                <li>
                    <router-link to="/one">Component 1</router-link>
                </li>
            </ul>
        </div>
    </template>
    
    <template id="component1">
        <div>
            <h2>Component 1</h2>
            <ul>
                <li>
                    <router-link to="/">Home</router-link>
                </li>
            </ul>
        </div>
    </template>
```
在script.js裡面，宣告component組件。
```
const Home = {
    template: '#home'
}

const Component1 = {
    template: '#component1'
};
```

定義路由，每一個路由應該對應到一個組件，其中component可以由Vue.extend()建構，或者是一個物件。

```
    const routes = [
        { path: '', component: Home },
        { path: '/one', component: Component1 }
    ]
```

建立 router 實例，傳進 routes 配置參數。
```
    var router = new VueRouter({routes});
```

`new Vue()`是用來宣告一個Vue實體，而後再把他掛載在DOM樹上，Vue的作用域就會發生在此節點之下的所有子節點。

我們這邊使用$mount的方式把名為`#app`的容器掛載起來。
建立Vue實例，傳進 router 配置參數，注入路由功能
```
    const vm = new Vue({
        router,

    }).$mount('#app')
```

這樣就完成一個基本的Vue Router配置了!

![](https://i.imgur.com/Yq7OPpX.png)
![](https://i.imgur.com/IKfrpWq.png)

# HTML 元素的屬性綁定
### 綁定資料為一個class
這邊有一個input box輸入框 以及一個Submit的按鈕。在當輸入文字時，按鈕這邊是一個正常的Submit按鈕；當沒有文字時，是一個disabled的Submit按鈕。
#### HTML
```
<div id="app">
  <input type="text"/>
  <button class="submit">Submit</button>
</div>
```
![](https://i.imgur.com/4b4jXrl.png)
#### 設定css
```
#app{
  text-aligin:center;
}
.submit{
  background-color:#28a745;
  color:white;
  border:none;
  border-radius:8px;
  padding:4px 8px;
}
.submit.disabled{
  background-color:#aaa;
}
```
![](https://i.imgur.com/EiVRdjq.png)
以這邊來說，當輸入文字時，Submit按鈕為綠色；當是disabled時Submit按鈕為灰色。
#### Vue.js
首先，先在`data`綁定一個test，代表輸入框的文字
```
<input type="text" v-model="test">
```
而Button的class希望可以監測text屬性，所生成的class，而實作上利用
```
new Vue({
            el:'#app',
            data: {
                test:''
            },
            computed:{
                btnClass(){
                    if(this.test.length===0){
                        return 'submit disabled';
                    }else{
                        return 'submit'
                    }
                }
            }
        })
```
當test輸入長度為0的時候，return 一個submit disabled；否則 return submit 。
最後，只要將這個btnClass的computed屬性綁定(v-bind)到HTML submit的class裡面。
```
<button v-bind:class="btnClass">Submit</button>
```
##### v-bind:class簡寫可以為:class

而經由computed 計算出來的class屬性，除了 return 字串之外，它還可以是一個物件。
```
btnClass(){
                    if(this.test.length===0){
                        return {
                            submit:true,
                            disabled:true,
                        };
                    }else{
                        return {
                            submit:true,
                            disabled:false,   
                        }
                    }
                }
```