Termux - Vue.js in Termux

要在 Termux 內建立 Vue.js 環境，需要安裝 Vue CLI 到全域。 npm i vue-cli -g 安裝後透過 Vue CLI 初始 Vue 專案。 vue init webpack <Project> 進入初始完的專案目錄。還原專案需要的套件。 yarn install 運行 Vue 專案。 yarn run start 訪問 http://127.0.0.1:8080 即可看到運行結果。

Posts

Vue.js - Event Handling

Vue.js 在事件處理上，主要是透過 v-on 去監聽事件，事件觸發後可以指定對應的動作。像是點擊後用運算式處理對應的動作。 <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button v-on:click="click += 1">Click</button> <p>{{click}}</p> </div> <script> new Vue({ el: '#app', data:{ click: 0 } }) </script> </body> </html> 或是調用對應的方法處理。 <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button v-on:click="onClick">Click</button> <p>{{click}}</p> </div> <script> new Vue({ el: '#app', data:{ click: 0 }, methods: { onClick: function(event){ this.

Posts

Vue.js - List Rendering

Vue.js 要渲染多個元素，可使用 v-for。像是要渲染陣列元素，就可以像下面這樣處理。 <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p v-for="item in items">{{item}}</p> </div> <script> new Vue({ el: '#app', data:{ items: [ "1.Hello World", "2.Hello World", "3.Hello World", "4.Hello World", "5.Hello World" ] } }) </script> </body> </html> 若有需要索引值，v-for 也有索引值可供使用。 <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p v-for="(item, index) in items">{{index + 1}}. {{item}}</p> </div> <script> new Vue({ el: '#app', data:{ items: [ "Hello World", "Hello World", "Hello World", "Hello World", "Hello World" ] } }) </script> </body> </html> 除了陣列元素外，v-for 也支援 range 的方式，可明確指定循環的次數。

Posts

Vue.js - Conditional Rendering

Vue.js 要使用條件渲染，像是想要當條件成立時才渲染，可以使用 v-if、 v-else-if、 v-else。像是下面這程式，筆者使用輸入框繫結的 name 屬性去決定要顯示的文字，如果有輸入名字，則會對該名字 Hello，反之則顯示 Hello World。 <!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="name"> <h1 v-if="name != ''">Hello {{name}}</h1> <h1 v-else>Hello World</h1> </div> <script> new Vue({ el: '#app', data:{ name: "" } }) </script> </body> </html> 條件渲染在使用上，Vue.js 為了效能考量會用最有效率的方式渲染，所以當我們程式像下面這樣時，運行上可能就會不如我們所預期。 <!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="SignIn" v-model="option">SignIn<br/> <input type="radio" value="ForgetPassword" v-model="option">Forget password<br/> {{option}} <br/><br/> <input v-if="option == 'SignIn'" placeholder="UserName"> <input v-if="option == 'ForgetPassword'" placeholder="EMail"> </div> <script> new Vue({ el: '#app', data:{ option: "SignIn" } }) </script> </body> </html> 像是運行起來在輸入框中輸入名字。

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。

Posts

Vue.js - Getting started

要使用 Vue.js 我們要將 Vue.js 載入，可以手動加入、用 npm 安裝套件、用 vue-cli、用 bower…等。這邊筆者用 vue-cli 做個簡單的範例，用 simple 範本建立專案。 vue init simple <ProjectName> simple 範本建立出來的專案就只有一個 index.html 檔，裡面已經幫我們加入了 vue.js 套件。這邊筆者將檔案修改成下面這樣： <!DOCTYPE html> <html> <head> <title>Vue - Hello World</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{message}}</h1> </div> <script> new Vue({ el: '#app', data: { message: 'Hello World', } }) </script> </body> </html> 可以看到 script 這邊建立了一個 vue 物件，裡面設定了 el 為 #app，指向上方 id 為 app 的 div 為其作用範圍。接著設定 data，裡面有個 message 值為 ‘Hello World’，會被綁定到上方的 {{message}}。