快捷導(dǎo)航

Vue.js快速入門教程

更新時間：2016年09月07日 13:37:27 投稿：mrr

Vue.js是一個專注于視圖模型(ViewModal)的框架。接下來給大家?guī)砹藇ue.js快速入門教程，非常不錯，具有參考借鑒價值，一起看看吧

像AngularJS這種前端框架可以讓我們非常方便地開發(fā)出強(qiáng)大的單頁應(yīng)用，然而有時候Angular這種大型框架對于我們的項(xiàng)目來說過于龐大，很多功能不一定會用到。這時候我們就需要評估一下使用它的必要性了。如果我們僅僅需要在一個簡單的網(wǎng)頁里添加屈指可數(shù)的幾個功能，那么用Angular就太麻煩了，必要的安裝、配置、編寫路由和設(shè)計(jì)控制器等等工作顯得過于繁瑣。

這時候我們需要一個更加輕量級的解決方案。Vue.js就是一個不錯的選擇。Vue.js是一個專注于視圖模型(ViewModal)的框架。視圖模型是UI和數(shù)據(jù)模型之間進(jìn)行數(shù)據(jù)交流的橋梁，實(shí)現(xiàn)了UI到數(shù)據(jù)模型之間的雙向數(shù)據(jù)綁定。它不是一個“完整的框架”，而是一個專注于視圖層的簡單靈活的框架。

接下來我們將通過一個簡單的備忘錄應(yīng)用來帶大家了解Vue.js的基礎(chǔ)知識。為了讓大家更加關(guān)注Vue.js本身，我們設(shè)計(jì)一個基于本地?cái)?shù)據(jù)的客戶端應(yīng)用，在本文最后會提及Vue.js與后端的交互方式。

準(zhǔn)備工作

讓我們先通過npm獲取Vue.js和Bootstrap(非必須，這里是為了應(yīng)用其樣式庫)，在命令行中輸入以下內(nèi)容：

npm install vue bootstrap

然后創(chuàng)建index.html和app.js兩個文件：

touch index.html app.js

同時添加以下內(nèi)容到index.html中

<!-- index.html --><!doctype html><html><head> <meta charset="utf-8"> <title>Vue</title> <!-- CSS --> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"></head><body> <!— 導(dǎo)航欄 --> <nav class="navbar navbar-default"> <div class="container-fluid"> <a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i> Vue 備忘錄</a> </div> </nav> <!—應(yīng)用的主要部分 --> <div class="container" id="events"> <!—添加一個表單 --> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3>Add an Event</h3> </div> <div class="panel-body"> </div> </div> </div> <!—展示備忘錄的內(nèi)容 --> <div class="col-sm-6"> <div class="list-group"> </div> </div> </div> <!-- JS --> <script src="node_modules/vue/dist/vue.js"></script> <script src="app.js"></script></body></html>

ID為”events”的<div>標(biāo)簽是這個應(yīng)用的核心部分。之后我們會給這個核心部分創(chuàng)建一個Vue實(shí)例。

創(chuàng)建一個Vue實(shí)例

首先，讓我們創(chuàng)建一個Vue實(shí)例并將這個實(shí)例的” el”屬性設(shè)為”#events”。這樣實(shí)例就會和ID為”events”的容器綁定，

// app.jsnew Vue({// 和ID為”events”的容器綁定 el: '#events'});

到了這一步，Vue的功能就會在div#events 中生效了。在添加其他內(nèi)容之前，讓我們先給創(chuàng)建好的Vue實(shí)例添加一些必要的屬性：

// app.js new Vue({ //和ID為”events”的容器綁定 el: '#events', // 在data屬性中我們定義和網(wǎng)頁交互的數(shù)據(jù) data: {}, // 在應(yīng)用加載的時候會執(zhí)行ready屬性中的函數(shù) ready: function() {}, // 我們在應(yīng)用中使用到的方法會在methods屬性中定義 methods: {}});

data屬性是一個對象，聲明了我們這個應(yīng)用的視圖模型中的所有數(shù)據(jù)

ready屬性是一個函數(shù)，會在應(yīng)用加載的時候被執(zhí)行，通常在這里調(diào)用其他方法來初始化應(yīng)用所需的數(shù)據(jù)

methods方法定義了在這個應(yīng)用中需要使用的方法

添加內(nèi)容到表單

我們需要在表單里輸入備忘錄的詳細(xì)內(nèi)容。我們用到了HTML5 的原生時間選擇器來設(shè)置備忘錄內(nèi)容的時間。（注意這個功能在火狐瀏覽器中不適用，推薦用Chrome或Safari）

