Vue.js基礎學習(一)
Vue.js基礎學習 一
Vue.js 是什麼
Vue 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與現代化的工具鏈以及各種支援類庫結合使用時,Vue 也完全能夠為複雜的單頁應用提供驅動。
1.宣告式渲染
Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
介面效果如下:
這樣我們就成功建立了第一個 Vue 應用!看起來這跟渲染一個字串模板非常類似,但是 Vue 在背後做了大量工作。現在資料和 DOM 已經被建立了關聯,所有東西都是響應式的。我們要怎麼確認呢?開啟你的瀏覽器的 JavaScript 控制檯 (就在這個頁面開啟),並修改 app.message
除了文字插值,我們還可以像這樣來繫結元素特性:
<div id="app-2">
<span v-bind:title="message">
滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載於 ' + new Date().toLocaleString()
}
})
效果圖:
v-bind
特性被稱為指令。指令帶有字首 v-
title
特性和 Vue 例項的 message
屬性保持一致”。
如果你再次開啟瀏覽器的 JavaScript 控制檯,輸入 app2.message = '新訊息'
,就會再一次看到這個綁定了 title
特性的 HTML 已經進行了更新。
2.條件(v-if)與迴圈(v-for)
控制切換一個元素是否顯示也相當簡單:
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
效果圖:
繼續在控制檯輸入 app3.seen = false
,你會發現之前顯示的訊息消失了。
這個例子演示了我們不僅可以把資料繫結到 DOM 文字或特性,還可以繫結到 DOM 結構。此外,Vue 也提供一個強大的過渡效果系統,可以在 Vue 插入/更新/移除元素時自動應用過渡效果。
還有其它很多指令,每個都有特殊的功能。例如,v-for
指令可以繫結陣列的資料來渲染一個專案列表:
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '學習 JavaScript' },
{ text: '學習 Vue' },
{ text: '整個牛專案' }
]
}
})
效果圖:
在控制檯裡,輸入app4.todos.push({ text: '新專案' })
,你會發現列表最後添加了一個新專案。
3.處理使用者輸入(v-on與v-model)
v-on
事件監聽器與v-model
表單輸入和應用狀態之間的雙向繫結
v-on
事件監聽器
為了讓使用者和你的應用進行互動,我們可以用 v-on
指令新增一個事件監聽器,通過它呼叫在 Vue 例項中定義的方法:
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆轉訊息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
注意在reverseMessage
方法中,我們更新了應用的狀態,但沒有觸碰 DOM——所有的 DOM 操作都由 Vue 來處理,你編寫的程式碼只需要關注邏輯層面即可。
v-model
表單輸入和應用狀態之間的雙向繫結
Vue 還提供了v-model
指令,它能輕鬆實現表單輸入和應用狀態之間的雙向繫結。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
4.元件化應用構建
元件系統是 Vue 的另一個重要概念,因為它是一種抽象,允許我們使用小型、獨立和通常可複用的元件構建大型應用。仔細想想,幾乎任意型別的應用介面都可以抽象為一個元件樹:
在 Vue 裡,一個元件本質上是一個擁有預定義選項的一個 Vue 例項。在 Vue 中註冊元件很簡單:
// 定義名為 todo-item 的新元件
Vue.component('todo-item', {
template: '<li>這是個待辦項</li>'
})
現在你可以用它構建另一個元件模板:
<ol>
<!-- 建立一個 todo-item 元件的例項 -->
<todo-item></todo-item>
</ol>
但是這樣會為每個待辦項渲染同樣的文字,這看起來並不炫酷。我們應該能從父作用域將資料傳到子元件才對。讓我們來修改一下元件的定義,使之能夠接受一個 prop:
Vue.component('todo-item', {
// todo-item 元件現在接受一個
// "prop",類似於一個自定義特性。
// 這個 prop 名為 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
現在,我們可以使用v-bind
指令將待辦項傳到迴圈輸出的每個元件中:
<div id="app-7">
<ol>
<!--
現在我們為每個 todo-item 提供 todo 物件
todo 物件是變數,即其內容可以是動態的。
我們也需要為每個元件提供一個“key”,稍後再
作詳細解釋。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '乳酪' },
{ id: 2, text: '隨便其它什麼人吃的東西' }
]
}
})
效果圖:
儘管這只是一個刻意設計的例子,但是我們已經設法將應用分割成了兩個更小的單元。子單元通過 prop 介面與父單元進行了良好的解耦。我們現在可以進一步改進 <todo-item>
元件,提供更為複雜的模板和邏輯,而不會影響到父單元。
在一個大型應用中,有必要將整個應用程式劃分為元件,以使開發更易管理。在後續教程中我們將詳述元件,不過這裡有一個 (假想的) 例子,以展示使用了元件的應用模板是什麼樣的:
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>