###### tags: `Vue2` # VUE 從頭學 - 起手開發與可以做到那些事 首先，先認識要怎麼起步 vue 的開發，所以先來看看再一個 html 文檔內，該怎麼使用 vue 吧 ## 最簡潔的 vue 開發構造 其實我也不知道標題這麼下妥不妥當，不過主要就是在介紹該怎麼編輯我們的 html 構造，就可以開始使用 vue 來開發前端了。 1. 先把框架的資源引入 也就是把 vue 的 CDN 給貼上到 html 中。 ```htmlembedded= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> </body> </html> ``` 2. 建立 vue 實例 透過 var app = new Vue({ }) 來創建實例，透過 el 來宣告 vue 的作用域，而 data 則是用來管理所使用的變數 ```htmlembedded= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <script> var app = new Vue({ el: '#app', data: { } }) </script> </body> </html> ``` 3. vue 可作用的空間 el 宣告的作用域是 id 為 app 的 div 區塊，所以如果不是在 app 區塊裡面的就沒有 vue 的功能了。 ```htmlembedded= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> </div> <script> var app = new Vue({ el: '#app', data: { } }) </script> </body> </html> ``` 好了，最最最最...最簡潔的架構已經寫好了，接下來會以 [官網](https://vuejs.bootcss.com/guide/index.html) 的步調來做介紹。 ## 聲明式渲染 是一個模板語法，可以將數據選染到 DOM ，透過 `{{ 變數 }}` 表示，由雙花括號所包住，就可在 DOM 上渲染出變數的值了，又稱做插值表示式。 ![](https://i.imgur.com/PwF8P70.png) ![](https://i.imgur.com/tQuRMJf.png) 可以看到 msg1 有成功地顯示出 hello Tom 在畫面上 但是因為 msg2 沒有寫在 app 裡面，所以 vue 是沒有作用的。 ## 條件 可以透過條件的成不成立來決定畫面該怎麼呈現，以 v-if 表示，如果條件成立則 DOM 顯示，不成立 DOM 就會被隱藏。 ``` <div v-if="volume"></div> ``` 其中判斷的條件以 volume 來表示說明 volume 可以是變數，透過變數的 true/false 來控制，volume 也可以直接是布林值，又或是判斷式，就會變成下面這樣 : ``` <div v-if="num1 > 2"></div> ``` ![](https://i.imgur.com/WrANXcL.png) ![](https://i.imgur.com/FwN2DGl.png) ## 循環 可以幫我們處理大量的數據，舉例來說，如果我需要顯示出通訊錄名冊之類的就會很方便，不需要再手動一筆一筆的打上去，只需要通訊錄的陣列就可以了，以 v-for 表示。 :::danger v-for 在使用時需要綁定 key 值 v-for 的層級比 v-if 的層級更高，一般不推薦同時使用在同一個元素上 ::: ![](https://i.imgur.com/eJsWI7a.png) [v-for 與 v-if 一同使用的官網說明](https://cn.vuejs.org/v2/guide/list.html#v-for-object) 可以看到，我們的程式碼只要編排好要的統一格式，剩下的只要處理數據問題就好了 ## 事件 事件就比較簡單了，跟一般網頁開發的用法雷同，下面一樣用例子示範 ![](https://i.imgur.com/Pwp0E42.png) 使用方式為 v-on:事件名稱 ```htmlembedded= <body> <div id="app"> <button v-on:click="sayhi">hello</button> </div> <script> var app = new Vue({ el: '#app', data: { msg1: "hello Tom", }, methods:{ sayhi(){ alert(this.msg1); } } }) </script> </body> ``` 其中 button 的寫法也可以寫成下面這樣 ``` <button v-on:click="sayhi()">hello</button> ``` 在 v-on 裡 sayhi function 後面的括號可加可不加，除非是有需要傳入參數進行處理的，不然不會引響 另外，可以看到除了之前最簡潔的架構之外，這邊多了一個 "methods" ，是用來編寫 vue 事件的地方 ## 如果我還有另外一份 Javascript 這邊會介紹，當你想拆分一些 JS 出來，但又需要用到 vue 裡面的東西怎麼辦? 可以回想上面說的，我們 vue 的實例是透過 var app = new Vue({ }) 出來的，所以我們可以透過 app. 來得到我們需要的東西 ```javascript= <script> var app = new Vue({ el: '#app', data: { msg1: "hello Tom", }, methods:{ sayhi(){ alert(this.msg1); } } }) console.log(app.msg1); app.sayhi(); </script> ``` ![](https://i.imgur.com/4Euwinq.png) 成功得到 msg1 的內容 :::info 好了~ 基本的介紹大致就到這邊，之後再繼續寫更多的應用 ✌ :::