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
JavaScript 原型鍊 Javascript當初是受到C++以及Java啟發進而創造出 原型鍊(Prototype) ，直接以下面例子舉例。 建立一個fastfood的構造函數(constructor)，表示fastfood的原型。 function fastfood(name){ this.name = name; } 對這個構造函數使用new，就會生成一个速食對象的實例。 var fastfooda = new fastfood('Burger'); console.log(fastfooda.name);//Burger new的缺點 用構造函數生成實例對象，有個缺點，就是無法共享属性和方法。 比如，在fastfood對象的構造函數中，設置一個實例對象的共有属性foodtype。 function fastfood(name){ this.name = name; this.foodtype = '主餐'; } 後續建立兩個新的fastfood對象。 var fastfooda = new fastfood('BaconBurger'); var fastfoodb = new fastfood('BeefBurger'); 此時建立兩個新對象屬性是獨立的，修改任一個，不會影響另一個。 fastfooda.foodtype = '加點'; console.log(fastfoodb.foodtype);//主餐 上述例子來說，每種速食的名稱都不同，沒有關連性，可不用共享資源，但兩種速食的foodtype都為主餐，此時卻無法做到資源共享，彼此沒有關聯。 若以程式角度來思考，這樣會造成資源的浪費，明明是同樣類型，卻佔據兩個空間。 如果我們想讓兩個速食的foodtype有關連性，這時就能導入prototype屬性。 function fastfood(name){ this.name = name; } fastfood.prototype = { foodtype : '主餐' }; var fastfooda