Vue官網範例練習-新手村上路 本篇透過官網實例了解Vue的基礎操作及概念,以此做個練習紀錄。 01 - Hello Vue 第一課資料綁定插入 string,利用 Mustache 的語法: {{message}} {{ message }} {{FirstName}} {{LastName}} {{FirstName+LastName}} new Vue({ el: '#app', data: { message: 'Hello Vue.js!', FirstName: 'Eddie', LastName: 'Liu' } }) 結果: 附上 程式碼範例 02 - Bind Message Vue 可透過 v-bind 綁定 HTML 的屬性。 把滑鼠放在這段文字上! var app2 = new Vue({ el: '#app-2', data: { message: '現在時間' + new Date().toLocaleString() } }) 結果: 附上 程式碼範例 03 - Conditional Rendering 透過 v-if 這個指令(directive)決定是否顯示p tag。 單純這樣有點無趣,先加入後面會介紹的v-on來綁定button,透過點擊可以改變seen的狀態。 你有看到我嗎? 點我! var app3 = new Vue({ el: '#app-3', data: { seen: true } }) 結果: 未點button,此時seen預設為true, v-if成立 ,文字顯示。 點擊button後,因為seen變為false, v-if並未成立 ,綁定v-if的文字則消失了。 附上 程式碼範例 04 - List Rendering 透過 v-for 這個指令(directive)顯示 todos list。 {{ t