Vue筆記系列（一）Vue.js入門

Vue筆記系列
二、Vue.js漸進
三、Vue.js進階

---

Vue.js的概述

如官網所說，Vue.js是一款輕量級的以數據驅動的漸進式JavaScript 框架。

老卜的 前端開發之走進Vue.js介紹到：

Vue.js數據驅動的原理在於View層的視圖發生改變時，Vue會經過DOM Listeners來監聽並改變Model層的數據。反之，當Model層的數據發生改變時，也會經過Data Bingings來監聽並改變View層的展現。從而實現雙向數據綁定的功能。
例如：jQuery經過操做DOM來改變頁面的顯示，而Vue經過操做數據來實現頁面的更新與展現。這樣咱們就能很直觀的理解數據驅動的意思了。

上面介紹到的是Vue.js的原理，下面再來科普一下MVVM這個概念（一像素寫的《Vue.js 和 MVVM 小細節》），可讓你更好的理解Vue,可是沒有太大的實踐做用，可是能夠裝B，更重要的是能夠在面試的時候裝B。

MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，其核心是提供對View 和 ViewModel 的雙向數據綁定，這使得ViewModel 的狀態改變能夠自動傳遞給 View，即所謂的 數據雙向綁定。
Vue.js 就是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專一於View 層。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel負責鏈接 View 和 Model，保證視圖和數據的一致性。

起步

雖然對node.js和webpack瞭解，並在項目中使用過了，但仍是嘗試從最基本的瞭解Vue開始，充分體驗一下這漸進過程，直接下載並使用<script>引入
或者使用CDN引入

<script src="https://unpkg.com/vue/dist/vue.js">

聲明式渲染

官網首先強調，Vue.js 的核心是一個容許你採用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統

簡單的html結構，id是start

兩對大括號的「Mustache」語法很面熟，在jsx或者arttemplate等通常的渲染引擎相似。

<div id="start">
    {{message}}
</div>

聲明Vue對象

引入了vue.js，Vue會被註冊爲一個全局變量。在實例化 Vue 時，須要傳入一個選項對象，它能夠包含數據、模板、掛載元素、方法、生命週期鉤子等選項。

var start = new Vue({
        el: "#start",
        data: {
            message: "helloWorld,helloVue!"
        }
    })

• el:Vue須要操做的元素節點
• data屬性:每一個 Vue 實例都會代理其 data對象裏全部的屬性。注意只有這些被代理的屬性是響應的。若是在實例建立以後添加新的屬性到實例上，它不會觸發視圖更新。

除了 data 屬性， Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $
start .$el === document.getElementById('start') // -> true
start這個實例而後.$el，就至關於Vue構造函數傳入的el。

如今數據和 DOM 已經被綁定在一塊兒，全部的元素都是響應式的。在瀏覽器控制檯修改start.message,頁面會相應更新。

Vue經常使用指令介紹

指令帶有前綴 v-，以表示它們是 Vue.js 提供的特殊屬性。

一、v-text (更新元素的文本內容)

<span v-text="msg"></span>
<!-- 和下面的同樣 -->
<span>{{msg}}</span>

二、v-html (更新元素的innerHTML)

注意:內容按普通 HTML 插入 - 不會做爲 Vue 模板進行編譯。

<div v-html="html"></div>

三、v-if (根據表達式的值的真假條件渲染元素)

<h1 v-if="ok">Yes</h1>
至關於
<!-- Handlebars 模板 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}

上面的代碼，若是ok爲false，則h1不會被渲染出來。
如今只是切換一個元素，若是要同時操做多個，能夠在要操做的元素外面包一層，例以下面用div

<div v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </div>
<!-- 若是ok爲flase,那麼h1和兩個p都不會渲染 -->

固然，有if確定就有else。 

v-else (指令給 v-if或 v-show添加一個 「else」 塊)

能夠看出，v-else不僅是能夠搭配v-if，還能夠搭配v-show
必須注意 ：v-else元素必須緊跟在 v-if或 v-show元素的後面——不然它不能被識別。

<div v-if="Math.random() > 0.5">
    Sorry
