寫在前面
? ? ? 知道Vue已經(jīng)有“一段”時(shí)間了嘱能，粗枝大葉的了解了點(diǎn)，因?yàn)楫?dāng)時(shí)資料比較少员咽，正式項(xiàng)目中也沒有開始用到，也就沒怎么去研究贮预。
? ? ? 接下來可能會去用到這個(gè)贝室，所以準(zhǔn)備去鉆研下。
? ? ? ? 上面的沒啥用仿吞，請直接略過滑频。。唤冈。
? ? ? ? 官網(wǎng)鏈接：https://cn.vuejs.org/
? ? ? Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM框架(庫)峡迷，它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的。我暫時(shí)理解為它是一個(gè)輕量版的Angular你虹。
? ? ? Vue.js提供了更加簡潔绘搞、更易于理解的API，使得我們能夠快速地上手并使用Vue.js傅物。
? ? ? 如果你之前已經(jīng)習(xí)慣了用jQuery操作DOM夯辖，學(xué)習(xí)Vue.js時(shí)請先拋開手動操作DOM的思維，因?yàn)閂ue.js是數(shù)據(jù)驅(qū)動的董饰，你無需手動操作DOM蒿褂。
? ? ? 它通過一些特殊的HTML語法，將DOM和數(shù)據(jù)綁定起來卒暂。一旦你創(chuàng)建了綁定啄栓，DOM將和數(shù)據(jù)保持同步，每當(dāng)變更了數(shù)據(jù)也祠，DOM也會相應(yīng)地更新昙楚。
開啟Vue之旅
Vue是什么？
? ? ? ? 一個(gè)MVVM框架(庫)齿坷、和angular類似桂肌。官網(wǎng)有1.0和2.0兩個(gè)版本，2.0對于1.0提高的地方永淌，可以找度娘崎场。。遂蛀。
Vue優(yōu)勢
? ? ? ? 簡單谭跨、易上手，掌握angular的朋友們，上手Vue就一句話螃宙，so easy!
vue的基礎(chǔ)使用
Vue實(shí)例
1. 引入vue.js
2. 創(chuàng)建一個(gè)vue實(shí)例
模板語法
插值
? ? ? ? {{ variable? }} -> 普通變量
? ? ? ? {{* variable }} -> 一次性模板
? ? ? ? {{{ variable }}} -> 轉(zhuǎn)譯模板
? ? ? ? <input type="text" v-model="variable">? ? v-model? 的模板語法
? ? ? 通過使用v-once 指令蛮瞄，你也能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)谆扎，插值處的內(nèi)容不會更新挂捅。但請留心這會影響到該節(jié)點(diǎn)上所有的數(shù)據(jù)綁定：
? ? ? ? <span v-once>my Message: {{ msg }}</span>
? ? ? 對于所有的數(shù)據(jù)綁定， Vue.js 都提供了完全的 JavaScript 表達(dá)式支持：
? ? ? 這些表達(dá)式會在所屬 Vue 實(shí)例的數(shù)據(jù)作用域下作為 JavaScript 被解析堂湖。有個(gè)限制就是闲先，每個(gè)綁定都只能包含單個(gè)表達(dá)式。語句无蜂、流程控制等不生效伺糠。
指令
? ? ? 指令（Directives）是帶有v-前綴的特殊屬性。指令屬性的值預(yù)期是單一 JavaScript 表達(dá)式（除了v-for）斥季。指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時(shí)相應(yīng)地將某些行為應(yīng)用到 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(阻止默認(rèn)事件)
。酣倾。舵揭。
? ? ? tips：@contextmenu.stop.prevent = "method"中，stop灶挟、prevent前面的點(diǎn)( . )為修飾符琉朽。
v-for 循環(huán)
1. ?<li v-for="value in variable"></li> ?—> array
2. <li v-for="(key,value) in json"></li> ?—> ?json
? ? ? ? ↑ ?不添加 ?track-by="$index" ?循環(huán)中command相同的內(nèi)容不重復(fù)顯示
filter（過濾器 / 格式化數(shù)據(jù)）
? ? ? ? |：通道操作符
? ? ? ? pipe -> 通道：前者表達(dá)式的計(jì)算值作為后表達(dá)式的計(jì)算參數(shù)
? ? ? ? 過濾器可以用在兩個(gè)地方：mustache 插值和v-bind表達(dá)式毒租。
? ? ? ? filter：currency(默認(rèn)帶$稚铣、保留兩位小數(shù))/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 ?—>對應(yīng)的DOM節(jié)點(diǎn)
? ? ? ?})
計(jì)算屬性
模板內(nèi)的表達(dá)式是非常便利的，但是它們實(shí)際上只用于簡單的運(yùn)算墅垮。在模板中放入太多的邏輯會讓模板過重且難以維護(hù)惕医。
這就是對于任何復(fù)雜邏輯，都應(yīng)當(dāng)使用計(jì)算屬性的原因算色。
計(jì)算緩存 VS Methods
? ? ? ? 我們可以將同一函數(shù)定義為一個(gè) method 而不是一個(gè)計(jì)算屬性抬伺。對于最終的結(jié)果，兩種方式確實(shí)是相同的灾梦。
? ? ? ? 然而峡钓，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會重新求值若河。相比而言能岩，只要發(fā)生重新渲染，method 調(diào)用總會執(zhí)行該函數(shù)萧福。
? ? ? ? 根據(jù)實(shí)際情況分析拉鹃，確定是否需要緩存，從而確定使用computed 或 methods
Computed屬性 VS Watched屬性
? ? ? ? ?上面代碼是命令式的和重復(fù)的。將它與 computed 屬性的版本進(jìn)行比較：↓↓
Watcher
? ? ? ? 計(jì)算屬性在大多數(shù)情況下更合適膏燕，但有時(shí)也需要一個(gè)自定義的 watcher 钥屈。
? ? ? ? Vue 提供一個(gè)更通用的方法通過watch選項(xiàng)，來響應(yīng)數(shù)據(jù)的變化坝辫。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時(shí)篷就，執(zhí)行異步操作或開銷較大的操作，這是很有用的近忙。
Class與Style綁定
綁定HTML Class
? ? ? ? v-bind:class="..." ? ? ?可以跟對象腻脏、數(shù)組
綁定內(nèi)聯(lián)樣式
? ? ? ? v-bind:style="..."? ? ? 可以跟對象、數(shù)組
? ? ? ? 當(dāng)v-bind:style使用需要特定前綴的 CSS 屬性時(shí)银锻，如transform永品，Vue.js 會自動偵測并添加相應(yīng)的前綴。
? ? ? ? 從 2.3 開始可以為style綁定中的屬性提供一個(gè)包含多個(gè)值的數(shù)組击纬，常用于提供多個(gè)帶前綴的值：
? ? ? ? <div:style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">
條件渲染
v-if鼎姐、v-else-if、v-else
? ? ? ? <h1 v-if="ok">Yes</h1> ?使用v-if進(jìn)行條件渲染
? ? ? ? <h1 v-else>No</h1> ? ? ?可以使用v-else添加一個(gè)“else”塊
? ? ? ? v-else更振、v-else-if 元素必須緊跟在v-if或者v-else-if元素的后面——否則它將不會被識別炕桨。
template中的v-if條件組
? ? ? ? 因?yàn)関-if是一個(gè)指令，需要將它添加到一個(gè)元素上肯腕。但是如果我們想切換多個(gè)元素呢献宫？此時(shí)我們可以把一個(gè)<template>元素當(dāng)做包裝元素，并在上面使用v-if实撒。
? ? ? ? 最終的渲染結(jié)果不會包含<template>元素元素當(dāng)做包裝元素姊途，并在上面使用v-if。最終的渲染結(jié)果不會包含元素知态。
用key管理可復(fù)用的元素
? ? ? ? Vue 會盡可能高效地渲染元素捷兰，通常會復(fù)用已有元素而不是從頭開始渲染。這么做负敏，除了使 Vue 變得非彻泵快之外，還有一些有用的好處其做。例如顶考，允許用戶在不同的登錄方式之間切換:
? ? ? ? 在上面的代碼中切換loginType將不會清除用戶已經(jīng)輸入的內(nèi)容。因?yàn)閮蓚€(gè)模版使用了相同的元素妖泄，<input>不會被替換掉——僅僅是替換了它的的placeholder驹沿。
? ? ? ? Vue 提供了一種方式來聲明“這兩個(gè)元素是完全獨(dú)立的——不要復(fù)用它們”。只需添加一個(gè)具有唯一值的key屬性浮庐。
? ? ? ? 這樣每次切換時(shí)甚负，輸入框都將被重新渲染柬焕。<label>元素仍然會被高效地復(fù)用，因?yàn)樗鼈儧]有添加 key 屬性梭域。
v-show
? ? ? ? v-show指令也用于根據(jù)條件展示元素的選項(xiàng)
? ? ? ? <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較好励两；如果在運(yùn)行時(shí)條件不太可能改變，則使用v-if較好囊颅。
v-if 和 v-for 一起使用
? ? ? ? 當(dāng) v-if 與 v-for 一起使用時(shí)当悔，v-for 具有比 v-if 更高的優(yōu)先級。
列表渲染
v-for
1.<li v-for="value in variable"></li> ——>array
2.<li v-for="(key,value) in json"></li> ——>json
? ? ? ? ↑? 不添加? track-by="$index"? 循環(huán)中command相同的內(nèi)容不重復(fù)顯示
Template ?v-for
Vue組件
作者持續(xù)更新中踢代。盲憎。。
友情鏈接：http://www.reibang.com/p/5ba253651c3b?從環(huán)境搭建到發(fā)布
文筆有限胳挎，歡迎吐槽１怼！慕爬！
