Vue.js快速入門教程

Vue.js快速入門教程

像AngularJS這種前端框架可以讓我們非常方便地開發出強大的單頁應用,然而有時候Angular這種大型框架對於我們的專案來說過於龐大,很多功能不一定會用到。這時候我們就需要評估一下使用它的必要性了。如果我們僅僅需要在一個簡單的網頁裡新增屈指可數的幾個功能,那麼用Angular就太麻煩了,必要的安裝、配置、編寫路由和設計控制器等等工作顯得過於繁瑣。

這時候我們需要一個更加輕量級的解決方案。Vue.js就是一個不錯的選擇。Vue.js是一個專注於檢視模型(ViewModal)的框架。檢視模型是UI和資料模型之間進行資料交流的橋樑,實現了UI到資料模型之間的雙向資料繫結。它不是一個“完整的框架”,而是一個專注於檢視層的簡單靈活的框架。

接下來我們將通過一個簡單的備忘錄應用來帶大家瞭解Vue.js的基礎知識。為了讓大家更加關注Vue.js本身,我們設計一個基於本地資料的客戶端應用,在本文最後會提及Vue.js與後端的互動方式。

準備工作

讓我們先通過npm獲取Vue.js和Bootstrap(非必須,這裡是為了應用其樣式庫),在命令列中輸入以下內容:


npm install vue bootstrap 

然後建立index.html和app.js兩個檔案:


touch index.html app.js 

同時新增以下內容到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> <!— 導航欄 --> <nav class="navbar navbar-default"> <div class="container-fluid"> <a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i> Vue 備忘錄</a> </div> </nav> <!—應用的主要部分 --> <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> <!—展示備忘錄的內容 --> <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>標籤是這個應用的核心部分。之後我們會給這個核心部分建立一個Vue例項。

建立一個Vue例項

首先,讓我們建立一個Vue例項並將這個例項的” el”屬性設為”#events”。這樣例項就會和ID為”events”的容器繫結,


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

到了這一步,Vue的功能就會在div#events 中生效了。在新增其他內容之前,讓我們先給建立好的Vue例項新增一些必要的屬性:


// app.js new Vue({ //和ID為”events”的容器繫結 el: '#events', // 在data屬性中我們定義和網頁互動的資料 data: {}, // 在應用載入的時候會執行ready屬性中的函式 ready: function() {}, // 我們在應用中使用到的方法會在methods屬性中定義 methods: {}}); 

data屬性是一個物件,宣告瞭我們這個應用的檢視模型中的所有資料

ready屬性是一個函式,會在應用載入的時候被執行,通常在這裡呼叫其他方法來初始化應用所需的資料

methods方法定義了在這個應用中需要使用的方法

新增內容到表單