</div>
<div v-else>
    Not sorry
</div>
<!-- 隨機切換兩種展現結果 -->

四、v-show (根據條件展現元素)

剛在上面提到了v-show，趁熱打鐵來了解一下，用法跟v-if是同樣的，不一樣的是有 v-show的元素會始終渲染並保持在 DOM 中。v-show是簡單的切換元素的 CSS 屬性 display。
官網說v-show不支持 <template>語法。我試了一下

<template v-show="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
</template>
<!--嗯，果真很差用，雖然ok是false，依然會把裏面的全部東西都渲染出來 -->

下面說一下 v-if和 v-show的區別
v-if：是真實的條件渲染，切換時銷燬和重建，第一次若是判斷條件爲假，是什麼都不作的，官方稱爲懶惰性。
v-show：元素始終被編譯並保留，只是簡單地基於 CSS 切換
總結一下，  v-if有更高的切換消耗而  v-show有更高的初始渲染消耗。所以，若是須要頻繁切換使用  v-show較好，若是在運行時條件不大可能改變則使用  v-if較好。

簡單提一下2.1.0 新增了一個 v-else-if ,也能夠跟 v-else 搭配，用做 v-if 的 else-if 塊。能夠鏈式的屢次使用。這個就很好理解了，貼一段官方代碼：

<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>

/*是否是很像？
if(){
}else if(){
}else {
}*/

五、v-for(基於源數據屢次渲染元素或模板塊 特定語法：alias in expression)

通俗點說就是，遍歷一個數組，數組裏面放的是一個個的對象。
基本用法

<!-- html -->
<ul id="example-1">
  <li v-for="word in words">
      {{ word.text }}
  </li>
</ul>

//javascript
var example1 = new Vue({
        el: '#example-1',
        data: {
            words: [
                {text: 'a' },
                {text: 'b' },
                {text: 'c' }
            ]
        }
    })

v-for,能夠遍歷數組，對象，甚至是整數（能夠當作循環的次數來用），其中遍歷的參數能夠是value，index，若是是對象還有key。

<!-- 數組 -->
<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>
<!-- 整數-->
<div>
<span v-for="n in 10">{{ n }}</span>
</div>
結果爲：1 2 3 4 5 6 7 8 9 10

提示：數組的變異方法，push()、pop()、shift()、unshift()、splice()、sort()、reverse()，能夠觸發視圖更新。而且，官網稱，若是你想讓展示方式達到你的預期，建議儘量使用 v-for來提供 key。
注意：Vue 不能檢測如下變更的數組
一、當你利用索引直接設置一個項時，例如上面的example1.words[0] = {text: 'A'}
解決方法：
用一下兩種方法，觸發狀態更新。

// Vue.set
Vue.set(example1.items, 0, {text: 'A'})
// Array.prototype.splice`
example1.items.splice(0,1, {text: 'A'})

二、當你修改數組的長度時，例如： example1.words.length = newLength
解決方法：
？？？官方稱使用splice，我試了一下，若是輸入的長度小於原有的長度，能夠實現截取數組的效果來觸發視圖更新，可是若是輸入的長度大於原有的長度，就不會讓原數組更改而觸發更新了，若是有新的進展，我會過來修改。

example1.items.splice(newLength)

6.v-on(綁定事件監聽器)

簡單說，就是監聽 DOM 事件來觸發一些 JavaScript 代碼。

• 事件類型由參數指定，例如：click、submit等等。
• 表達式能夠是一個方法的名字或一個內聯語句，這個內聯跟樣式的內聯同樣，就是直接在DOM元素上寫邏輯，以下：

<button type="button" v-on:click = "num += 1">點擊增長1</button>

• v-on還有縮寫@

<button type="button" @click = "num += 1">點擊增長1</button> //把上面的一行代碼縮寫的是這個樣子的

• 在官網上能夠看到這麼一段話，在監聽原生 DOM 事件時，方法以事件爲惟一的參數。以下：

