摘要：如果我們作為一個后端開發者想掌握一個前端框架，是一個好選擇，因為它足夠的易學。是語言的下一代標準。數據方法生命周期鉤子函數其他有些內容比較重要，留到后面講定義數據定義數據定義了數據，那么就可以在管理的區域中使用的獲取數據的語法來獲取數據。

目錄

• 前言：
  • iview組件庫示例
  • element組件庫示例
• Vue的介紹
  • 兼容性：
  • 學習Vue需要的前置知識：
  • MVVM模型
  • 補充:
• 安裝/導入
  • 導入Vue
  • 安裝
  • 兩種方式的區別：
• HelloWorld示例
  • 代碼分析：
  • 代碼效果：
• 實例中可以定義的內容
  • 定義數據
  • 定義方法methods
  • 生命周期與生命周期鉤子函數
  • 補充：
• 渲染
  • 插入文本
    • v-text
    • v-html
  • 用v-bind綁定屬性：
    • v-bind的簡寫
    • 把對象的所有屬性綁定到元素：
  • 條件渲染
  • 循環
• 計算屬性
  • 與函數的區別
  • 與偵聽屬性的區別
  • 計算屬性的setter
• 偵聽器

首發日期：2019-01-19

前言：

有時候，一個后端開發者“不得不”自己去搭建前端界面。如果有的選，當然選一個比較好學的前端“框架”咯（框架很多時候封裝了普通的html元素，使得能更加方便地使用）。
如果你做的項目的界面是一個偏后臺管理的而且要求并不高的界面的時候，你可以考慮easy UI這個較為知名的前端框架。
如果你想要界面變得好看一些（easy UI的界面太簡單了，缺乏較強的定制性），那么你可以考慮vue這個框架。vue這個框架本身并沒有多少好看的樣式，但學習了這個框架就可以學會怎么使用它的第三方組件庫了（這些第三庫看起來都還行）。

iview組件庫示例

element組件庫示例

【Vue自己有官方教程，為什么寫這個呢？主要是感覺自己的前端知識不太穩固，看教程的時候有點迷糊。推己及人，所以有了這個博文】

Vue的介紹

• 官網：https://cn.vuejs.org/
• [官方的話]：Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
• 小菜鳥前端：Vue是一個簡單容易上手前端框架，在網上有很多基于vue的web UI框架（element等），由于有大量類似于easyUI這些快速搭建頁面的框架，所以我們可以使用vue來快速搭建頁面。如果我們作為一個后端開發者想掌握一個前端框架，vue是一個好選擇，因為它足夠的易學。

例如下面的代碼可以快速構建一個表格：

兼容性：

Vue不支持IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。【所以如果項目兼容性要求較高，那么不適合使用Vue】

學習Vue需要的前置知識：

• html+ js 【基礎的內容，前端的基礎，不了解不行。但只要你能看得懂基本的html和js代碼即可，不了解的可以查。】
• es6 【 ECMAScript 6(ES6)是JavaScript語言的下一代標準。但不需要了解太多，Vue里面有些語法是ES6的，但我們可以看著例子了解有哪些常見的語法即可】
• webpack 【不需要了解太多，是一個項目構建工具，會涉及一些Vue項目的運行知識。】
• npm 【vue入門不需要了解太多，可能只需要了解npm的幾個命令】

MVVM模型

• MVVM是Model-View-ViewModel的簡寫。
• MVVM（Model-View-ViewModel）的基礎是MVP模式，【MVP類似于MVC，后端開發者應該對MVC比較熟悉了】
  
  【常見的MVP前端開發有幾個步驟：1.創建頁面元素，2.在script中給元素綁定事件，3.在script中處理事件（這個事件可能會影響頁面的元素的顯示或返回數據）】
  【上面的幾個步驟可以說是內容（頁面元素）行為（js操作）分離了】
  【為什么要有MVVM呢？主要是MVP模式有太多的dom操作了（大量的DOM 操作使頁面渲染性能降低，加載速度變慢）。MVVM解決了這個問題，并且提供了一些其他的好處。】
  

【如果你了解ORM模型，你應該很能體會到MVVM模型的好處，有了VM層幫我們管理了數據，我們就只需要處理好Model層了，這就好像ORM中定義了數據映射關系，然后我們只需要操作實體類。】

補充:

• Vue的核心特點是簡單易用，所以它相對適合非專業前端的學習。它需要一些前置的前端知識，而且它自己的知識也是需要時間來學習的，如果與easy UI相比，easy UI的學習速度會更快，但vue更能構建比較優美的頁面。

安裝/導入

【要想使用Vue，必須先導入/安裝，就像使用jquery必須導入jquery.js一樣；而vue可以使用webpack來構建，所以也可以使用webpack安裝Vue，但如果你是初學者，先掌握靜態導入的方法吧】

導入Vue

Vue的本質也是javascript,所以它也可以通過導入js文件來使用功能（js可以用cdn的，也可以手動導入本地的vue.js）。
這種也是最簡單的使用vue的方式，所以我們可以這種方式來作為入門學習，但正式使用時都會使用webpack來構建vue項目。

