學習vue.js (一)

MVVM模式

MVVM是Model-View-ViewModel的簡寫，即模型-視圖-視圖模型。當View（視圖層）變化時，會自動更新到ViewModel（視圖模型），反之也同樣，View和ViewModel之間經過雙向綁定。

 與MVC區別，MVC是單向通訊，VUE就是基於MVVM模式實現的一套框架，在VUE中Model層指的是js中的data數據，View層指的是頁面視圖，ViewModel是指vue實例化對象。

Vue.js的開發模式

Vue.js 是一套構建用戶界面的漸進式框架
當數據與DOM進行了關聯，全部的東西都是響應式的，咱們怎麼確認呢？
在你當前運行的窗口，打開瀏覽器的JavaScript控制檯，並修改app.message的值，你將看到上例的值相應的更新。

 

內置指令

指令 (Directives) 是帶有 v- 前綴的特殊屬性，指令是Vue模板中最經常使用的一項功能，它帶有前綴v-，主要職責就是當其表達式的值改變時，將某些行爲應用到DOM上。

• v-if：條件渲染指令，動態在DOM內添加或刪除DOM元素。
• v-else：條件渲染指令，必須跟v-if成對使用。
• v-else-if：判斷多層條件，必須跟v-if成對使用。
• v-show：條件渲染指令，爲DOM設置css的style屬性，v-show不能在<template>上使用，頻繁切換場景中適合使用。
• v-text：更新元素的textContent；例如：<span v-text="msg"></span> 等同於 < span>{{msg}} </ span>。
• v-html：更新元素的innerHTML；會把標籤名也帶上。
• v-for：循環指令；<li v-for="book in books">{ { book.name } }</li>
• v-for：表達式遍歷數組時支持一個可選參數做爲當前項的索引；<li v-for="(book , index) in books ">{{ index}} - {{book.name })</li>
• v-for：表達式遍歷對象屬性時，有兩個可選參數，分別是鍵名和索引；<li v-for="(value , key , index) in user ">{ { index } } - { { key } } : { { value } }</li>
• v-cloak：不須要表達式，這個指令保持在元素上直到關聯實例結束編譯； v-cloak 是一個解決初始化慢致使頁面閃動的最佳實踐。
• v-once：也是一個不須要表達式的指令，做用是定義它的元素或組件只渲染一次，包括元素或組件的全部子節點。
• v-pre：不須要表達式，跳過這個元素以及子元素的編譯過程，以此來加快整個項目的編譯速度。
• v-bind：響應並更新DOM特性；例如：v-bind:href  v-bind:class  v-bind:title  等等。語法糖："v-bind:」 能夠用"："代替。
• v-on：用於監聽DOM事件； 例如：v-on:click  v-on:keyup。語法糖：「v-on:」能夠用「@」代替。
• v-model：數據雙向綁定；用於表單輸入等；例如：< input v-model= "message">。v-model也是一個特殊的語法糖，使用@input來替代v-model。

v-bind 特性被稱爲指令。指令帶有前綴 v-，以表示他們是Vue提供的特殊的特性。

咱們不只能夠把數據綁定到DOM文本或特性，還能夠綁定到DOM結構。此外，Vue也提供了一個強大的過渡效果系統，能夠在Vue插入/更新/移除元素時自動應用過渡效果。

v-if 條件控制語句 可控制一個元素是否顯示是否隱藏。
v-for 循環 該指令能夠綁定數組的數據來渲染一個項目列表。
v-on 指令添加一個事件監聽器，經過他調用在Vue實例中定義的方法。綁定事件
v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向綁定。

