寫在前面
? ? ? 知道Vue已經有“一段”時間了，粗枝大葉的了解了點，因為當時資料比較少，正式項目中也沒有開始用到，也就沒怎么去研究。
? ? ? 接下來可能會去用到這個，所以準備去鉆研下。
? ? ? ? 上面的沒啥用，請直接略過。。。
? ? ? ? 官網鏈接：https://cn.vuejs.org/
? ? ? Vue.js是當下很火的一個JavaScript MVVM框架(庫)，它是以數據驅動和組件化的思想構建的。我暫時理解為它是一個輕量版的Angular。
? ? ? Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。
? ? ? 如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先拋開手動操作DOM的思維，因為Vue.js是數據驅動的，你無需手動操作DOM。
? ? ? 它通過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。
開啟Vue之旅
Vue是什么？
? ? ? ? 一個MVVM框架(庫)、和angular類似。官網有1.0和2.0兩個版本，2.0對于1.0提高的地方，可以找度娘。。。
Vue優勢
? ? ? ? 簡單、易上手，掌握angular的朋友們，上手Vue就一句話，so easy!
vue的基礎使用
Vue實例
1. 引入vue.js
2. 創建一個vue實例
模板語法
插值
? ? ? ? {{ variable? }} -> 普通變量
? ? ? ? {{* variable }} -> 一次性模板
? ? ? ? {{{ variable }}} -> 轉譯模板
? ? ? ? <input type="text" v-model="variable">? ? v-model? 的模板語法
? ? ? 通過使用v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上所有的數據綁定：
? ? ? ? <span v-once>my Message: {{ msg }}</span>
? ? ? 對于所有的數據綁定， Vue.js 都提供了完全的 JavaScript 表達式支持：
? ? ? 這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式。語句、流程控制等不生效。
指令
? ? ? 指令（Directives）是帶有v-前綴的特殊屬性。指令屬性的值預期是單一 JavaScript 表達式（除了v-for）。指令的職責就是當其表達式的值改變時相應地將某些行為應用到 DOM 上。
vue事件
? ? ? ? v-on:事件名
? ? ? ? v-on:mouseenter/mouseleave
? ? ? ? v-on:click? —> 縮略 @click? ? ("v-on:"可以縮略為"@")
? ? ? ? v-on:contextmenu/keydown
? ? ? ? v-on:keyup.鍵碼/enter/delete/left/right/top/bottom/ctrl.v/prevent.stop(阻止默認事件)
。。。
? ? ? tips：@contextmenu.stop.prevent = "method"中，stop、prevent前面的點( . )為修飾符。
v-for 循環
1. ?<li v-for="value in variable"></li> ?—> array
2. <li v-for="(key,value) in json"></li> ?—> ?json
? ? ? ? ↑ ?不添加 ?track-by="$index" ?循環中command相同的內容不重復顯示
filter（過濾器 / 格式化數據）
? ? ? ? |：通道操作符
? ? ? ? pipe -> 通道：前者表達式的計算值作為后表達式的計算參數
? ? ? ? 過濾器可以用在兩個地方：mustache 插值和v-bind表達式。
? ? ? ? filter：currency(默認帶$、保留兩位小數)/lowercase/uppercase/capitalize(首字母大寫)
v-bind
? ? ? ? <div v-bind:class="{className:boolean,className2:boolean}"></div>
? ? ? ? <img v-bind:src="variable"/>? ? ? —>? 縮略寫法：<img :src="variable"/>
自定義指令
? ? ? ?vue.directive('指令名',function(){
? ? ? ? ? ? ? this.el ?—>對應的DOM節點
? ? ? ?})
計算屬性
模板內的表達式是非常便利的，但是它們實際上只用于簡單的運算。在模板中放入太多的邏輯會讓模板過重且難以維護。
這就是對于任何復雜邏輯，都應當使用計算屬性的原因。
計算緩存 VS Methods
? ? ? ? 我們可以將同一函數定義為一個 method 而不是一個計算屬性。對于最終的結果，兩種方式確實是相同的。
? ? ? ? 然而，不同的是計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。相比而言，只要發生重新渲染，method 調用總會執行該函數。
? ? ? ? 根據實際情況分析，確定是否需要緩存，從而確定使用computed 或 methods
Computed屬性 VS Watched屬性
? ? ? ? ?上面代碼是命令式的和重復的。將它與 computed 屬性的版本進行比較：↓↓
Watcher
? ? ? ? 計算屬性在大多數情況下更合適，但有時也需要一個自定義的 watcher 。
? ? ? ? Vue 提供一個更通用的方法通過watch選項，來響應數據的變化。當你想要在數據變化響應時，執行異步操作或開銷較大的操作，這是很有用的。
Class與Style綁定
綁定HTML Class
? ? ? ? v-bind:class="..." ? ? ?可以跟對象、數組
綁定內聯樣式
? ? ? ? v-bind:style="..."? ? ? 可以跟對象、數組
? ? ? ? 當v-bind:style使用需要特定前綴的 CSS 屬性時，如transform，Vue.js 會自動偵測并添加相應的前綴。
? ? ? ? 從 2.3 開始可以為style綁定中的屬性提供一個包含多個值的數組，常用于提供多個帶前綴的值：
? ? ? ? <div:style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">
條件渲染
v-if、v-else-if、v-else
? ? ? ? <h1 v-if="ok">Yes</h1> ?使用v-if進行條件渲染
? ? ? ? <h1 v-else>No</h1> ? ? ?可以使用v-else添加一個“else”塊
? ? ? ? v-else、v-else-if 元素必須緊跟在v-if或者v-else-if元素的后面——否則它將不會被識別。
template中的v-if條件組
? ? ? ? 因為v-if是一個指令，需要將它添加到一個元素上。但是如果我們想切換多個元素呢？此時我們可以把一個<template>元素當做包裝元素，并在上面使用v-if。
? ? ? ? 最終的渲染結果不會包含<template>元素元素當做包裝元素，并在上面使用v-if。最終的渲染結果不會包含元素。
用key管理可復用的元素
? ? ? ? Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做，除了使 Vue 變得非常快之外，還有一些有用的好處。例如，允許用戶在不同的登錄方式之間切換:
? ? ? ? 在上面的代碼中切換loginType將不會清除用戶已經輸入的內容。因為兩個模版使用了相同的元素，<input>不會被替換掉——僅僅是替換了它的的placeholder。
? ? ? ? Vue 提供了一種方式來聲明“這兩個元素是完全獨立的——不要復用它們”。只需添加一個具有唯一值的key屬性。
? ? ? ? 這樣每次切換時，輸入框都將被重新渲染。<label>元素仍然會被高效地復用，因為它們沒有添加 key 屬性。
v-show
? ? ? ? v-show指令也用于根據條件展示元素的選項
? ? ? ? <h1 v-show="ok">Hello!</h1>
? ? ? ? 不同的是帶有v-show的元素始終會被渲染并保留在 DOM 中。v-show是簡單地切換元素的 CSS 屬性display。
? ? ? ? tips：v-show不支持<template>語法，也不支持v-else。
v-if and v-show
? ? ? ? 一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在運行時條件不太可能改變，則使用v-if較好。
v-if 和 v-for 一起使用
? ? ? ? 當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。
列表渲染
v-for
1.<li v-for="value in variable"></li> ——>array
2.<li v-for="(key,value) in json"></li> ——>json
? ? ? ? ↑? 不添加? track-by="$index"? 循環中command相同的內容不重復顯示
Template ?v-for
Vue組件
作者持續更新中。。。
友情鏈接：http://www.lxweimin.com/p/5ba253651c3b?從環境搭建到發布
文筆有限，歡迎吐槽！！！