<div class="panel-body"> <div class="form-group"> <input class="form-control" placeholder="事件名稱" v-model="event.name"> </div> <div class="form-group"> <textarea class="form-control" placeholder="事件描述" v-model="event.description"></textarea> </div> <div class="form-group"> <input type="date" class="form-control" placeholder="Date" v-model="event.date"> </div> <button class="btn btn-primary" @click="addEvent">提交</button></div>

我們給input標(biāo)簽和textarea標(biāo)簽添加了一個” v-model”指令。類似于Angular的”ng-model”，這個v-model的值規(guī)定了視圖模型中綁定到這個標(biāo)簽的數(shù)據(jù)，這個數(shù)據(jù)不光在這里可以用，在容器中的其他地方也可用。

我們給提交按鈕增加了一個” @click”指令，這個指令是簡寫，全稱應(yīng)該是” v-on:click”，作用是給這個按鈕綁定了一個點(diǎn)擊事件的監(jiān)聽器，當(dāng)點(diǎn)擊事件觸發(fā)時，@click指令中的監(jiān)聽函數(shù)就會執(zhí)行，在本例中我們給提交按鈕綁定的是addEvent函數(shù)。我們還可以綁定其他事件，寫法則是@事件名=”監(jiān)聽函數(shù)”,如我們想給keydown事件綁定一個監(jiān)聽函數(shù)f，可以這么寫：@keydown=”f”或者v-on:keydown=”f”

到了這一步如果你預(yù)覽一下網(wǎng)頁你會看到如下內(nèi)容：

添加數(shù)據(jù)

之前我們曾提到過addEvent方法，這個方法是用來添加新的備忘錄數(shù)據(jù)的。

現(xiàn)在我們會定義這個方法并添加一些必要的數(shù)據(jù)

// app.js ... data: { event: { name: '', description: '', date: '' }, events: []},// 在應(yīng)用加載的時候會執(zhí)行ready屬性中的函數(shù)ready: function() { // 在應(yīng)用加載的時候我們需要初始化數(shù)據(jù) this.fetchEvents();},// 我們在應(yīng)用中使用到的方法會在methods屬性中定義methods: { // 我們定義一個方法來獲取數(shù)據(jù) fetchEvents: function() { var events = [{ id: 1, name: '開會', description: '上午9點(diǎn)在21層大會議室', date: '2015-09-10' }, { id: 2, name: '購物', description: '買個充電寶', date: '2015-10-02' }, { id: 3, name: '學(xué)習(xí)', description: '學(xué)習(xí)Vue官網(wǎng)上的教程', date: '2016-03-11' } ];// $set 是Vue提供的一個向數(shù)組插入數(shù)據(jù)的方法，在執(zhí)行它的時候還會刷新視圖 this.$set('events', events); }, //向事項(xiàng)數(shù)組插入數(shù)據(jù) addEvent: function() { if(this.event.name) { this.events.push(this.event); this.event = { name: '', description: '', date: '' }; } }}

在data屬性中，我們定義了一個event對象和一個events數(shù)組，分別表示事項(xiàng)和事項(xiàng)數(shù)組。這些數(shù)據(jù)在應(yīng)用加載時會被加載。如果我們不預(yù)定義event對象的話，雖然后續(xù)功能可以實(shí)現(xiàn)，但是瀏覽器會報(bào)這個錯：

它們的意思是指你在應(yīng)用中使用的數(shù)據(jù)如果不在data屬性中聲明，那么應(yīng)用的性能就會受到影響。因此我們在應(yīng)用中使用到的數(shù)據(jù)最好都在data屬性中聲明。

在ready屬性中我們定義了fetchEvents方法來獲取數(shù)據(jù)，在該方法中我們通過 vm.$set方法來將數(shù)據(jù)添加到視圖中，其功能類似于數(shù)組的push方法，同時它還會刷新視圖，該方法的參數(shù)必須是一個字符串keypath，表示傳入的數(shù)據(jù)。具體用法可以看這里。

最后，在method屬性中我們定義了addEvents方法，檢查event.name的值是否存在，如果存在則添加event到events數(shù)組中。之后，event對象中的數(shù)據(jù)會被清空，同時表單也會隨之被清空。

添加事項(xiàng)清單

我們用一個事項(xiàng)清單來列出所有事項(xiàng)：

<div class="list-group"> <a href="#" class="list-group-item" v-for="event in events"> <h4 class="list-group-item-heading"> <i class="glyphicon glyphicon-bullhorn"></i> {{ event.name }} </h4> <h5> <i class="glyphicon glyphicon-calendar" v-if="event.date"></i> {{ event.date }} </h5> <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p> <button class="btn btn-xs btn-danger" @click="deleteEvent($index)">Delete</button> </a></div>

