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

目錄

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

首發(fā)日期：2019-01-19

前言：

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

iview組件庫示例

element組件庫示例

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

Vue的介紹

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

例如下面的代碼可以快速構(gòu)建一個表格：

兼容性：

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

學(xué)習(xí)Vue需要的前置知識：

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

MVVM模型

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

【如果你了解ORM模型，你應(yīng)該很能體會到MVVM模型的好處，有了VM層幫我們管理了數(shù)據(jù)，我們就只需要處理好Model層了，這就好像ORM中定義了數(shù)據(jù)映射關(guān)系，然后我們只需要操作實體類?！?/p>

補充:

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

安裝/導(dǎo)入

【要想使用Vue，必須先導(dǎo)入/安裝，就像使用jquery必須導(dǎo)入jquery.js一樣；而vue可以使用webpack來構(gòu)建，所以也可以使用webpack安裝Vue，但如果你是初學(xué)者，先掌握靜態(tài)導(dǎo)入的方法吧】

導(dǎo)入Vue

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

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

安裝

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

兩種方式的區(qū)別：

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

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

HelloWorld示例

    
        
        
    

    
        
        

            {{ message }}
        
    
    
    
    

代碼分析：

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

代碼效果：

導(dǎo)入了js之后，vue把管理的區(qū)域里面的vue語法都解析了，所以 {{ message }}就取出了vue實例中名叫message的數(shù)據(jù)。




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

實例中可以定義的內(nèi)容

每個 Vue 應(yīng)用都是通過使用 Vue 函數(shù)創(chuàng)建一個新的 Vue 實例開始的。
實例中的定義的內(nèi)容就是我們可以使用在Vue應(yīng)用中的內(nèi)容。
下面講實例中可以定義哪些內(nèi)容。

• 數(shù)據(jù)
• 方法
• 生命周期鉤子函數(shù)
• 其他（有些內(nèi)容比較重要，留到后面講）

定義數(shù)據(jù)

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

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

        //    {{ message }}
        //

定義方法methods

• 在js中，方法是很重要的，Vue實例中可以定義方法?！緸槭裁匆蟹椒ㄟ@個就不解釋了吧？】

    
        

            
            
            按鈕
        
    
    
    

生命周期與生命周期鉤子函數(shù)

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

• beforeCreate：在創(chuàng)建了vue示例時，在進行了一部分基礎(chǔ)的初始化之后就會自動執(zhí)行beforeCreate函數(shù)
• created：創(chuàng)建完示例后，會自動執(zhí)行created函數(shù)
• beforeMounted：渲染完模板后（可以說是vue知道區(qū)域內(nèi)是一個怎么的html環(huán)境，但還沒把數(shù)據(jù)顯示到這個環(huán)境中的時候），會自動執(zhí)行這個函數(shù)
• mouted：模板與數(shù)據(jù)結(jié)合之后自動執(zhí)行這個函數(shù)。【此時頁面已經(jīng)渲染完畢】
• beforeUpdated：數(shù)據(jù)發(fā)生變化后，新數(shù)據(jù)被渲染前會自動執(zhí)行這個函數(shù)。
• updated：新數(shù)據(jù)被渲染成功會自動執(zhí)行這個函數(shù)。
• beforeDestory：當(dāng)實例被destory時會自動執(zhí)行這個函數(shù)。
• destory：當(dāng)實例被完全銷毀是自動執(zhí)行這個函數(shù)。

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

測試代碼：

    
        
        
    

    
        

            點擊觸發(fā)beforeUpdate,updated
            點擊觸發(fā)beforeDestory,destoryed
            
{{ msg }}
        
    
    
    

補充：

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

渲染

插入文本

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

v-text

v-text可以向元素中輸出文本內(nèi)容

v-html

v-html可以向元素中輸出html內(nèi)容：

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

用v-bind綁定屬性：

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

• 綁定標(biāo)題：v-bind:title

        

              懸浮幾秒，查看標(biāo)題
        
        

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

v-bind的簡寫

...


...

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

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

條件渲染

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

        

             
現(xiàn)在你看到我了
             
        
        

• 除了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!
        
        

循環(huán)

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

        

            

                
                

                  {{ todo.text }}
                
            
        
                

代碼效果：

在 v-for 塊中，我們擁有對父作用域?qū)傩缘耐耆L問權(quán)限。[這是來自官網(wǎng)的話，我覺得有點多余，感覺子元素獲取父元素的數(shù)據(jù)是很正常的操作。]

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

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

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

第二個參數(shù)為key

  {{ key }}: {{ value }}

第三個參數(shù)為索引：

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

使用三個參數(shù)時的代碼效果:

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

計算屬性

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

        

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

與函數(shù)的區(qū)別

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

        

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

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

與偵聽屬性的區(qū)別

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

        

            
{{ fullName }}
        
        

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

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

計算屬性的setter

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

        

            
{{ fullName }}
        
        

偵聽器

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

    
        
        
    

    
        

            

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