這里是《Vue2.0 從零開始學系列筆記》的第二篇博文,博主小呆是一名互聯網非著名的半吊子前端,喜歡學習新技術,受到一些前輩的影響,多少也寫過一些筆記和學習心得,但是很遺憾沒有一個是成系列的╮(╯▽╰)╭,這次小呆下定決心了,不僅要寫一個成品系列文章出來,而且還要把之前沒寫完的坑補上,最近一直在學Vue2.0相關的東西,所以就拿它開刀了。

你能看到這篇文章,說明小呆沒有像之前寫筆記一樣太監掉(得意~<( ̄ˇ ̄)/),那就繼續往下看吧。

上一篇筆記小呆記述了如何安裝Vue-cli來搭建項目和運行項目,這一篇筆記接著學習Vue2.0,就先從Vue的組成部分學起咯。


1.What is SPA?

在正式寫代碼之前,我們首先要明白一些專業術語,理解這些專業術語對我們接下來的學習很有幫助。

我們用Vue.js寫的項目一般都是SPA項目,說倒這里可能還有同學不太明白什么是SPA,簡單來說,SPA就是俗稱的單頁應用(Single Page Web Application)。

做過移動端項目的童鞋可能會深有感觸,性能問題一直是痛點,而且用諸如Jquery等框架來操作DOM也一直被認為是不友好的。而使用SPA后,可以大大提高 H5 的性能,達到接近原生的流暢體驗。


2.了解Vue2.0的組件化開發

關于組件這個概念,其實也流傳很久了,通俗的講,積木我們都見過,同一塊積木,既可以用來搭房子,又可以用來搭汽車,這其實就是組件的概念(可復用,效率高)。通常我們寫頁面的時候,不同的頁面遇到相同的結構(比如表單結構,button按鈕等),我們常見的思路是復制粘貼,但是這樣做的不好處就是,如果有一天復用的結構需要改版,那么我們需要各種頁面里面搜索替換,很容易出錯,而且效率不高。

而用組件化開發后,我們只需要在每個頁面引用組件就可以,組件完全是獨立于頁面之外的,如需改版,只需改的組件的模板,所有用到這個組件的地方都會更新。這就是組件化開發的好處。

Vue2.0就推薦我們用組件化來進行開發,對于SPA來說,我們只有一個根頁面index.html,我們通過用.vue結尾的模板,來組裝我們的頁面,下面我們就實際看一下我們項目里的Hello Vue是如何展現出來的吧。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>app</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

首先是index.html,這個沒啥好說的,body文件里面我們放了一個id為app的div,用來當做容器。可能大家會很驚訝,我們上一篇筆記中,最后運行成功后的項目明明是有內容的,為什么index.html里面什么都沒有呢?先留個懸念,我們接著看項目目錄。

上一篇筆記中我們講過了src是我們開發的主文件夾,接著我們就要在這里面開始折騰了。打開App.vue文件:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

通過觀察,我們可以發現,.vue文件為三個標簽構成,templatescriptstyle,其中template標簽用來寫我們的html,script標簽用來寫js,style標簽用來寫css樣式。注意:每個template標簽下只允許存在一個根元素

<!-- 正確 -->
<template>
    <div id="app">
        <img src="./assets/logo.png">
        <router-view></router-view>
    </div>
</template>
<!-- 錯誤 -->
<template>
    <div id="app">
        <img src="./assets/logo.png">
        <router-view></router-view>
    </div>
    <div></div>
</template>

在app.vue模板里,我們有2個東西不認識,一個是<router-view></router-view>標簽,一個是export default,暫時先不管他們,一會我們在研究。接著我們來看main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

main.js是我們項目的主入口文件,什么是主入口文件呢,其實就相當于我們人類的大腦啦,這代碼一眼看上去很頭暈對不對,沒錯,我也是這個感覺,那本教程到此結束ㄟ( ▔, ▔ )ㄏ(納尼??小呆你這個魂淡,不是說好了要寫個系列筆記的嘛,就這么放棄的話如何在小萌面前展(yao)現(wu)才(yang)華(wei)呢?)

咳咳,開個玩笑啦,像我這么聰明有才華的人,怎么可能這么簡單就放棄嘛。仔細看看代碼,import,咦,這個詞語貌似以前在哪里用過。(o゜▽゜)o☆[BINGO!],想起來了,css里引用其他css樣式文件的時候用過:

@import url("CSS文件");

哈哈哈哈~難怪本天才這么聰明,據我猜測,估計這里的import也是引用什么東西用的。不過既然是在js文件里出現的,那應該就是ES6的內容了,經過一番查閱資料,原來這個import是關于原生JS模塊化用的。而main.js里的載入模塊的代碼應該是這樣的:

//加載了Vue.js模塊,沒有用相對路徑,所以會根據webpack的配置文件,在node_modules目錄下查找
import Vue from 'vue'
//加載了App.vue模塊,.vue的后綴可以省略不寫(不推薦,防止有重名文件沖突)
import App from './App.vue'
//加載了router目錄,如果路徑引用的只是某一個目錄,會自動尋找該目錄下的index.js文件進行加載,.js后綴也是可以省略不寫的(不推薦,防止有重名文件沖突)
import router from './router/index.js'

所以得出結論,import的加載格式應該是這樣的(ES6好像也么有辣么難嘛):

import 模塊名稱 from 模塊路徑

既然有了加載,那么與之對應的肯定有暴露接口的地方,這時我們回頭一看之前的App.vue中的script部分內容:

export default {
    name: 'app'
}

export default,就是我們與import相呼應的暴露接口的命令了。更多更詳細的關于import和export的用法,請閱讀小呆的另一篇專門介紹import和export的筆記《ES6新手入門全過程(二):export和import命令》

關于name屬性,小呆此時并未發現它的作用,去掉name也能正常運行,查了下API,原來是用來方便遞歸模板調用自身的,而且便于調試。所以我們在模板暴露接口的時候,還是加上name屬性比較好。

好,說完import和export,我們接著看下面的代碼:

new Vue({
  el: '#app',    //el屬性用來把我們的Vue實例掛載到DOM元素上,這里我們掛載到了#app上面
    router,   //加載路由
  template: '<App/>',  //template用來決定Vue使用的模板語言
  components: { App }   //components屬性用來告訴Vue我們要使用的模板,這里的App在import時定義過
})

我們通過new Vue來實例化一個Vue.js應用,在實例化 Vue 時,需要傳入一個選項對象,這個對象用來配置我們的應用。我們發現上面代碼中并不全是以鍵值對的形式書寫的,中間有一個單router是什么鬼?其實這是ES6的語法啦:

ES6規定,當引用的變量名和鍵名相同時,就可以簡寫,還原回來就是:router: router

這里可能很多人對template的理解一頭霧水,小呆跟你們一樣,不過小呆自己的理解是這樣的(<App/>應該是表明用App.vue的模板語言,也就是等價于<template>,如有不對還望指出)


結語

好啦,到這里為止第二篇的筆記就記述完啦,當然這篇筆記也繼承了小呆的一貫風格:知識點凌亂,知識點淺顯等一堆特點,不過小呆還是希望通過自己的一些方式去幫助一些在前端道路上同行的童鞋們。最后總結一下這篇筆記主要記述的幾點知識:

  1. 什么是SPA
  2. .vue模板的組成部分
  3. ES6 import和export
  4. 如何實例化一個Vue應用

關于筆記中的<router-view>標簽和man.js文件中的router部分,小呆將會寫在下篇筆記當中,敬請期待。