Vue入門（一）

轉：Vue入坑史，從一個簡單的項目提及（一）

 

最近一直在學習Vue，官方文檔也粗略的看過三四遍吧（有的東西總是記不住，多是老了，開個玩笑）。而後本身寫了一個簡單的Demo，模擬了iPhone端的微信界面，實現了一個簡單的聊天功能。

這裏是GitHub的項目地址，目前雖然仍是個半成品（有點懶），但對於初學者來講應該會有幫助，由於我也是初學者。使用到的技術棧包括Vue，Vuex，Vue-router，Vue-cli，Pug，Sass等。點擊這裏可在線查看效果，建議使用谷歌瀏覽器並在手機調試模式下查看。

這不是一篇純技術文章，更多的是我本身總結的一些方法和對Vue的理解。

初學者的難題

根據我學習的經歷，我以爲對於初學者學習Vue（或React）最大的難題可能就是環境的搭建，尤爲是對於沒有NodeJS方面經驗的人來講。這裏我要說一下本身對於學習Vue的一些看法，可供參考。

從Vue-cli開始

vue-cli是官方提供的一個命令行工具，能夠一鍵部署開發環境，這樣會省去不少麻煩。另外，經過vue-cli部署的環境能夠直接進入到單文件組件的學習，這對之後的學習可能會更有幫助。若是本身搭建環境，一個webpack的相關配置均可能把你的意志消磨殆盡（webpack我就踩過不少坑），我猜不少學習Vue或React的新手都是死在環境搭建的過程當中。初學者應該把注意力集中在Vue自己，等體會到其中的「樂趣」以後再回過頭來學習npm和webpack等相關知識可能會更好。

vue-cli使用以下，建議使用cnpm代替npm，具體可自行百度或Google。

# 全局安裝 vue-cli npm install -g vue-cli # 建立一個基於 Webpack 模板的項目 vue init webpack my-project # 安裝依賴 cd my-project npm install # 運行 npm run dev

直接進入到單文件組件開發

Vue能夠直接經過script標籤引入到HTML文件中，但我不建議這樣學習。由於這就違背了學習Vue的初衷，Vue是一個MVVM框架，其核心思想就是分組件開發，組件的複用，組件解耦。

Vue還可使用字符串模板以及Render渲染來開發組件，其弊端也很明顯。字符串模板不支持語法高亮，並且寫起來也不直觀。Render函數渲染相對比較複雜，並且也不直觀。最重要的是他們都沒法封裝CSS樣式，也沒法使用預處理器（Pug和Sass）。

單文件組件（.vue後綴名）很好的實現了組件的封裝，讓組件看起來更像組件。文件結構以下：

<template lang="html">
    <!-- 這裏是組件的 HTML 標籤 -->
</template>

<script>
export default {
    // 這裏是組件 js 代碼
}
</script>

<style lang="scss" scoped>
// 這裏是組件的 CSS 樣式
</style>

選擇一款合適的編輯器

我曾經無數次糾結過這個問題：究竟是使用Sublime，VS Code，仍是Atom？或是WebStorm？百度一下，人們對這些工具也是各執其詞，根本毫無可比性，一會兒更不知如何選擇了（選擇困難症，十分痛苦）。如今想一想其實也十分好笑，咱們徹底不必把時間花在這些無聊的事情上。這些編輯器我在Windows和MacOS中都嘗試過，最終仍是選擇了Sublime陣營。

簡單的說一下，選擇Sublime一個字快，兩個字穩定，三個字插件豐富（僞裝三個字）。Atom界面最好看，尤爲是在MacOS下；VS Code沒什麼心得，就是不喜歡；WebStorm至關於IDE，笨重但功能齊全，前端初學者神器（也是個人入門工具）。Atom我也是比較看好的，只是閒置在電腦中，暫時沒怎麼用。

若是你也跟我同樣糾結的話，那我建議你選擇Sublime，什麼也別想，就選它。記住它的一些快捷操做，和一些實用技巧，我相信你會慢慢愛上它的。

Sublime做爲前端編輯器，推薦幾個好用的插件：

• Emmet：前端必備神器；
• DocBlockr：統一文檔註釋的風格；
• Babel：支持ES6語法；
• Pug：Jade的新叫法，語法高亮；
• Sass：支持Sass語法高亮；
• Vue Syntax Highlight：Vue必備，語法高亮。

另外推薦一款我在用的主題：Theme - SoDaReloaded。

縱觀全局

我一直有一個觀點：就是看事物要先看全局，忽略那些繁瑣的細節，而後再逐個深究。好比看書要先看目錄（雖然我討厭看書），首先作到內心有數，知道本身在看什麼或有沒有必要再看下去(好比這篇文章)。

比較重要的幾個概念

我不是一個語言表達能力很好的人，不會扯那些概念，我只能儘量的說一些本身的理解。

這裏先說一句，Vue中的this通常都指向當前的Vue實例。也是就說，在哪一個組件中使用，this就指向哪一個組件。固然，這只是對於組件自己具備的屬性和方法而言。

Vue實例

經過Vue開發單頁面項目，一個項目就是一個Vue實例（暫且這麼理解吧），也就是經過new Vue()語句建立的對象。那麼既然有了一個實例，那麼要顯示出來，就得放入HTML文檔中，這就是掛載。對應語法：