<button v-on:click="doThis"></button>
// 在 `methods` 對象中定義方法
  methods: {
    doThis: function (event) {
      // `this` 在方法裏指當前 Vue 實例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
//咱們能夠看到在方法中可使用原生的DOM事件event對象。

接下來還有一句，若是使用內聯語句，語句能夠訪問一個 $event 屬性。

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
//用$event傳入後，咱們就能夠在內聯語句處理器中使用event進行操做了。
methods: {
  warn: function (message, event) {
    // 如今咱們能夠訪問原生事件對象
    if (event) event.preventDefault()
    alert(message)
  }
}
//可是我在內聯語句中不傳入$event，在調用的方法中也不寫入形參event，結果是也能拿到event對象,固然這是在谷歌和高版本的IE下，火狐瀏覽器會報錯
<button v-on:click="warn('Form cannot be submitted yet.')">Submit</button>
methods: {
  warn: function (message) { // 不寫入event，谷歌和高版本IE依然能拿到event對象，火狐會報錯。
    // 如今咱們能夠訪問原生事件對象
    if (event) event.preventDefault()
    alert(message)
  }
}

• 事件修飾符

官網說：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節，那我想阻止冒泡或者阻止默認事件怎麼辦？ Vue.js 爲 v-on 提供了 事件修飾符。經過由點(.)表示的指令後綴來調用修飾符。
能夠看官網的詳解，不作贅述。事件修飾符

• 按鍵修飾符

Vue 容許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：

<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">

所有的按鍵別名：

• enter
• tab
• delete (捕獲 「刪除」 和 「退格」 鍵)
• esc
• space
• up
• down
• left
• right

今後不再用記數字了。而且能夠經過全局 config.keyCodes對象自定義按鍵修飾符別名：

/ /可使用 v-on:keyup.f2
Vue.config.keyCodes.f2= 113 
//要注意是全局對象Vue調用的。

新增的能夠配合其餘操做一塊兒用的鍵名：

• ctrl
• alt
• shift
• meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
//？？？試了一下，並非只有alt+c能觸發，只要是最後一個鍵按得是c，就能觸發,會繼續關注。

---

7.v-bind(動態地綁定一個或多個特性)

有縮寫，縮寫是一個冒號　 :

• 在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。
• 當 v-bind:style 使用須要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測並添加相應的前綴。

？？？試了一下並無按照預期的自動添加前綴，會持續關注。
注意： .once 和 .sync 修飾符在2.0已經移除。

---

8.v-model(在表單控件或者組件上建立雙向綁定)

它會根據控件類型自動選取正確的方法來更新元素。 v-model 本質上不過是語法糖，它負責監聽用戶的輸入事件以更新數據，並特別處理一些極端的例子。

• v-model 並不關心表單控件初始化所生成的值。由於它會選擇 Vue 實例數據來做爲具體的值。
• 修飾符：

.lazy - 取代 input監聽 change事件，例如文本輸入框就不會在輸入時就改變視圖，須要失去焦點時纔會改變視圖。
.number - 輸入字符串轉爲數字，若是原值的轉換結果爲 NaN 則返回原值。
.trim - 輸入首尾空格過濾

---

9.v-pre(跳過，不編譯)

跳過這個元素和它的子元素的編譯過程。跳過大量沒有指令的節點會加快編譯。注意這個指令 不須要表達式

<span v-pre>{{ this will not be compiled }}</span>

//會連同花括號一直展現出來：{{ this will not be compiled }}

---

10.v-cloak（不須要表達式）

這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一塊兒用時，這個指令能夠隱藏未編譯的 Mustache 標籤直到實例準備完畢。之後若是真的用到會再來詳談。

---

10.v-once（不須要表達式）

只渲染元素和組件一次。隨後的從新渲染,元素/組件及其全部的子節點將被視爲靜態內容並跳過。這能夠用於優化更新性能。
v-once這個指令留白的Vue 2 | Part 3 經常使用指令合集說的仍是挺好的。

---

以上是關於Vue.js的概述和指令筆記，後續會有進階和以爲文檔中能夠拿來出來嘮叨嘮叨的東西再寫幾篇出來。
最後，歡迎各位看官留言交流和指正。