組件化應用構建：組件系統是vue的另外一個重要的概念，由於它是一種抽象，容許咱們使用小型、獨立的一般可複用的組件構建大型應用。
註冊一個全局組件語法格式以下：
Vue.compnent(tagName,options)
tagName爲組件名，options爲配置選項。註冊後咱們可使用如下方式來調用組件：
<tagName></tagName>
組件可複用，一個組件的 data 選項必須是一個函數，由於你每用一次組件，就會有一個它的新實例被建立。
在組件中建立多個標籤時，標籤必須有父標籤，不然不能顯示
例：
vue.compnent('button-counter',{

data: function () {
return {
count:0
}
},
template: '<div><h1>標題</h1></h1><button v-on:click="count++">You clicked me {{count}} times.</button></div>'//當建立兩個或兩個以上的標籤必須包含在父標籤內
})
props屬性：父組件是使用 props 傳遞數據給子組件，但若是子組件要把數據傳遞回去，就須要使用自定義事件！
使用 $on(eventName) 監聽事件
使用 $emit(eventName) 觸發事件

Vue實例
建立一個Vue實例，每個Vue應用都是經過用Vue函數建立一個Vue實例開始的：
var vm=new Vue({
//選項
})
當建立一個Vue實例時，你能夠傳入一個選項對象，能夠在API文檔中瀏覽完整的選項列表。https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE vue數據選項

數據與方法
當一個Vue實例被建立時，它將 data 對象的全部屬性加入到vue的響應式系統中，當這些屬性的值發生改變時，視圖(頁面)將會產生"響應"，即匹配更新爲新的值。
例：
// 咱們的數據對象
var data = { a: 1 }

// 該對象被加入到一個 Vue 實例中
var vm = new Vue({
data: data
})

// 得到這個實例上的屬性
// 返回源數據中對應的字段
vm.a == data.a // => true

// 設置屬性也會影響到原始數據
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
那麼對於 b 的改動將不會觸發任何視圖的更新。若是你知道你晚些時候須要一個屬性，可是一開始它爲空或不存在，那麼你須要設置一些初始值。好比：
data: {
vm.a // => 3
當這些數據改變時，視圖會從新渲染。值得注意的是只有當實例被建立時就已經存在於data中的屬性纔是響應式的。也就是說若是你添加一個新的屬性，如：
vm.b='hi'
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
這裏惟一的例外是使用 Object.freeze() ,這會組織修改現有的屬性，也意味着響應系統沒法在追蹤變化。
例：
var obj = {
foo: 'bar'
}

Object.freeze(obj)

var apps = new Vue({
el: '#app',
data: obj
})
<div id="app">
<p>{{ foo }}</p>
<!-- 這裏的 `foo` 不會更新！ -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>

除了數據屬性，vue實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $ ,以便與用戶定義的屬性區分開來。

模板語法
數據綁定最多見的形式j就是使用"Mustache"語法(雙大括號)的文本插值:
<span>Message: {{ msg }}</span>
雙大括號標籤將會被替代爲對應數據對象上 msg 屬性的值。不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。

特性
Mustache語法不能做用在HTML特性上，遇到這種狀況 應該使用 v-bind 指令: https://cn.vuejs.org/v2/api/#v-bind
例：<div v-bind:id="dynamicId"></div>

對於布爾特性(它們只要存在就意味着值爲 true) ，v-bind 工做起來略有不一樣，
例：<button v-bind:disabled="isButtonDisabled">Button</button>
若是 isButtonDisabled 的值是null，undefined，或 false，則disabled 特性甚至不會被包含在渲染出來的 <button> 元素中。

使用 JavaScript表達式
例：
{{ number + 1 }}

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

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

<div v-bind:id="'list-' + id"></div>
這些表達式會在所屬 Vue 實例的數據做用域下做爲 JavaScript 被解析。有個限制就是，每一個綁定都只能包含單個表達式，因此下面的例子都不會生效。

<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}

<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}
注：模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date 。你不該該在模板表達式中試圖訪問用戶定義的全局變量。

指令
指令是帶有 v- 前綴的特殊特性，指令的指責是，當表達式的值改變時，將其產生的連帶影響，響應式的做用於 DOM 。
例：
<p v-if="seen">如今你看到我了</p>
這裏，v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。

參數
一些指令可以接收一個「參數」，在指令名稱以後以冒號表示。例如，v-bind 指令能夠用於響應式地更新 HTML 特性：