new Vue({
    // el是實例掛載點，會將根組件替換掉原文檔中id爲 app 標籤
    el: '#app',
    // 經過render函數渲染
    render: h => {
        // 這裏App是根組件
        h(App)
    }
})

// 第二種寫法
new Vue({
    el: '#app',
    // 經過字符串模板
    template: '<App />',
    components: { App }
})

Vue擴展實例

嚴格來講，經過new Vue()方式建立的實例叫作根實例，而還有一種叫擴展實例。這裏引用官方的一句話：全部的 Vue.js 組件其實都是被擴展的 Vue 實例（其實我也是剛剛理解）。

擴展實例建立方式：

const MyComponent = Vue.extend({
    // 該對象就至關於 單文件組件中 export 導出的對象
    // 這就是爲何說 全部的Vue組件都是被擴展的Vue實例
})
// 建立擴展實例
const component = new MyComponent()

一樣的，Vue擴展實例也須要掛載，其語法與根實例掛載同樣：

// 會替換掉 HTML 文檔中 id 爲 app 的標籤
new MyComponent({el: '#app'})
// 可是這裏不建議這麼作，由於這樣會與實例掛載點衝突
// 這裏僅僅是爲了說明擴展實例與 根實例的類似之處

擴展實例一個重要的用法就是在須要的時候才被插入到HTML文檔中。好比點擊一個按鈕，彈出一個模態（modal）框。在個人Demo中，正是經過該方法實現一個加載等待的模態框。經過此方法有一個好處就是，能夠將該功能封裝成一個Vue插件，須要的時候經過一條指令就能夠將組件插入到文檔中，不須要預先將組件寫入到HTML文檔中。方法以下：

// 建立擴展實例
let component = new MyComponent()
// 掛載到虛擬DOM中
// 不傳遞參數，若傳遞參數會掛載到指定的地方
component  = component.$mount()
// 經過原生語法將 擴展實例添加到HTML文檔中
document.body.appendChild(component.$el)

一樣，Vue根實例也能夠經過該方式掛載到HTML中。

組件

組件就是擴展的Vue實例（哈哈）。反正記住在Vue中，一切可見的東西（但不限於可見的東西）都是組件，一個Vue實例就是由一大堆組件經過必定的組合和嵌套累積起來的。

學習組件無外乎就是它的建立和使用，經過擴展Vue實例也算是一種建立的方式，另外還有字符串模板和render函數渲染的方式。我一開始就建議直接使用單文件組件，具體請轉移官方文檔或從GitHub上Clone個人demo查看詳情。

生命週期

每一個組件都有本身的生命週期，從廣義上來講，Vue實例其實也是一個組件。通常經常使用的幾個生命週期鉤子：created，mounted，updated，destroyed。mounted基本上用的最多。

所謂的生命週期鉤子，就是說組件在特定的時刻會自動觸發該事件，執行對應的函數。

學習Vue的基本思想

程序員，其實大部分時間是用於思考的。創建一種思想，一種思惟方式很重要。這也是我如今一直在努力作的事。

學習一個框架，就要站在它的角度去思考問題。而Vue是一種MVVM模式的框架，因此有必要先理解什麼是MVVM？而後再去思考Vue的基本原理，它能作什麼？又是如何作到的？爲何要使用Vue？能夠去看一下官方文檔：Vue與其餘框架的對比。

什麼是MVVM

M就是Model（模型），V就是View（界面），MVVM也是就說經過模型的改變來更新界面，而後經過界面的一些行爲事件又來做用於模型。固然，這只是從字面上來解釋。要更好的體會到Vue的MVVM思想，我建議去學習Vuex。

以前，咱們使用jQuery或原生JS要想更改界面上的內容，首先必須找到對應的DOM節點，而後經過直接操做DOM的語句來改變界面上的內容。而MVVM的思惟方式就是：一個模型對應一個界面，界面的狀態和顯示的內容徹底取決於它對應的模型。而咱們只需改變模型，後臺（Vue）就會經過某種機制自動去更新界面。

什麼是MVC

順便談一下MVC設計模式，它實際上是出如今MVVM以前，其中的C是指Controller（控制器）。MVC的基本思想就是：模型與界面之間的通訊都是經過中間的控制器實現的。因此它的缺陷就是控制器層須要處理大量的業務邏輯代碼，不利於開發和維護。

Vue的基本原理

我沒有研究過Vue的源碼，也解釋不出來它是怎麼實現的？畢竟咱們是使用框架，經過它來提升開發效率，不必太過於深究，不然就失去了使用它的意義（大神請忽略之）。記住一句話：咱們是站在巨人的肩膀上開發的。若是什麼都要去深究其原理，那還不累死？

Vue的核心是組件，一切能夠看見的東西都是由組件構成。而後經過把不一樣的組件組合和嵌套在一塊兒，最終組成了一個根組件，也就是App。根組件會掛載到Vue的根實例中，而Vue根實例自己也相對於一個組件，而後又掛載到真實的HTML文檔中。對應的語句也就是main.js文件中的語句。

new Vue({
    // 該屬性會 將Vue實例掛載到 真實的HTML中
    el: '#app',
    // App 就是根組件，被掛載到Vue實例中
    render: h => h(App)
})