VUE的使用

時間 2019-12-11

標籤 vue 使用简体版

原文原文鏈接

1、VUE介紹

2、VUE的指令系統

3、計算屬性和幀聽器

4、表單輸入綁定

1、VUE介紹

1.在前端框架技術中有三大框架：Angularjs：谷歌公司生產 React：Facebook公司 Vue:尤雨溪（中國）

2.vue的介紹

vue官網說：Vue.js（讀音 /vjuː/，相似於 view）是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。

3.vuejs的優勢

1.易用。已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始構建應用！

2.靈活。不斷繁榮的生態系統，能夠在一個庫和一套完整框架之間自如伸縮。

3.高效。20kB min+gzip 運行大小、超快虛擬 DOM、最省心的優化

虛擬的DOM的核心思想是：對複雜的文檔DOM結構，提供一種方便的工具，進行最小化地DOM操做。這句話，也許過於抽象，卻基本概況了虛擬DOM的設計思想

(1) 提供一種方便的工具，使得開發效率獲得保證(2) 保證最小化的DOM操做，使得執行效率獲得保證

虛擬dom的渲染速度要比咱們真實的dom渲染速度快

2、VUE的指令系統

1.導入vue.js

     <script src=" 
    https://cdn.bootcss.com/vue/2.5.17/vue.js"></script> 
   

2.建立實例對象

     <div class="app">{{msg}}</div> 
   

     var app = new Vue({ 
   
         el:'.app', 
   
         data:{ 
   
             msg:'hello, world!' 
   
         } 
   
     })

下面開始介紹用法：

{{ msg }} 兩個花括號之間能夠傳入一個變量；
{{1==1?'yes':'no'}} 插入判斷

指令系統：

一、v-if

     <div v-if = 'show'>顯示</div> 
   
     <div v-else-if = 'no'>不肯定</div> 
   
     <div v-else>隱藏</div> 
   
     show:true,

二、v-show

v-if 和 v-show的區別在於v-if是真正的銷燬節點，而v-show只是隱藏了節點。（display：none）

     <p v-show='is_show'>顯示</p> 
   
     is_show:false

通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

class與style綁定：

一、v-bind

     <p v-bind:title='time'>{{time}}</p> 
   
     time: `如今時間${new Date().toLocaleString()}`,

     .col1 {color: red;} 
   
     <div v-bind:class='{col1:is_red}'>11111</div> 
   
     is_red: true,

二、v-on

     .col1 {color: red;} 
   
     <div v-bind:class='{col1:is_red}'>11111</div> 
   
     <button v-on:click='clicker'>click me</button> 
   
     var app = new Vue({ 
   
         el:'.app', 
   
         data:{ 
   
             msg:'hello, world!', 
   
             is_red: true, 
   
         }, 
   
         methods:{ 
   
             clicker(){ 
   
                 this.is_red = !this.is_red; 
   
             } 
   
         } 
   
     })

三、三元表達式

     <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> 
   

爲了簡便，能夠這樣寫

     <div v-bind:class="[{ active: isActive }, errorClass]"></div> 
   

事件處理：

能夠用v-on來監聽DOM事件，並在觸發時運行一些js代碼

     <button v-on:click='counter+=1'>{{counter}}</button> 
   
     counter: 0,

4.爲何在HTML中監聽事件？

你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但沒必要擔憂，由於全部的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會致使任何維護上的困難。實際上，使用 v-on 有幾個好處：

1. 掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。

2. 由於你無須在 JavaScript 裏手動綁定事件，你的 ViewModel 代碼能夠是很是純粹的邏輯，和 DOM 徹底解耦，更易於測試。

3. 當一個 ViewModel 被銷燬時，全部的事件處理器都會自動被刪除。你無須擔憂如何本身清理它們。

在這裏多補充一點：v-bind能夠簡寫爲：、v-on: 能夠簡寫@

3、計算屬性和幀聽器

1.計算屬性

模板內的表達式很是便利，可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。例如：

     <div> 
   
         {{ message.split('').reverse().join('') }} 
   
     </div>

在這個地方，模板再也不是簡單的聲明式邏輯。你必須看一段時間才能意識到，這裏是想要顯示變量 message 的翻轉字符串。當你想要在模板中屢次引用此處的翻轉字符串時，就會更加難以處理。

因此，對於任何複雜邏輯，你都應當使用計算屬性。

     <div id = 'com'> 
   
             <h3>{{msg}}</h3> 
   
             <p>{{currentMsg}}</p> 
   
             <button @click='clickHandler'>更改</button></div> 
   
         var com = new Vue({ 
   
                 el:'#com', 
   
                 data:{ 
   
                     msg:'學習computed' 
   
                 }, 
   
                 methods:{ 
   
                     clickHandler(){ 
   
                         this.msg = '我更改了數據' 
   
                     } 
   
                 }, 
   
                 computed:{ 
   
                     currentMsg(){ 
   
                         // computed方法中默認只有getter 
   
                         return this.msg 
   
                      } 
   
                 } 
   
             })