在html文件中使用如下代碼：【這里先講導入，后面講使用】

安裝

• 安裝vue:npm install vue
• 全局安裝vue-cli: npm install --global vue-cli
• 創建一個基于 webpack 模板的新項目:vue init webpack 項目名

兩種方式的區別：

• 對于普通的靜態js導入，在面對多個組件共同開發的時候，會比較不方便。【如果你是后端開發者，你應該知道把多個類寫在一個文件中是多么地不方便，這也是一樣的】
• js:
  • 簡單，不需要安裝，直接導入js即可。
• npm
  • 在用 Vue 構建大型應用時推薦使用 NPM 安裝
  • NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。
  • 同時 Vue 也提供配套工具來開發單文件組件。

在入門部分將使用js導入方式的例子，在涉及構建多個組件的時候（頁面需要多個組件時，如果把多個組件定義在一個文件中會顯得贅余。這好比把多個類放到同一個文件中定義。）將使用npm安裝方式演示。

HelloWorld示例

    
        
        
    

    
        
        

            {{ message }}
        
    
    
    
    

代碼分析：

1. 導入了js:
2. 定義一個元素，給它id起名app。[名字是可以隨意的，但在下面的new Vue創建實例時，el參數必須是這個id名]
3. 新建一個vue實例，屬性el代表把對應元素區域交給vue管理（el: #app代表把id為app的區域交給vue管理）。那么對應元素區域里面就可以使用vue的語法了。
4. data屬性：data里面可以定義一系列變量，可用于這個實例掌控的區域。
5. {{ message }} : vue語法的內容，代表獲取變量名為message的數據，并顯示出來。

代碼效果：

導入了js之后，vue把管理的區域里面的vue語法都解析了，所以 {{ message }}就取出了vue實例中名叫message的數據。




現在我們了解了一些vue的渲染頁面的知識，下面我們來了解更多的渲染技巧。

實例中可以定義的內容

每個 Vue 應用都是通過使用 Vue 函數創建一個新的 Vue 實例開始的。
實例中的定義的內容就是我們可以使用在Vue應用中的內容。
下面講實例中可以定義哪些內容。

• 數據
• 方法
• 生命周期鉤子函數
• 其他（有些內容比較重要，留到后面講）

定義數據

• 定義了數據，那么就可以在Vue管理的區域中使用Vue的獲取數據的語法來獲取數據。
• 這種操作就像是我們把數據裝到實例中，實例再把數據傳給視圖組件。
• 任何你想顯示到頁面的數據你都可以考慮定義在實例中。

       var app = new Vue({
                  el: '#app',
                  data: {
                    message: 'Hello Vue!'
                  }
                })
        //

        //    {{ message }}
        //

定義方法methods

• 在js中，方法是很重要的，Vue實例中可以定義方法。【為什么要有方法這個就不解釋了吧？】

    
        

            
            
            按鈕
        
    
    
    

生命周期與生命周期鉤子函數

【要結合圖來看（懂英文是多么地好）】

• beforeCreate：在創建了vue示例時，在進行了一部分基礎的初始化之后就會自動執行beforeCreate函數
• created：創建完示例后，會自動執行created函數
• beforeMounted：渲染完模板后（可以說是vue知道區域內是一個怎么的html環境，但還沒把數據顯示到這個環境中的時候），會自動執行這個函數
• mouted：模板與數據結合之后自動執行這個函數。【此時頁面已經渲染完畢】
• beforeUpdated：數據發生變化后，新數據被渲染前會自動執行這個函數。
• updated：新數據被渲染成功會自動執行這個函數。
• beforeDestory：當實例被destory時會自動執行這個函數。
• destory：當實例被完全銷毀是自動執行這個函數。

【如果你對生命周期鉤子感興趣，可以自查，這里不多講，后面之后根據開發需求來講一些】

測試代碼：

    
        
        
    

    
        

            點擊觸發beforeUpdate,updated
            點擊觸發beforeDestory,destoryed
            
{{ msg }}
        
    
    
    

補充：

• 實例中其實還可以定義別的內容（如計算屬性，監聽器等）。但主要內容是上面這些，暫時了解這些就夠了。
• 創建了實例，就可以在控制臺中使用實例名來獲取數據了，比如上面定義了實例app,那么app.message就可以獲取定義在data中名為message的數據，app.myFunction()就可以調用定義在methods中名為myFunction的函數。【所以后面的例子中的一些數據更改都是使用控制臺來更改實例中的數據】

渲染

插入文本

在上面已經演示了使用Mustache表達式(可以俗稱插值表達式){{ }}來獲取實例中的數據了，其實還可以使用其他方式來輸出數據

v-text

v-text可以向元素中輸出文本內容

v-html

v-html可以向元素中輸出html內容：

Mustache 語法不能作用在 HTML 特性上，也就是說在html元素中沒有 id="{{ id }}" 這樣的操作 ，這種時候需要使用vue語法：v-bind:id="id"
{{ }}里面可以使用javascript表達式，例如：{{ message.split().reverse().join() }}

用v-bind綁定屬性：