我們需要在表單裡輸入備忘錄的詳細內容。我們用到了HTML5 的原生時間選擇器來設定備忘錄內容的時間。(注意這個功能在火狐瀏覽器中不適用,推薦用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標籤和textarea標籤新增了一個” v-model”指令。類似於Angular的”ng-model”,這個v-model的值規定了檢視模型中繫結到這個標籤的資料,這個資料不光在這裡可以用,在容器中的其他地方也可用。

我們給提交按鈕增加了一個” @click”指令,這個指令是簡寫,全稱應該是” v-on:click”,作用是給這個按鈕繫結了一個點選事件的監聽器,當點選事件觸發時,@click指令中的監聽函式就會執行,在本例中我們給提交按鈕繫結的是addEvent函式。我們還可以繫結其他事件,寫法則是@事件名=”監聽函式”,如我們想給keydown事件繫結一個監聽函式f,可以這麼寫:@keydown=”f”或者v-on:keydown=”f”

到了這一步如果你預覽一下網頁你會看到如下內容:

新增資料

之前我們曾提到過addEvent方法,這個方法是用來新增新的備忘錄資料的。

現在我們會定義這個方法並新增一些必要的資料


// app.js ... data: { event: { name: '', description: '', date: '' }, events: []},// 在應用載入的時候會執行ready屬性中的函式ready: function() { // 在應用載入的時候我們需要初始化資料 this.fetchEvents();},// 我們在應用中使用到的方法會在methods屬性中定義methods: { // 我們定義一個方法來獲取資料 fetchEvents: function() { var events = [{ id: 1, name: '開會', description: '上午9點在21層大會議室', date: '2015-09-10' }, { id: 2, name: '購物', description: '買個充電寶', date: '2015-10-02' }, { id: 3, name: '學習', description: '學習Vue官網上的教程', date: '2016-03-11' } ];// $set 是Vue提供的一個向陣列插入資料的方法,在執行它的時候還會重新整理檢視 this.$set('events', events); }, //向事項陣列插入資料 addEvent: function() { if(this.event.name) { this.events.push(this.event); this.event = { name: '', description: '', date: '' }; } }} 

在data屬性中,我們定義了一個event物件和一個events陣列,分別表示事項和事項陣列。這些資料在應用載入時會被載入。如果我們不預定義event物件的話,雖然後續功能可以實現,但是瀏覽器會報這個錯:

它們的意思是指你在應用中使用的資料如果不在data屬性中宣告,那麼應用的效能就會受到影響。因此我們在應用中使用到的資料最好都在data屬性中宣告。

在ready屬性中我們定義了fetchEvents方法來獲取資料,在該方法中我們通過 vm.$set方法來將資料新增到檢視中,其功能類似於陣列的push方法,同時它還會重新整理檢視,該方法的引數必須是一個字串keypath,表示傳入的資料。具體用法可以看 這裡。

最後,在method屬性中我們定義了addEvents方法,檢查event.name的值是否存在,如果存在則新增event到events陣列中。之後,event物件中的資料會被清空,同時表單也會隨之被清空。

新增事項清單

我們用一個事項清單來列出所有事項:


<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結構相同、顯示內容不同的元素。在這個例子中,我們給一個a標籤新增了v-for指令,它會遍歷events陣列中的資料,每一次遍歷的資料我們用event來表示。新增了v-for指令的元素會將每次的遍歷結果套用在子元素中重複顯示,用過模板引擎、React或Angular的朋友可能會比較熟悉類似用法。在我們這個例子中,會重複顯示h4、h5、p和button標籤的內容,迴圈次數為events陣列的長度。帶v-for指令元素的子元素稱為 模板,模板中的資料用雙大括號包裹。在這個例子中資料為event物件的各個屬性(name、date和description)。

大家會注意到模板的元素中有的新增了 v-if指令。這個指令起到了 條件渲染的作用。v-if的值為判斷條件,如果結果為true則渲染該元素,否則不渲染。另外在button元素中我們新增了一個click指令,呼叫了deleteEvent方法用於刪除事項(具體定義下面會給出),其引數$index代表當前遍歷到的元素在陣列中的編號。

重新整理一下頁面我們會發現所有事項會在頁面右側列出來,在左側表單中輸入內容並點選“提交”按鈕之後,新的事項會自動新增到右側的列表裡。

下面我們來定義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); } } 

在這個方法中我們先詢問使用者是否確定刪除該事項,如果點選”OK”,那麼就通過Vue預定義的$remove方法將該事項從DOM中刪除。

與後端的互動

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

這裡簡單介紹一下vue-resource。vue-resource是專門為Vue設計的一個用於傳送HTTP請求的外掛。它支援Promise和URI模板,同時還提供了像攔截器(Interceptor)這樣的工具。還是看我們上面這個例子,我們將事項的獲取改為通過從伺服器獲取,這時候就需要修改fetchEvents方法:(假設後端通過api/events這一url提供事項相關的服務,下同)


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

如果獲取成功,那麼就會執行then函式的語句,依然是呼叫$set方法,只是輸入的引數events變為從伺服器獲取。

如果將addEvent進行修改,我們需要傳送一個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); });} 

同樣,刪除事項的方法可以這麼修改:


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

這裡我們將事項的id傳給了伺服器,告知伺服器要刪除的事項id以便於伺服器確定刪除哪個事項。

結語

用過Angular和React的朋友會發現Vue和它們都很多相像之處:與Angular相似的指令,與React相似的模組化處理。然而Vue和它們明顯不同,它更加輕量,易於上手,你不需要像Angular那樣去進行復雜的配置,也不需要像React那樣去學習新的虛擬DOM、JSX等等新的概念。因此,如果你的應用並不是很龐大,你不妨考慮用Vue作為你的應用框架。

以上所述是小編給大家介紹的Vue.js快速入門教程,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對指令碼之家網站的支援!

您可能感興趣的文章:

vue.js開發環境安裝教程超簡單的Vue.js環境搭建教程Vue.js開發環境快速搭建教程詳解Vue.js入門環境搭建Vue.js系列之專案搭建(1)Vue.js開發環境搭建基於Vue2的移動端開發環境搭建詳解Vue.js快速入門例項教程JavaScript的Vue.js庫入門學習教程vue.js從安裝到搭建過程詳解