參考書籍《Vue.js快跑：構建觸手可及的高效能Web應用》第1章 Vue.js基礎--模板（Template）、資料（Data）和指令（Directive）
阿新 • • 發佈：2021-06-17
Vue的核心是將資料顯示在頁面上，這一功能通過模板實現。為正常的HTML新增特殊的屬性——被稱作指令——藉助它來告訴Vue我們想要實現的效果以及如何處理提供給它的資料。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>模板，資料和指令</title> </head> <body> <div id="app"> <p>第二本書的名字：{{ books[1] }}</p> <p>所有書的名字：{{ books }}</p> <p v-if="path === '/'">你正位於首頁</p> <p v-else>{{ path }}</p> </div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: "#app", data: { path: location.pathname, books:["《茶館》", "《龍鬚溝》", "《四世同堂》", "《駱駝祥子》"] } }) </script> </body> </html>
重點：
- data物件，我們通過它告訴Vue想在template上顯示哪些內容。
- 在template中使用v-if指令來根據變數的值顯示，v-if屬性的元素只有傳遞給指令的值為真時才會顯示。
- v-else。當用在帶有v-if指令的元素之後時，它的表現和一個if-else語句中的else語句一樣。
- 如果將整個陣列或物件輸出到頁面上，Vue會輸出JSON編碼後的值。在除錯時，這樣做比將日誌輸出到控制檯更加有效，因為頁面顯示會隨著值的變化而更新。