v-bind用于給元素的屬性綁定值

• 綁定標題：v-bind:title

        

              懸浮幾秒，查看標題
        
        

• 給a元素綁定href ： v-bind:href=xxx
• 給元素綁定id ： v-bind:id=xxx
  【理論上，可以使用v-bind給元素的任意屬性綁定值】

v-bind的簡寫

...


...

把對象的所有屬性綁定到元素：

v-bind的參數可以是一個對象，是一個對象時，會把對象的所有屬性都綁定到元素上。具體如下圖。

條件渲染

• v-if可以判斷是否渲染一個元素，如果不渲染，這個元素將不會產生（不是隱藏！可以理解為這個元素被delete了。）

        

             
現在你看到我了
             
        
        

• 除了v-if,還有v-else和v-else-if，v-else不可以再帶條件判斷，v-else-if可以帶條件判斷。

        

            
男
            
女
            
unknown
        
        

使用v-else 的元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。

• v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。

        

            
Hello!
        
        

循環

• v-for可以循環渲染出若干個元素。
• v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組，而 item 是數組元素迭代的別名。

        

            

                
                

                  {{ todo.text }}
                
            
        
                

代碼效果：

在 v-for 塊中，我們擁有對父作用域屬性的完全訪問權限。[這是來自官網的話，我覺得有點多余，感覺子元素獲取父元素的數據是很正常的操作。]

v-for 還支持一個可選的第二個參數為當前項的索引，它會從0開始。用來標識當前迭代的是第幾個元素。

可以用 of 替代 in 作為分隔符，因為它是最接近 JavaScript 迭代器的語法：

也可以用 v-for 迭代一個對象的所有屬性，第一個參數是value，第二個可選參數是key，第三個可選參數為索引

第二個參數為key

  {{ key }}: {{ value }}

第三個參數為索引：

  {{ index }}. {{ key }}: {{ value }}

使用三個參數時的代碼效果:

在遍歷對象時，是按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下是一致的。
v-for 也可以取一個整數作為源數據（v-for="i in 10"）。在這種情況下，它將重復多次模板。
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。【這個問題官網提了一下，這里我也提一下，注意使用】

計算屬性

• 當某個數據需要另外一個數據計算得到的時候，你可能會定義兩個數據,其中一個數據初始值由另一個數據計算得出。但上面的值只能初始化一次，如果希望數據A變的時候，數據B也變，那么你可能需要去監聽數據的變化，從而每次數據變化時再做操作。
• 計算屬性簡化了這樣的情況，它的返回值是一個計算得到的數據，當內部的計算元素發生變化的時候，返回值也會變化。
• 計算屬性使用computed來定義。

        

            
原消息: "{{ message }}"
            
逆反后: "{{ reversedMessage }}"
        
        

與函數的區別

下面的代碼也可以達到上面的效果
（也是即時的，有人不懂為什么這個函數會重復調用，而非頁面初始化時調用一次；因為當頁面中數據更新的時候，涉及頁面數據的函數也會重新執行。）

        

            
原消息: "{{ message }}"
            
逆反后: "{{ reversedMessage() }}"
            
{{ Date.now() }}"
            
        
        

函數也可以達到同樣的效果，但是函數沒有緩存效果，而計算屬性有緩存。沒有緩存時，函數每一次都要重新計算來得到結果，如果這是一個比較消耗資源的計算的話，那么會減慢頁面的速度；而計算屬性有緩存，只要內部的計算元素沒有發生變化，那么會使用緩存來作為計算結果。

與偵聽屬性的區別

上面的計算屬性達到效果需要留意計算元素的變化，你可能會想到一些類似的監聽數據變化的方法，而vue中也是有這樣的東西的。
下面的代碼監聽了firstName和lastName，當這兩個數據變化的時候會重新給fullName賦值。

        

            
{{ fullName }}
        
        

使用計算屬性達到上面效果（顯然省了不少代碼）：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

計算屬性的setter

• 上面的fullName例子中，當firstName和lastName更改的時候，fullName會更改。
• 但有沒有可能要求fullName更改的時候，firstName和lastName會對應更改呢？
• 上面的獲取變化后的fullName是getter，其實還可以設置setter

        

            
{{ fullName }}
        
        

偵聽器

雖然計算屬性已經提供了很多的好處，但有些時候計算屬性也不能滿足我們的要求。比如我們希望監聽某個屬性的變化來得到另一個屬性的結果，但是不希望它馬上得到結果，那么這時候計算屬性就達不到需求了。而監聽器里面可以寫一些其他代碼（比如一些延遲去得到結果的代碼）。
當需要在數據變化時執行異步或開銷較大的操作時，watch是最有用的。
為什么有時候不希望計算新結果那么快呢？這就好比有人在百度搜索中輸入一個個字，如果每個字都要進行檢索的話，那么就對百度來說開銷就很大了，如果稍微等等，確認用戶輸入完畢再去計算，那么就節省了很多資源了，下面的來自官網的例子正是一種這樣的考慮了資源開銷的例子。

    
        
        
    

    
        

            

              Ask a yes/no question:
              
            
            
{{ answer }}