[微精通：網頁設計Vue + Node.js + MySQL] 3.1. Vue & data & {{}}

張貼者： 日期：
控制DOM元素總是一件麻煩事，需要寫許多程式才能動態呈現你要的畫面。現在，Vue解放了這件麻煩事，它讓你專注在'資料'上，畫面的更新交由Vue處理。

 

image/svg+xml3.1. Vue & data & {{}} <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > </head> <body> <ul < li id = ' zombie_li ' >< /li > </ul> </body> < script type = "text/javascript" src = " home.js " >< /script > </html> let zombie = { name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true } ; let zombieLI = document.getElementById ( ‘ zombie_li ' ); zombieLI.innerText = zombie.name + ', ' + zombie.age + ' 歲 ,' + (zombie.isVegetarian == true ? ' 素食者 ' : ' 非素食者 ' ) ; <meta charset = "utf-8" > <html> < head > <link rel = 'stylesheet' href = 'zombie.css' > < script src = " https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js " >< /script > < /head > <body> <ul> <li></li> </ul> </body> </html> <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> </head> <body> < div id = ' app ' > <ul> <li></li> </ul> < /div > </body> </html> <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > < script src = " https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js " >< /script > </head> <body> < div id = ' app ' > <ul> <li></li> </ul> < /div > </body> < script > new Vue ( { el : ' #app ' } ); < /script > </html> <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> </head> <body> <div id = 'app' > <ul> <li></li> </ul> </div> </body> <script> new Vue ({ el: '#app' , data : { zombie : { name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true } } }); </script> </html> <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> </head> <body> <div id = 'app' > <ul> <li> {{ zombie.name }} , {{ zombie.age }} 歲 , {{ zombie.isVegetarian == true ? ‘ 素食者 ’:' 非素食者 ' }} </li> </ul> </div> </body> <script> new Vue ({ el: '#app' , data : { zombie : { name : ' 瘋狂傑克 ' , age : 3.3 , isVegetarian : true } } }); </script> </html> <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> </head> <body> < div id = ' app ' > <ul> <li> {{ zombie.name }} , {{ zombie.age }} 歲 , {{ zombie.isVegetarian == true ? ‘ 素食者 ’:' 非素食者 ' }} </li> </ul> < /div > </body> <script> new Vue ({ el: '#app' , data : { zombie : { name : ' 瘋狂傑克 ' , age : 3.3 , isVegetarian : true } } }); </script> </html> 動態使⽤程式建立顯⽰殭屍資訊名稱的 DOM 元素好⿇煩啊， 有比較簡單的⽅法嗎 ? 1. html 中的 <ul> 中只有⼀個 <li> ， id 為 'zombie_li' 。 1. <script> ，引⽤ Vue.js w3_1_1 - home.html w3_1_1 - home.js 2. 引⽤ ’home.js' 。 3. 使⽤⼀個殭屍資訊。 4. 為了使這個存放在 JavaScript 中的殭屍資訊，我們需 要寫程式，去操控 DOM 元素，才能將資訊顯⽰在畫⾯上。 5. 在此我們組合了殭屍的資訊，並將它放在 id 為 'zombie_li'<li> 的內容中，有沒有比較簡單的⽅式顯⽰在程式中的殭屍資訊呢 ? 1. 使⽤ <script> 引⽤ Vue.js ，這次 <script> 放在 <head> 中好先載入 Vue.js 的功能。⽽這個 Vue.js 是 放在網路上給⼤家存取的 Vue.js 網址。 w3_1_2 - home.html 2. 加入 <div> 並設定 id 屬性為 'app' w3_1_3 - home.html 1. 加入個 <div> 好涵蓋整個 <body> 中的內容，接著設定 id 為 'app' 。 3. new Vue() 與 el 屬性，由 Vue 管控 DOM 元素 w3_1_4 - home.html 1. 在此引⽤ Vue.js 。 2. 在 <body> 後直接加上 <script> ，這是 Vue.js 開發的習慣，直接使⽤的原因是你可 以同時看著 html 的內容⼀邊編寫程式。 3. JavaScript 中 new 可以建立物件，在此使⽤ new 關鍵字建立⼀個 Vue 物件，建立 Vue 物件⼩括號 (()) 帶 入的參數值，其接收的是⼀個物件 ({}) 。 4. 設定這個物件的 el 屬性為 ’#app' ，井號 '#' 代表是 id 的意思， 'app' 則是我 id 為 'app' 的 <div> 。 5. 如此就做到由 Vue.js 控管 id 為 'app' 的 <div>DOM 元素的控制。 4. data 屬性，存放殭屍資料 w3_1_5 - home.html document html head div body link meta li ul script id='app' 1. 接著把殭屍的資訊放在 Vue 的 data 屬性上， data 屬性對應⼀個物件 ({}) 。 2. ，這個物件上加上⼀個 zombie 屬性， 對應的這個殭屍資訊的物件。 5. {{}} ，渲染 data 中的殭屍資料⾄網⾴ w3_1_6 - home.html 1. 最後使⽤雙⼤括號 ({{}}) ，引⽤ data 屬性中的資 訊，在執⾏時 Vue 物件會在 'app' 的範圍內找到這些雙 ⼤括號 ({{}}) ，並開始解譯取代其中的⽂字。 2. zombie.name ，讀取 zombie 屬性中的 name 屬性。 3. zombie.age ，讀取 zombie 屬性中的 age 屬性。 4. 甚⾄你可以在雙⼤括號 ({{}}) 中寫程式，若 isVegetarian 屬性為 true ，則回傳 ' 素食者 ' ， 否則回傳 ' 非素食者 ' 。 Vue ，以 ' 資料 ' 為核⼼的運作原理 w3_1_6 - home.html document html head div body link meta li ul script id='app' 1. 使⽤ Vue 有⼀個重觀念，那就是需要更新網⾴內容的 部份，你只要先 ’ 宣告 ’ 好即可，比如我們在這使⽤雙⼤括 號 ({{}}) 帶出 Vue 中 data 屬性中的資料。⽽ ’ 宣告 ’ 要更 新哪些網⾴內容，即是 Vue 對畫⾯設計的⼀種精神。 2. 直到我們建立了 Vue 物件， 並指定要更新的特定 id DOM 元 素，比如在此的 ’app’<div> 將 會受到 Vue 的控制， Vue 就會主 動依 data 屬性中的資料去更新 對應的 DOM 元素的內容，比如在 此的 <li>DOM 元素中使⽤雙括號 ({{}}) 的存取 data 屬性 zombie 屬性中的物件內容。 3. 最後瀏覽器依 DOM 元素顯⽰在網⾴上。這解放了 我們必須透過像在 ’ 第⼆章 JS’ 說到控制 DOM 元素更 新畫⾯的部份，避免撰寫了很多跟商務邏輯無關，只 為了控制畫⾯的許多程式的部份。 4. 在 Vue 中，你需要著的就是 ’ 宣告 ’ 好畫⾯的更 新，並在 data 屬性中準備楚資料。 Vue 就會依 ' 資料 ' 來更新畫⾯，變成以 ' 資料 ' 趨動的網⾴設計模式。

留言

張貼留言