Vue資料-簡介-旋之華

前言

 

 一個框架的快速成長源於它有個強大的、活躍度很高的社區。

 

 

 

 1、Vue簡介

 

      Vue.js 是一個用於建立 Web 交互界面的庫。它讓你經過簡單而靈活的 API 建立由數據驅動的 UI 組件。

 

       Vue.js是一款輕量級的、以數據驅動構建web界面的前端JS框架，它在架構設計上採用了MVVM（Model-View-ViewModel）模式，其中ViewModel是Vue.js的核心，它是一個Vue的實例，而這個實例又做用域頁面上的某個HTML元素。

  

       其核心在於經過數據驅動界面的更新和展現而非JS中經過操做DOM來改變頁面的顯示。

    

  

 

  

  

       上圖的DOM Listeners和Data Bindings是數據驅動中實現數據雙向綁定的關鍵，實際的 DOM 封裝和輸出格式都被抽象爲了 Directives 和 Filters; 這也是Vue.js事件驅動的原理所在。

  

        對於View而言，ViewModel中的DOM Listeners工具會幫助咱們監聽頁面上DOM元素的變化，一旦有變化，Model中的數據也會發生改變；

  

       對於Model而言，當咱們操縱Model中的數據時，Data Bindings工具會幫助咱們更改View中的DOM元素。

  

  

       此外，頁面組件化也是Vue.js的核心，它提供了一種抽象，讓咱們能夠用獨立可服用的小組件來構建大型應用。

    

 

  

       因此，咱們搭建的任何一個界面你能夠把其抽象成爲一個組件樹，充分的去複用它。

 

 

思考： Vue.js和React、Angularjs、Knockout、AvalonJS的區別在哪？

 

Knockout：微軟出品，能夠說是MVVM的模型領域內的先驅，使用函數偷龍轉鳳，最短編輯長度算法實現DOM的同步，兼容IE6，實現高超，但源碼極其難讀，最近幾年發展緩慢。

 

Vue：是最近幾年出來的一個開源Javascript框架，語法精簡，實現精緻，但對瀏覽器的支持受限，最低只能支持IE9。

 

 AvalonJS：是一個簡單易用迷你的MVVM框架，由大神司徒正美研發。使用簡單，實現明快。

 

React：React並不屬於MVVM架構，可是它帶來virtual dom的革命性概念，受限於視圖的規模。

 

Angularjs：Google出品，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。入門容易上手難，大量避不開的概念也是很頭疼的。

  

 

2、Vue快速入門   

 

2.1  Hello，拇指哥

 

代碼以下：

 

 

        在上面代碼中，咱們經過new Vue()構建了一個Vue的實例。

        

        在實例化 Vue 時，須要傳入一個選項對象，它能夠包含數據、模板、掛載元素、方法、生命週期鉤子等選項。好比：掛載元素（el）和數據（data），咱們能夠操縱數據改變視圖。

  

       el表示Vue要操做哪個元素下面的區域，好比：#app則表示操做id爲app的元素下面的區域；

  

       data表示Vue實例的數據對象，data的屬性可以響應數據的變化；每一個 Vue 實例都會代理其 data 對象裏全部的屬性。

  

        咱們打開瀏覽器的控制檯輸入 app.message = '你們好，我是旋之華！'，你會發現對應的HTML已經發生了改變，以下圖所示：

 

  

        用 MVVM 的角度，來重新看待這個問題，咱們會發現: Model就是data變量，ViewModel就是這裏的new Vue()獲得的對象。 

 

 

2.2  Vue中雙向數據綁定

 

        MVVM模式其自身是實現了數據的雙向綁定的，在Vue.js中咱們能夠經過指令v-model來實現數據雙向綁定。

 

 代碼以下：

 

 

 運行結果：

  

  

        新東西v-model，在Vue中這被稱爲指令，指令帶有前綴v-表示它們是Vue.js提供的特殊屬性。它們會在渲染過的DOM上應用特殊的響應式行爲。固然，咱們就把這指令當作是特殊的HTML特性(attribute)。

  

 3、Vue中經常使用的指令(Directives)

 

        帶特殊前綴的 HTML 特性，可讓 Vue.js 對一個 DOM 元素作各類處理。好比：<div v-text="message"></div>；這裏的 div 元素有一個 v-text 指令，其值爲 message；Vue.js 會讓該 div 的文本內容與 Vue 實例中的 message 屬性值保持一致。

 

        Directives 能夠封裝任何 DOM 操做。好比 v-attr 會操做一個元素的特性；v-repeat 會基於數組來複制一個元素；v-on會綁定事件等。

 

        Vue.js提供了很多經常使用的內置指令，接下來咱們快速搞定它們，這對咱們接下來的開發幫助很大。主要有：

 

v-once指令

v-if指令

v-show指令

v-else指令

v-for指令

v-on指令

v-bind指令

 

        若是須要了解其它指令，能夠進入官網: https://vuefe.cn/v2/api/#%E6%8C%87%E4%BB%A4

 

 

3.1  v-once指令

 

執行一次性地插值，當數據改變時，插值處的內容不會更新。

 

   

  

3.2  v-if指令

 

       條件渲染指令，根據表達式的真假來添加或刪除元素。其語法結構是：v-if="expression"，其中expression是一個返回bool值的表達式，其結果能夠是true或false，也能夠是返回true或false的表達式。

 

 代碼以下：

 

    

咱們也能夠打開控制檯，作出以下輸入，進一步體會數據驅動思想：

        

