Posts

Vue.js - Watch

Vue.js 的 watch 可以設定監控特定的屬性，當屬性值變動時做對應的處理。使用上只要在建構 Vue 建立時設定 watch 物件，裡面放置屬性值變化時要做的處理即可。 <div id = "app"> ... <input v-model = "<PropertyName>"> ... </div> <script> new Vue({ el : '#app' , data :{ ... }, watch: { <PropertyName>: function (val) { ... } } }) </script> 像是下面這樣的程式，設定了 message 變動時將訊息寫入 console 內。 <!DOCTYPE html> <html> <head> <title> Vue - Hello World </title> <script src = "https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id = "app"> <input v-model = "message"> <p> {{message}} </p> </div> <script> new Vue({ el : '#app' , data :{ message : "" }, watch: { message: function (val) { console.

Posts

Vue.js - Computed properties

Vue.js 的計算屬性(Computed properties)可以設定經過運算而來的屬性，有點類似其它程式語言的屬性(Property)，而一般的 Vue.js 屬性則是類似其它程式語言的欄位(Field)。使用上只要在建構 Vue 建立時設定 computed 物件，裡面放置計算屬性的方法，這樣在使用計算屬性時就會去調用計算屬性定義的方法去運算。 <div id="app"> ... {{<PropertyName>}} ... </div> ... <script> new Vue({ el: '#app', data:{ ... }, computed: { <PropertyName>: function () { ... } } }) </script> 像是下面這樣的程式，設定了 firstName 與 lastName 兩個屬性，並設定了名為 fullName 的計算屬性，其值為 firstName 與 lastName 用空格串接。 <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="firstName"> <input v-model="lastName"> <p>{{fullName}}</p> </div> <script> new Vue({ el: '#app', data:{ firstName: "Larry", lastName:"Nung" }, computed: { fullName: function () { return this.

Posts

Vue.js - .trim modifier

Vue.js 的 .trim modifier 可以將繫結的屬性值去除多餘的空格。以下面這段程式為例，若不使用 .trim modifer，輸入的資料如果有空格，繫結的屬性值也會含有空格。 <!DOCTYPE html> <html> <head> <title> Vue - Hello World </title> <script src = "https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id = "app"> <input v-model = "message"> <p> {{message.length}} </p> </div> <script> new Vue({ el : '#app' , data :{ message : "Hello World" } }) </script> </body> </html> 這時候需要使用 .trim modifier 來解決這樣的問題，將繫結的屬性值去除多餘的空格。 <!DOCTYPE html> <html> <head> <title> Vue - Hello World </title> <script src = "https://unpkg.

Posts

Vue.js - .number modifier

Vue.js 的 .number modifier 可以讓繫結的屬性值轉換成數值型態。以下面這段程式為例，若不使用 .number modifer，輸入的資料會被視為字串，如果要拿繫結的屬性值去做數值的處理就會不如我們的預期。 <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="value" type="number"> <p>{{value + 1}}</p> </div> <script> new Vue({ el: '#app', data:{ value: 0 } }) </script> </body> </html> 這時候需要使用 .number modifier 來解決這樣的問題，將繫結的屬性值轉換成數值型態，後續的數值處理才會正常。 <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model.number="value" type="number"> <p>{{value + 1}}</p> </div> <script> new Vue({ el: '#app', data:{ value: 0 } }) </script> </body> </html>

Posts

Vue.js - .lazy modifier

Vue.js 的 .lazy modifier 可以讓繫結的資料在資料改變後才進行同步，而非在輸入的同時就進行同步。像是下面這樣的程式： <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model.lazy="message"> <p>{{message}}</p> </div> <script> new Vue({ el: '#app', data:{ message: "Hello World" } }) </script> </body> </html> 運行起來會像下面這樣，資料在輸入時並不會被同步。當輸入完畢焦點移開或是按下 Enter 按鈕，資料被視為變更，才會進行資料的同步。

Posts

Vue.js - Select binding

Select 的繫結一樣是在 Vue 建立時連帶設定要用來繫結的屬性，然後在 Select 元素這邊透過 value 指定被選取的值，並用 v-model 指定所要繫結的屬性，設定完後資料屬性與控制項之間即會連動。如果要支援多選，只要在 Select 元素上加上 multiple，並用陣列去設定繫結用的 Vue 屬性即可。像是下面這樣的程式： <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <select v-model="option"> <option>option1</option> <option>option2</option> <option>option3</option> </select> {{ option }} <br/><br/> <select v-model="options" multiple> <option>option1</option> <option>option2</option> <option>option3</option> </select> <br/> {{ options }} </div> <script> new Vue({ el: '#app', data:{ option: "option1", options: [] } }) </script> </body> </html> 運行起來就會像下面這樣：

Posts

Vue.js - Radio binding

Radio 的繫結一樣是在 Vue 建立時連帶設定要用來繫結的屬性，然後在 Radio 元素這邊透過 value 指定被選取的值，並用 v-model 指定所要繫結的屬性，設定完後資料屬性與控制項之間即會連動。像是下面這樣的程式： <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="radio" value="Male" v-model="sex">Male<br/> <input type="radio" value="Female" v-model="sex">Female<br/> {{ sex }} </div> <script> new Vue({ el: '#app', data:{ sex: "Male" } }) </script> </body> </html> 其運行結果如下：

Posts

Vue.js - Checkbox binding

Checkbox 的繫結一樣是在 Vue 建立時連帶設定要用來繫結的屬性，然後在 Checkbox 元素這邊透過 v-model 指定所要繫結的屬性，設定完後資料屬性與控制項之間即會連動。如果有多個 Checkbox 要做繫結，方法大同小異，只要將繫結的屬性宣告成陣列，Checkbox 這邊使用 v-model 指定繫結至相同的屬性，並在 Checkbox 指定選取時的 value 即可。像是下面這樣的程式： <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="checkbox" v-model="checked"> {{ checked }} <br/><br/> <input type="checkbox" value="option1" v-model="options">option1<br/> <input type="checkbox" value="option2" v-model="options">option2<br/> <input type="checkbox" value="option3" v-model="options">option3<br/> <br/> {{ options }} </div> <script> new Vue({ el: '#app', data:{ checked: false, options: ["option2"] } }) </script> </body> </html> 其運行結果如下：

Posts

Vue.js - Input text binding

要用 Vue.js 將資料與輸入框做繫結，我們可在 vue 建立的同時設定用來繫結的屬性，然後在 HTML 的輸入框元素中使用 v-model 設定所要繫結的屬性，這樣設定後輸入框的資料就會被寫入指定的屬性中，而指定屬性其值的變化也會呈現在輸入框中。像是下面這樣的程式： <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input v-model="message"> <p>{{message}}</p> </div> <script> new Vue({ el: '#app', data:{ message: "Hello World" } }) </script> </body> </html> 其運行結果如下，在輸入框中輸入什麼，下方就會顯示什麼。

Posts

Vue.js - Components

Vue.js Component 可讓我們將畫面與程式封裝程可重用的元件。可在建立 Vue 時透過 components 宣告，進行局部註冊。 <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <Hello></Hello> </div> <script> new Vue({ el: '#app', components: { 'Hello' : { template : '<h1>Hello World</h1>' } } }) </script> </body> </html> 也可以使用 Vue.component 宣告，進行全域註冊。 <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <Hello></Hello> </div> <script> Vue.component( 'Hello' , { template : '<h1>Hello World</h1>' }) new Vue({ el: '#app' }) </script> </body> </html> 像是這邊筆者就註冊了名為 Hello 的 Component，該 Component 會顯示出 Hello World 的字樣，Component 註冊完後可以在 HTML 中使用 Hello 這個 Component 的 Element。