Vue.js快速入門教程
像AngularJS這種前端框架可以讓我們非常方便地開(kāi)發(fā)出強(qiáng)大的單頁(yè)應(yīng)用，然而有時(shí)候Angular這種大型框架對(duì)于我們的項(xiàng)目來(lái)說(shuō)過(guò)于龐大，很多功能不一定會(huì)用到。這時(shí)候我們就需要評(píng)估一下使用它的必要性了。如果我們僅僅需要在一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)里添加屈指可數(shù)的幾個(gè)功能，那么用Angular就太麻煩了，必要的安裝、配置、編寫路由和設(shè)計(jì)控制器等等工作顯得過(guò)于繁瑣。
這時(shí)候我們需要一個(gè)更加輕量級(jí)的解決方案。Vue.js就是一個(gè)不錯(cuò)的選擇。Vue.js是一個(gè)專注于視圖模型(ViewModal)的框架。視圖模型是UI和數(shù)據(jù)模型之間進(jìn)行數(shù)據(jù)交流的橋梁，實(shí)現(xiàn)了UI到數(shù)據(jù)模型之間的雙向數(shù)據(jù)綁定。它不是一個(gè)“完整的框架”，而是一個(gè)專注于視圖層的簡(jiǎn)單靈活的框架。
接下來(lái)我們將通過(guò)一個(gè)簡(jiǎn)單的備忘錄應(yīng)用來(lái)帶大家了解Vue.js的基礎(chǔ)知識(shí)。為了讓大家更加關(guān)注Vue.js本身，我們?cè)O(shè)計(jì)一個(gè)基于本地?cái)?shù)據(jù)的客戶端應(yīng)用，在本文最后會(huì)提及Vue.js與后端的交互方式。
準(zhǔn)備工作
讓我們先通過(guò)npm獲取Vue.js和Bootstrap(非必須，這里是為了應(yīng)用其樣式庫(kù))，在命令行中輸入以下內(nèi)容：
npm install vue bootstrap
然后創(chuàng)建index.html和app.js兩個(gè)文件：
touch index.html app.js
同時(shí)添加以下內(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"> <!—添加一個(gè)表單 --> <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)簽是這個(gè)應(yīng)用的核心部分。之后我們會(huì)給這個(gè)核心部分創(chuàng)建一個(gè)Vue實(shí)例。
創(chuàng)建一個(gè)Vue實(shí)例
首先，讓我們創(chuàng)建一個(gè)Vue實(shí)例并將這個(gè)實(shí)例的” el”屬性設(shè)為”#events”。這樣實(shí)例就會(huì)和ID為”events”的容器綁定，
// app.jsnew Vue({// 和ID為”events”的容器綁定 el: '#events'});
到了這一步，Vue的功能就會(huì)在div#events 中生效了。在添加其他內(nèi)容之前，讓我們先給創(chuàng)建好的Vue實(shí)例添加一些必要的屬性：
// app.js new Vue({ //和ID為”events”的容器綁定 el: '#events', // 在data屬性中我們定義和網(wǎng)頁(yè)交互的數(shù)據(jù) data: {}, // 在應(yīng)用加載的時(shí)候會(huì)執(zhí)行ready屬性中的函數(shù) ready: function() {}, // 我們?cè)趹?yīng)用中使用到的方法會(huì)在methods屬性中定義 methods: {}});
data屬性是一個(gè)對(duì)象，聲明了我們這個(gè)應(yīng)用的視圖模型中的所有數(shù)據(jù)
ready屬性是一個(gè)函數(shù)，會(huì)在應(yīng)用加載的時(shí)候被執(zhí)行，通常在這里調(diào)用其他方法來(lái)初始化應(yīng)用所需的數(shù)據(jù)
methods方法定義了在這個(gè)應(yīng)用中需要使用的方法
添加內(nèi)容到表單
我們需要在表單里輸入備忘錄的詳細(xì)內(nèi)容。我們用到了HTML5 的原生時(shí)間選擇器來(lái)設(shè)置備忘錄內(nèi)容的時(shí)間。（注意這個(gè)功能在火狐瀏覽器中不適用，推薦用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)簽添加了一個(gè)” v-model”指令。類似于Angular的”ng-model”，這個(gè)v-model的值規(guī)定了視圖模型中綁定到這個(gè)標(biāo)簽的數(shù)據(jù)，這個(gè)數(shù)據(jù)不光在這里可以用，在容器中的其他地方也可用。
我們給提交按鈕增加了一個(gè)” @click”指令，這個(gè)指令是簡(jiǎn)寫，全稱應(yīng)該是” v-on:click”，作用是給這個(gè)按鈕綁定了一個(gè)點(diǎn)擊事件的監(jiān)聽(tīng)器，當(dāng)點(diǎn)擊事件觸發(fā)時(shí)，@click指令中的監(jiān)聽(tīng)函數(shù)就會(huì)執(zhí)行，在本例中我們給提交按鈕綁定的是addEvent函數(shù)。我們還可以綁定其他事件，寫法則是@事件名=”監(jiān)聽(tīng)函數(shù)”,如我們想給keydown事件綁定一個(gè)監(jiān)聽(tīng)函數(shù)f，可以這么寫：@keydown=”f”或者v-on:keydown=”f”
到了這一步如果你預(yù)覽一下網(wǎng)頁(yè)你會(huì)看到如下內(nèi)容：
添加數(shù)據(jù)
之前我們?cè)岬竭^(guò)addEvent方法，這個(gè)方法是用來(lái)添加新的備忘錄數(shù)據(jù)的。
現(xiàn)在我們會(huì)定義這個(gè)方法并添加一些必要的數(shù)據(jù)
// app.js ... data: { event: { name: '', description: '', date: '' }, events: []},// 在應(yīng)用加載的時(shí)候會(huì)執(zhí)行ready屬性中的函數(shù)ready: function() { // 在應(yīng)用加載的時(shí)候我們需要初始化數(shù)據(jù) this.fetchEvents();},// 我們?cè)趹?yīng)用中使用到的方法會(huì)在methods屬性中定義methods: { // 我們定義一個(gè)方法來(lái)獲取數(shù)據(jù) fetchEvents: function() { var events = [{ id: 1, name: '開(kāi)會(huì)', description: '上午9點(diǎn)在21層大會(huì)議室', date: '2015-09-10' }, { id: 2, name: '購(gòu)物', description: '買個(gè)充電寶', date: '2015-10-02' }, { id: 3, name: '學(xué)習(xí)', description: '學(xué)習(xí)Vue官網(wǎng)上的教程', date: '2016-03-11' } ];// $set 是Vue提供的一個(gè)向數(shù)組插入數(shù)據(jù)的方法，在執(zhí)行它的時(shí)候還會(huì)刷新視圖 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屬性中，我們定義了一個(gè)event對(duì)象和一個(gè)events數(shù)組，分別表示事項(xiàng)和事項(xiàng)數(shù)組。這些數(shù)據(jù)在應(yīng)用加載時(shí)會(huì)被加載。如果我們不預(yù)定義event對(duì)象的話，雖然后續(xù)功能可以實(shí)現(xiàn)，但是瀏覽器會(huì)報(bào)這個(gè)錯(cuò)：
它們的意思是指你在應(yīng)用中使用的數(shù)據(jù)如果不在data屬性中聲明，那么應(yīng)用的性能就會(huì)受到影響。因此我們?cè)趹?yīng)用中使用到的數(shù)據(jù)最好都在data屬性中聲明。
在ready屬性中我們定義了fetchEvents方法來(lái)獲取數(shù)據(jù)，在該方法中我們通過(guò) vm.$set方法來(lái)將數(shù)據(jù)添加到視圖中，其功能類似于數(shù)組的push方法，同時(shí)它還會(huì)刷新視圖，該方法的參數(shù)必須是一個(gè)字符串keypath，表示傳入的數(shù)據(jù)。具體用法可以看 這里。
最后，在method屬性中我們定義了addEvents方法，檢查event.name的值是否存在，如果存在則添加event到events數(shù)組中。之后，event對(duì)象中的數(shù)據(jù)會(huì)被清空，同時(shí)表單也會(huì)隨之被清空。
添加事項(xiàng)清單
我們用一個(gè)事項(xiàng)清單來(lái)列出所有事項(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>
我們通過(guò) v-for指令來(lái) 批量渲染DOM結(jié)構(gòu)相同、顯示內(nèi)容不同的元素。在這個(gè)例子中，我們給一個(gè)a標(biāo)簽添加了v-for指令，它會(huì)遍歷events數(shù)組中的數(shù)據(jù)，每一次遍歷的數(shù)據(jù)我們用event來(lái)表示。添加了v-for指令的元素會(huì)將每次的遍歷結(jié)果套用在子元素中重復(fù)顯示，用過(guò)模板引擎、React或Angular的朋友可能會(huì)比較熟悉類似用法。在我們這個(gè)例子中，會(huì)重復(fù)顯示h4、h5、p和button標(biāo)簽的內(nèi)容，循環(huán)次數(shù)為events數(shù)組的長(zhǎng)度。帶v-for指令元素的子元素稱為 模板，模板中的數(shù)據(jù)用雙大括號(hào)包裹。在這個(gè)例子中數(shù)據(jù)為event對(duì)象的各個(gè)屬性（name、date和description）。
大家會(huì)注意到模板的元素中有的添加了 v-if指令。這個(gè)指令起到了 條件渲染的作用。v-if的值為判斷條件，如果結(jié)果為true則渲染該元素，否則不渲染。另外在button元素中我們添加了一個(gè)click指令，調(diào)用了deleteEvent方法用于刪除事項(xiàng)（具體定義下面會(huì)給出），其參數(shù)$index代表當(dāng)前遍歷到的元素在數(shù)組中的編號(hào)。
刷新一下頁(yè)面我們會(huì)發(fā)現(xiàn)所有事項(xiàng)會(huì)在頁(yè)面右側(cè)列出來(lái)，在左側(cè)表單中輸入內(nèi)容并點(diǎn)擊“提交”按鈕之后，新的事項(xiàng)會(huì)自動(dòng)添加到右側(cè)的列表里。
下面我們來(lái)定義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); } }
在這個(gè)方法中我們先詢問(wèn)用戶是否確定刪除該事項(xiàng)，如果點(diǎn)擊”O(jiān)K”，那么就通過(guò)Vue預(yù)定義的$remove方法將該事項(xiàng)從DOM中刪除。
與后端的交互
和Angular一樣，Vue的前端和后端是分離的，與后端的交互通過(guò)HTTP請(qǐng)求來(lái)完成。交互的工具有很多，你可以使用你熟悉的$.ajax、原生的XMLHttpRequest對(duì)象或者其他第三方庫(kù)，也可以嘗試一下vue-resource。
這里簡(jiǎn)單介紹一下vue-resource。vue-resource是專門為Vue設(shè)計(jì)的一個(gè)用于發(fā)送HTTP請(qǐng)求的插件。它支持Promise和URI模板，同時(shí)還提供了像攔截器(Interceptor)這樣的工具。還是看我們上面這個(gè)例子，我們將事項(xiàng)的獲取改為通過(guò)從服務(wù)器獲取，這時(shí)候就需要修改fetchEvents方法：（假設(shè)后端通過(guò)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); });}
如果獲取成功，那么就會(huì)執(zhí)行then函數(shù)的語(yǔ)句，依然是調(diào)用$set方法，只是輸入的參數(shù)events變?yōu)閺姆?wù)器獲取。
如果將addEvent進(jìn)行修改，我們需要發(fā)送一個(gè)POST請(qǐng)求：
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ù)器要?jiǎng)h除的事項(xiàng)id以便于服務(wù)器確定刪除哪個(gè)事項(xiàng)。
結(jié)語(yǔ)
用過(guò)Angular和React的朋友會(huì)發(fā)現(xiàn)Vue和它們都很多相像之處：與Angular相似的指令，與React相似的模塊化處理。然而Vue和它們明顯不同，它更加輕量，易于上手，你不需要像Angular那樣去進(jìn)行復(fù)雜的配置，也不需要像React那樣去學(xué)習(xí)新的虛擬DOM、JSX等等新的概念。因此，如果你的應(yīng)用并不是很龐大，你不妨考慮用Vue作為你的應(yīng)用框架。
以上所述是小編給大家介紹的Vue.js快速入門教程，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù)
在使用?.vue?定義的組件中，setup?中提供了?defineExpose()?方法，該方法可以將組件內(nèi)部的方法暴露給父組件，這篇文章主要介紹了Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù),需要的朋友可以參考下2022-10-10
Vue實(shí)現(xiàn)開(kāi)心消消樂(lè)游戲算法
這篇文章主要介紹了使用Vue寫一個(gè)開(kāi)心消消樂(lè)游戲，游戲算法在文中給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
nuxt 每個(gè)頁(yè)面head標(biāo)簽內(nèi)容設(shè)置方式
這篇文章主要介紹了nuxt 每個(gè)頁(yè)面head標(biāo)簽內(nèi)容設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue?Echarts實(shí)現(xiàn)儀表盤案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作
這篇文章主要介紹了vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue添加請(qǐng)求攔截器及vue-resource 攔截器使用
這篇文章主要介紹了Vue添加請(qǐng)求攔截器及vue-resource 攔截器使用,需要的朋友可以參考下2017-11-11
下面小編就為大家分享一篇Vue用v-for給src屬性賦值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了Vue中的同步和異步調(diào)用順序，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
簡(jiǎn)單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問(wèn)題
這篇文章主要介紹了簡(jiǎn)單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
微信小程序地圖導(dǎo)航功能實(shí)現(xiàn)完整源代碼附效果圖（推薦）
這篇文章主要介紹了微信小程序地圖導(dǎo)航功能實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04