# 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, } } } ```