當我點擊按鈕的時候更改了當前的數據，同時h3和p標籤中數據也隨時改變。

2.爲何會這樣呢？

由於Vue知道com.currentMsg依賴與com.msg,所以當com.msg發生改變時，全部依賴com.currentMsg的綁定也會更新。並且最妙的是咱們已經以聲明的方式建立了這種依賴關係。：計算屬性的getter函數是沒有反作用的，這使它更易於測試和理解。

一樣的上面操做，咱們不用computed聲明的計算屬性方法，而僅僅經過methods中聲明的方法也能完成上面的效果，那麼爲何又要使用computed方法呢？

由於計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要msg尚未發生變化，屢次訪問currentMsg計算屬性會馬上返回以前計算的結果，而不比再次執行函數。一樣的。每當觸發從新渲染時，調用方法將總會執行函數。

咱們爲何須要緩存？假設咱們有一個性能開銷比較大的的計算屬性 A，它須要遍歷一個巨大的數組並作大量的計算。而後咱們可能有其餘的計算屬性依賴於 A 。若是沒有緩存，咱們將不可避免的屢次執行 A 的 getter！若是你不但願有緩存，請用方法來替代。

3.計算屬性的getter

計算屬性默認只有getter，不過在須要時你也能夠提供一個setter。

        var com = new Vue({ 
    
                  el:'#com', 
    
                  data:{ 
    
                      msg:'學習computed' 
    
                  }, 
    
                  methods:{ 
    
                      clickHandler(){ 
    
                          this.currentMsg = '我更改了數據' 
    
                      } 
    
                  }, 
    
                  computed:{ 
    
                      currentMsg:{ 
    
                         set : function(newValue){ 
    
                            this.msg = newValue; 
    
                         }, 
    
                         get : function(){ 
    
                           return this.msg; 
    
                         } 
    
                       } 
    
                  } 
    
              })

當點擊按鈕的時候，會觸發computed中的setter方法，從而將newValue的值，賦值給msg。由於計算屬性方法的getter方法由於跟msg有依賴關係，從而會相應的發生改變。

4、表單輸入綁定

vue的核心：聲明式的指令和數據的雙向綁定。

1.那什麼是數據的雙向綁定?

另外，你們必定要知道vue的設計模式：MVVM

M是Model的簡寫，V是View的簡寫，VM就是ViewModel。

單向綁定和雙向綁定的區別？

單向綁定很是簡單，就是把Model綁定到View，當咱們用JavaScript代碼更新Model時，View就會自動更新。

有單向綁定，就有雙向綁定。

若是用戶更新了View，Model的數據也自動被更新了，這種狀況就是雙向綁定。

什麼狀況下用戶能夠更新View呢？填寫表單就是一個最直接的例子。當用戶填寫表單時，View的狀態就被更新了，若是此時MVVM框架能夠自動更新Model的狀態，那就至關於咱們把Model和View作了雙向綁定。

其實單項數據也有雙向綁定的意思，不過頁面變更後數據的變化不會發生自動更新。

咱們能夠這樣認爲：雙向數據綁定=單向數據綁定+UI事件監聽。

咱們先看個vue中雙向數據綁定的例子：

     <body> 
   
       <div id="app"> 
   
         <input type="text" v-model="meg"> 
   
         <p>{{data}}</p> 
   
       </div> 
   
       <script> 
   
         var app = new Vue({ 
   
           el:'#app', 
   
           data :{ 
   
             meg:'' 
   
           } 
   
         }) 
   
       </script></body>

再簡單不過了，效果顯示，當咱們在input輸入框中輸入內容的時候，下面p標籤同步顯示內容。這就是最典型的雙向數據綁定的例子。vue裏使用v-model實現此想法。

那麼咱們看一下v-model的實現原理是怎樣的呢？

經過官網的介紹，咱們知道v-mode指令是v-bind:vlaue 和v-on:input的結合體。

2.看個例子吧，同時給你們介紹了計算屬性getter的用法。

     <!-- <input type="text" v-model = 'usernameValue'> --> 
   
             <!-- 等價於： --> 
   
             <input type="text" v-bind:value='usernameValue' @input='inputHandler'> 
   
             <button @click='commitHandler'>提交</button> 
   
             <!-- ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例 --> 
   
             <div class="list" ref = 'item'></div> 
   
              var set = new Vue({ 
   
                 el:'#set', 
   
                 data:{ 
   
                     username:'', 
   
                     txt:'' 
   
                 }, 
   
                 methods:{ 
   
                     commitHandler(){ 
   
                         this.$refs.item.innerHTML = this.usernameValue; 
   
                     }, 
   
                     inputHandler(e){ 
   
                         this.usernameValue = e.target.value; 
   
                     } 
   
                 }, 
   
                 computed:{ 
   
                     usernameValue:{ 
   
                         get(){ 
   
                             return this.username; 
   
                         }, 
   
                         set(newValue){ 
   
                             this.username = newValue; 
   
                         } 
   
                     } 
   
                 }