在上述案例中，Vue.js進行數據綁定也徹底支持JavaScript表達式支持，這些表達式會在Vue實例的數據做用域下做爲JavaScript被解析。

   

    {{ number + 1 }}

    {{ ok ? 'YES' : 'NO' }}

    {{ message.split('').reverse().join('') }}

    <div v-bind:id="'list-' + id"></div>

   

       有個限制就是，每一個綁定都只能包含單個表達式，如下則不會生效：

 

   <!-- 這是語句，不是表達式 -->

   {{ var a = 1 }}

   <!-- 流控制也不會生效，請使用三元表達式 -->

   {{ if (ok) { return message } }}

  

 

3.3  v-show指令

     

       也是條件渲染指令，不一樣的是有 v-show 的元素會始終渲染並保持在 DOM 中。和v-if指令不一樣點在於：v-show是根據表達式之真假值，切換元素的 display CSS 屬性，當條件變化時該指令觸發過渡效果。

 

代碼以下：

 

  

 元素渲染狀況：

   

   

v-show和v-if的區別：

 

       v-if 是真實的條件渲染，由於它會確保條件塊在切換當中適當地銷燬與重建條件塊內的事件監聽器和子組件； v-show 則只是簡單地基於 CSS 切換。

 

      v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。所以，若是須要頻繁切換使用 v-show 較好，若是在運行時條件不大可能改變則使用 v-if 較好。

  

  

3.4  v-else指令

 

       能夠用v-else指令爲v-if或v-show添加一個「else塊」。注意：v-else前一兄弟元素必須有 v-if 或 v-else-if。

 

代碼以下：

 

  （1）v-if和v-else結合

   

 

（2）v-else-if 和 v-else 結合

 

   

   

3.5  v-for指令

 

       基於數據渲染一個列表，相似於JS中的遍歷。其數據類型能夠是 Array | Object | number | string。

  

       該指令之值，必須使用特定的語法(item, index) in items,  爲當前遍歷元素提供別名。 v-for的優先級別高於v-if之類的其餘指令

  

代碼以下：

 

    

運行結果以下：

   

   

另外v-for也能夠爲數組索引指定別名（或者用於對象的鍵）：

 

<div v-for="(item, index) in items"></div>

<div v-for="(val, key) in object"></div>

<div v-for="(val, key, index) in object"></div>

 

 

       v-for 默認行爲試着不改變總體，而是替換元素。迫使其從新排序的元素,您須要提供一個 key 的特殊屬性:

   

   <div v-for="item in items" :key="item.id">

    {{ item.text }}

   </div>

 

 

3.6   v-bind指令

 

 動態地綁定一個或多個特性，或一個組件 prop 到表達式。v-bind指令能夠在其名稱後面帶一個參數，中間用一個冒號隔開。這個參數一般是HTML元素的特性（attribute），好比：

  

v-bind:src="imageSrc"  能夠縮寫： :src="imgaeSrc"

 

:class="{ red: isRed }"  或  :class="[classA, classB]" ...

 

:style="{ fontSize: size + 'px' }"  或 :style="[styleObjectA, styleObjectB]" ...

 

 綁定一個有屬性的對象，好比：v-bind="{ id: someProp, 'other-attr': otherProp }" 

 

...

  

語法結構：v-bind:argument="expression"

  

由於 Mustache 不能在 HTML 屬性中使用，應使用 v-bind 指令，Mustache 是一個 logic-less （輕邏輯）模板解析引擎，它的優點在於能夠應用在 Javascript、PHP、Python、Perl 等多種編程語言中。 

  

案例實操：讓HTML5學院在各大學院中處於選中狀態

  

  

運行結果

  

  

 

3.7  v-on指令

 

        動態地綁定一個或多個特性，或一個組件 prop 到表達式；其做用和v-bind相似。注意：若是用在普通元素上時，只能監聽 原生 DOM 事件；可是若是用在自定義元素組件上時，也能夠監聽子組件觸發的自定義事件。

  

經常使用的修飾符包括：

  

 .stop - 調用 event.stopPropagation()；中止冒泡。

    

.prevent - 調用 event.preventDefault(); 中止監聽原生事件。

    

.capture - 添加事件偵聽器時使用 capture 模式。

    

 .self - 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。

    

 .{keyCode | keyAlias} - 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。

    

 .once - 觸發一次。

  

使用手法：

    

<!-- 方法處理器 -->

<button v-on:click="doThis"></button>

<!-- 內聯語句 -->

<button v-on:click="doThat('hello', $event)"></button>

<!-- 縮寫 -->

<button @click="doThis"></button>

<!-- 中止冒泡 -->

<button @click.stop="doThis"></button>

<!-- 阻止默認行爲 -->

<button @click.prevent="doThis"></button>

<!-- 阻止默認行爲，沒有表達式 -->

<form @submit.prevent></form>

<!--  串聯修飾符 -->

<button @click.stop.prevent="doThis"></button>

<!-- 鍵修飾符，鍵別名 -->

<input @keyup.enter="onEnter">

<!-- 鍵修飾符，鍵代碼 -->

<input @keyup.13="onEnter">

<!-- the click event will be triggered at most once -->

<button v-on:click.once="doThis"></button>

 

案例實操：

 

    

運行結果:

  

    

       咱們在上面案例中接觸到了新的methods方法，經過這個方法能夠直接經過 app 實例訪問這些方法，或者在指令表達式中使用,方法中的 this 自動綁定爲 Vue 實例。這在後面的章節中咱們還會介紹。

 

   

4、Vue指令篇—綜合演練

       

       結合上述指令，完成小碼哥學生信息錄入。主要功能有動態添加學生信息，動態刪除學生信息，空值校驗。

 

案例效果圖以下：

 

案例代碼以下：