<a v-bind:href="url">...</a>
在這裏 href 是參數，告知 v-bind 指令將該元素的 href 特性與表達式 url 的值綁定。

另外一個例子是 v-on 指令，它用於監聽 DOM 事件：

<a v-on:click="doSomething">...</a>
在這裏參數是監聽的事件名。

動態參數
2.6.0 新增

從 2.6.0 開始，能夠用方括號括起來的 JavaScript 表達式做爲一個指令的參數：

<a v-bind:[attributeName]="url"> ... </a>
這裏的 attributeName 會被做爲一個 JavaScript 表達式進行動態求值，求得的值將會做爲最終的參數來使用。
例如，若是你的 Vue 實例有一個 data 屬性 attributeName，其值爲 "href"，那麼這個綁定將等價於 v-bind:href。

修飾符
修飾符 (modifier) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

縮寫
v-bind縮寫
完整語法：<a v-bind:href="url"></a>
縮寫：<a :href="url"></a>

v-on縮寫
完整語法：<a v-on:click="doSomething"></a>
縮寫：<a @click="doSomething"></a>

計算屬性
模板內的表達式很是便利，可是設計它的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。
例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在這個地方，模板再也不是簡單的聲明邏輯。你必須看一段時間才能意識到，這裏是想要顯示變量 message 的翻轉字符串。當你想要在模板中屢次引用此處的翻轉字符串時，就會更加難以處理。
因此，對於任何複雜邏輯，你都應當使用計算屬性。
例：
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
結果：

Original message: "Hello"

Computed reversed message: "olleH"

這裏咱們聲明瞭一個計算屬性 reversedMessage。咱們提供的函數將用做屬性 vm.reversedMessage 的 getter 函數：
console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'
你能夠打開瀏覽器的控制檯，自行修改例子中的 vm。vm.reversedMessage 的值始終取決於 vm.message 的值。

你能夠像綁定普通屬性同樣在模板中綁定計算屬性。Vue 知道 vm.reversedMessage 依賴於 vm.message，所以當 vm.message 發生改變時，全部依賴 vm.reversedMessage 的綁定也會更新。
並且最妙的是咱們已經以聲明的方式建立了這種依賴關係：計算屬性的 getter 函數是沒有反作用 (side effect) 的，這使它更易於測試和理解。

計算屬性 VS 方法
計算屬性 VS 偵聽屬性
計算屬性的setter
偵聽器
請看官網詳解：https://cn.vuejs.org/v2/guide/computed.html#%E5%9F%BA%E7%A1%80%E4%BE%8B%E5%AD%90

v-show指令 帶有v-show]指令的元素始終會被渲染並保留在BOM中。v-show只是簡單的切換元素的CSS屬性display

事件處理
v-on指令 用於綁定事件
事件修飾符 經過由 . 表示的指令後綴來調用修飾符
例：
<a v-on:click.stop="doThis"></a> //阻止單機事件冒泡
<from v-on:submit.prevent="onSubmit"></from> // 提交事件再也不重載頁面
<a v-on:click.stop.prevent=""></a> //只有修飾符
<div v-on:click.capture="doThis"></div> //添加事件偵聽器時使用事件捕獲模式
<div v-on:click.self="doThat"></div> //只當事件在該元素自己（而不是子元素）觸發時觸發回調

<div v-on:click.once="doThis"></div> //click事件只能點擊一次，2.1.4版本新增

按鍵修飾符
vue爲經常使用的的按鍵提供了別名：
<input v-on:keyup.enter="submit" /> //只有keyup是enter時調用submit方法
縮寫:<input @keyup.enter="submit" />
所有按鍵別名：.enter .tab .delete (捕獲"刪除"和"退格"鍵） .esc .space .up .down .left .right .ctrl .alt .shift .meta

表單輸入綁定v-model 指令在表單<input>,<textarea></textarea>,<select></select> 元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素，注：v-model 會忽略全部表單元素的 value,checked,selected,特性的初始值而老是將vue實例的數據做爲數據來源。你應該經過JavaScript在組件的data選項中聲明初始值。