Vue.js 學習過程一 起步
什麼是Vue.js
用於構建使用者介面的漸進式框架，可以自底向上逐層應用
最基礎開始：
宣告式渲染
Vue.js的核心是一個允許採用簡潔的末班語法來宣告式的將資料渲染進DOM系統
案例：
html: <div id="app">{{message}}</div> js: var app = new Vue({ el:'#app', data:{ message:'hello vue' } }) |
通過宣告將資料渲染到HTML上，頁面中會顯示hello vue，並且他們是響應式
即如果message發生改變，會自動渲染到HTML上
也可以用來繫結元素特性：
案例：
HTML: <div id="app"> <span v-bind:title="message"> 滑鼠懸停檢視資訊 </span> </div> JS: var app = new Vue({ el:'#app', data:{ message:"頁面加載於" + new Date().toLoacleString() } }) |
將span的title屬性繫結為message
v-bind：指令，指令帶有字首v-，以表示他們是特殊的特性
條件與迴圈
控制切換一個元素是否顯示：
HTML： <div id="app"> <p v-if="seen">這段文字目前是顯示的</p> </div> JS： var app = new Vue({ el:'#app', data:{ seen:true } }) |
不僅可以吧資料繫結到DOM文字或者特性上，還可以繫結到DOM結構中
此處的文字是顯示的，當seen為false時，p自動隱藏
v-for
v-for指令可以繫結陣列的資料用來渲染專案列表
HTML： <div id="app"> <ol> <li v-for="todo in todos">{{todo}}</li> </ol> </div> JS： var app = new Vue({ el:'#app', data:{ todos:[ "第一條資料", "第二條資料", "第三條資料" ] } }) |
輸入app.todos.push("第四條資料")會自動將資料插入
處理使用者輸入
為了實現互動，可以使用v-on指令新增事件監聽
案例：
HTML： <div id="app"> <p>{{message}}</p> <button v-on:click="reverseMessage">逆轉訊息</button> </div> JS: var app = new Vue({ el:"#app", data:{ message:"Hello Vue.js" }, methods:{ reverseMessage:function(){ this.message = this.message.split("").reverse().join(" ") } } }) |
在reverseMessage中，更新了應用的狀態，但是沒有使用DOM，所有的DOM操
作都由Vue來進行處理。
v-model
實現表單輸入和應用狀態之間的雙向繫結
案例：
HTML: <div id="app"> <p>{{message}}</p> <input v-model="message"> </div> JS： var app = new Vue({ el:"#app", data:{ message:"Hello Vue" } }) |
當輸入框輸入資料的時候，p中顯示的資料隨之變化
元件化應用構建
元件系統是Vue的重要概念，允許我們使用小型，獨立和通常可服用的元件構建大
型應用，可以將任何型別的應用介面抽象為一課元件樹
在Vue總，一個元件的本質是擁有預定義選項的Vue例項
在Vue中註冊元件：
Vue.component("todo-item",{
template: "<li>這是一個待辦項"</li>
})
可以用它構建另一個元件模板：
<ol>
<todo-item></todo-item>
</ol>
如果這樣，每個待辦項都會顯示相同文字，修改元件定義，使它能夠接受一個prop
Vue.component("todo-item",{
props:["todo"],
template: "<li>這是一個待辦項"</li>
})
現在，可以使用v-bind指令將待辦項傳到迴圈輸出的每個元件中：HTML：
<div id="app">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
>
</todo-item>
</ol>
</div>
JS：
Vue.component("todo-item",{
props:["todo"],
template:'<li>{{todo.text}}</li>'
})
var app = new Vue({
el:"#app",
data:{
groceryList:[
{id:0,text:'蔬菜'},
{id:1,text:'乳酪'},
{id:2,text:"吃啥都行"}
]
}
})
這個例子是刻意設計的，設法將應用分割為兩個小的單元，子單元通過props解構與
父單元進行了良好的降低耦合，現在刻意進一步改進<todo-item>元件，提供更為復
雜的邏輯和模板，而不會影響到父單元