我們通過 v-for指令來批量渲染DOM結(jié)構(gòu)相同、顯示內(nèi)容不同的元素。在這個例子中，我們給一個a標(biāo)簽添加了v-for指令，它會遍歷events數(shù)組中的數(shù)據(jù)，每一次遍歷的數(shù)據(jù)我們用event來表示。添加了v-for指令的元素會將每次的遍歷結(jié)果套用在子元素中重復(fù)顯示，用過模板引擎、React或Angular的朋友可能會比較熟悉類似用法。在我們這個例子中，會重復(fù)顯示h4、h5、p和button標(biāo)簽的內(nèi)容，循環(huán)次數(shù)為events數(shù)組的長度。帶v-for指令元素的子元素稱為模板，模板中的數(shù)據(jù)用雙大括號包裹。在這個例子中數(shù)據(jù)為event對象的各個屬性（name、date和description）。

大家會注意到模板的元素中有的添加了 v-if指令。這個指令起到了條件渲染的作用。v-if的值為判斷條件，如果結(jié)果為true則渲染該元素，否則不渲染。另外在button元素中我們添加了一個click指令，調(diào)用了deleteEvent方法用于刪除事項(xiàng)（具體定義下面會給出），其參數(shù)$index代表當(dāng)前遍歷到的元素在數(shù)組中的編號。

刷新一下頁面我們會發(fā)現(xiàn)所有事項(xiàng)會在頁面右側(cè)列出來，在左側(cè)表單中輸入內(nèi)容并點(diǎn)擊“提交”按鈕之后，新的事項(xiàng)會自動添加到右側(cè)的列表里。

下面我們來定義deleteEvent方法

deleteEvent: function (index) { if (confirm("Are you sure you want to delete this event?")) { // $remove is a Vue convenience method similar to splice this.events.$remove(index); } }

在這個方法中我們先詢問用戶是否確定刪除該事項(xiàng)，如果點(diǎn)擊”O(jiān)K”，那么就通過Vue預(yù)定義的$remove方法將該事項(xiàng)從DOM中刪除。

與后端的交互

和Angular一樣，Vue的前端和后端是分離的，與后端的交互通過HTTP請求來完成。交互的工具有很多，你可以使用你熟悉的$.ajax、原生的XMLHttpRequest對象或者其他第三方庫，也可以嘗試一下vue-resource。

這里簡單介紹一下vue-resource。vue-resource是專門為Vue設(shè)計(jì)的一個用于發(fā)送HTTP請求的插件。它支持Promise和URI模板，同時還提供了像攔截器(Interceptor)這樣的工具。還是看我們上面這個例子，我們將事項(xiàng)的獲取改為通過從服務(wù)器獲取，這時候就需要修改fetchEvents方法：（假設(shè)后端通過api/events這一url提供事項(xiàng)相關(guān)的服務(wù)，下同）

fetchEvents:function(){ this.$http.get('api/events').then(function(events) { this.$set('events', events); }).catch(function(error) { console.log(error); });}

如果獲取成功，那么就會執(zhí)行then函數(shù)的語句，依然是調(diào)用$set方法，只是輸入的參數(shù)events變?yōu)閺姆?wù)器獲取。

如果將addEvent進(jìn)行修改，我們需要發(fā)送一個POST請求：

addEvent: function(){ this.$http.post('api/events', this.event) .then(function (response) { this.events.push(this.event); console.log("Event added!"); }) .catch(function (error) { console.log(error); });}

同樣，刪除事項(xiàng)的方法可以這么修改：

deleteEvent:function(index){ this.$http.delete('api/events/' + event.id) .then(function (response) { this.events.$remove(index); }) .catch(function (error) { console.log(error); });}

這里我們將事項(xiàng)的id傳給了服務(wù)器，告知服務(wù)器要刪除的事項(xiàng)id以便于服務(wù)器確定刪除哪個事項(xiàng)。

結(jié)語

用過Angular和React的朋友會發(fā)現(xiàn)Vue和它們都很多相像之處：與Angular相似的指令，與React相似的模塊化處理。然而Vue和它們明顯不同，它更加輕量，易于上手，你不需要像Angular那樣去進(jìn)行復(fù)雜的配置，也不需要像React那樣去學(xué)習(xí)新的虛擬DOM、JSX等等新的概念。因此，如果你的應(yīng)用并不是很龐大，你不妨考慮用Vue作為你的應(yīng)用框架。

以上所述是小編給大家介紹的Vue.js快速入門教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: