一艘刚、 簡單介紹
二、安裝和部署
1.用cli在命令行搭建腳手架
2.直接引用vue.js
3.引入cdn
4.npm安裝
三芭析、簡單應(yīng)用
Vue.js 的核心是一個(gè)允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)锚扎。
vue 主要分為視圖和腳本。
vm （viewModel）表示vue 實(shí)例馁启。
1.數(shù)據(jù)與方法
? ? ? ?當(dāng)一個(gè)vue實(shí)例被創(chuàng)建時(shí)驾孔，它將data對象中的所欲屬性加入到vue的響應(yīng)式系統(tǒng)中。當(dāng)這些屬性的值發(fā)生改變時(shí)惯疙，視圖將會(huì)響應(yīng)翠勉，匹配更新為新的值。這里唯一的例外是Object.freeze()霉颠，會(huì)阻止修改現(xiàn)有屬性对碌，響應(yīng)系統(tǒng)無法追蹤變化。
? ? ? ? watch 會(huì)觀察變量的變化蒿偎，能夠記錄oldVal和newVal朽们。
2.生命周期
? ? ? ? 生命周期鉤子需要在new vue（）創(chuàng)建時(shí)，以屬性方式進(jìn)行聲明诉位，寫在vue實(shí)例內(nèi)骑脱。注意一點(diǎn)：不能使用箭頭函數(shù)來定義一個(gè)生命周期方法?(例如?created: () => this.fetchTodos())
????????在實(shí)例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用苍糠。也就是在頁面調(diào)用之前的生命周期叁丧。
? ? ? ??在實(shí)例創(chuàng)建完成后被立即調(diào)用。在這一步岳瞭，實(shí)例已完成以下的配置：數(shù)據(jù)觀測 (data observer)拥娄，屬性和方法的運(yùn)算，watch/event 事件回調(diào)瞳筏。然而稚瘾，掛載階段還沒開始，$el?屬性目前尚不可用乏矾。
????????在掛載開始之前被調(diào)用：相關(guān)的?render?函數(shù)首次被調(diào)用孟抗。該鉤子在服務(wù)器端渲染期間不被調(diào)用迁杨。
? ? ? ? 掛載成功。實(shí)例被掛載后調(diào)用凄硼，這時(shí)?el?被新創(chuàng)建的?vm.$el?替換了铅协。 如果根實(shí)例掛載到了一個(gè)文檔內(nèi)的元素上，當(dāng)mounted被調(diào)用時(shí)vm.$el也在文檔內(nèi)摊沉。
注意?mounted?不會(huì)保證所有的子組件也都一起被掛載狐史。如果你希望等到整個(gè)視圖都渲染完畢，可以在?mounted?內(nèi)部使用?vm.$nextTick
????????數(shù)據(jù)更新時(shí)調(diào)用说墨，發(fā)生在虛擬 DOM 打補(bǔ)丁之前骏全。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動(dòng)移除已添加的事件監(jiān)聽器尼斧。
該鉤子在服務(wù)器端渲染期間不被調(diào)用姜贡，因?yàn)橹挥谐醮武秩緯?huì)在服務(wù)端進(jìn)行。
????????由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁棺棵，在這之后會(huì)調(diào)用該鉤子楼咳。
????????當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件 DOM 已經(jīng)更新烛恤，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作母怜。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)缚柏。如果要相應(yīng)狀態(tài)改變苹熏，通常最好使用計(jì)算屬性或?watcher?取而代之。
3.模版語法----插值
#文本
Message: {{ msg }}
一旦msg發(fā)生變化币喧，頁面的值也會(huì)隨之變化轨域。如果想只插入一次，不會(huì)再變粱锐，用v-once疙挺，比如：
<span v-once></span>
#原始html
<p v-html>{{msg}}</p> 這樣msg中的html標(biāo)簽?zāi)鼙蛔R(shí)別。
#綁定屬性
v-bind 動(dòng)態(tài)綁定某個(gè)屬性
4.模版語法----指令
? ? ? 指令 (Directives) 是帶有?v-?前綴的特殊 attribute怜浅。指令 attribute 的值預(yù)期是單個(gè) JavaScript 表達(dá)式?(v-for?是例外情況）。指令的職責(zé)是蔬崩，當(dāng)表達(dá)式的值改變時(shí)恶座，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM沥阳。
#縮寫
v-bind縮寫 ：
v-on的縮寫 @
#修飾符
<div @click="click1">
? ? <div @click.stop="click2">Click me</div>
</div>
@click.stop中的stop是修飾符跨琳，表示等自己的click事件執(zhí)行完成后，不再執(zhí)行父級的click事件了桐罕。
5.綁定class 和style
當(dāng)有如下模板 ：
<div
? class="static"
? v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
data 如下：
data: {
? isActive: true,
? hasError: false}
第一個(gè)active： 是屬性脉让，isActive 是data 中的屬性桂敛，active?這個(gè) class 存在與否將取決于數(shù)據(jù)屬性?isActive?的?truthiness。
我們也可以在這里綁定一個(gè)返回對象的計(jì)算屬性溅潜。這是一個(gè)常用且強(qiáng)大的模式：
HTML
<div v-bind:class="classObject"></div>? ? ?
JS
data: {
? isActive: true,
? error: null},computed: {
? classObject: function(){
? ? return {
? ? ? active: this.isActive && !this.error,
? ? ? 'text-danger': this.error && this.error.type === 'fatal'? ? }
? }
}
6.條件渲染
v-if?指令用于條件性地渲染一塊內(nèi)容术唬。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回 truthy 值的時(shí)候被渲染。
可以使用?v-else?指令來表示?v-if?的“else 塊”滚澜。v-else?元素必須緊跟在帶?v-if?或者?v-else-if?的元素的后面粗仓，否則它將不會(huì)被識(shí)別。
v-else-if设捐，顧名思義借浊，充當(dāng)?v-if?的“else-if 塊”，可以連續(xù)使用萝招。帶有?v-show?的元素始終會(huì)被渲染并保留在 DOM 中蚂斤。v-show?只是簡單地切換元素的 CSS 屬性?display。
v-show是根據(jù)條件展示元素槐沼。值得注意的是：v-show?不支持?<template>?元素橡淆，也不支持?v-else。
v-if vs v-show：
v-if?是“真正”的條件渲染母赵，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建逸爵。
v-if?也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)凹嘲，才會(huì)開始渲染條件塊师倔。
相比之下，v-show?就簡單得多——不管初始條件是什么周蹭，元素總是會(huì)被渲染趋艘，并且只是簡單地基于 CSS 進(jìn)行切換。
一般來說凶朗，v-if?有更高的切換開銷瓷胧，而?v-show?有更高的初始渲染開銷。因此棚愤，如果需要非常頻繁地切換搓萧，則使用?v-show?較好；如果在運(yùn)行時(shí)條件很少改變宛畦，則使用?v-if?較好瘸洛。
7.列表渲染
?v-for指令基于一個(gè)數(shù)組來渲染一個(gè)列表。
關(guān)于數(shù)組：
v-for?指令需要使用?item in items?形式的特殊語法次和，其中?items?是源數(shù)據(jù)數(shù)組反肋，而?item?則是被迭代的數(shù)組元素的別名。也可以用item踏施，index in items 的形式石蔗，或者(item, index) in items 的形式罕邀，參數(shù)index代表數(shù)組的索引。
? ? ? ? 數(shù)組中也可以用of 代替in养距，比如：item of items诉探；
關(guān)于對象：
同樣獲取值：value in object
獲取值和鍵名：(value, name) in object
獲取值，鍵名铃在，索引：(value, name, index) in object
? ? ? 當(dāng) Vue 正在更新使用?v-for?渲染的元素列表時(shí)阵具，它默認(rèn)使用“就地更新”的策略。如果數(shù)據(jù)項(xiàng)的順序被改變定铜，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序阳液，而是就地更新每個(gè)元素，并且確保它們在每個(gè)索引位置正確渲染揣炕。
? ? ? ? ?建議盡可能在使用?v-for?時(shí)提供?key?attribute帘皿，除非遍歷輸出的 DOM 內(nèi)容非常簡單，或者是刻意依賴默認(rèn)行為以獲取性能上的提升畸陡。
#數(shù)據(jù)檢測更新
##變異方法
變異方法鹰溜，會(huì)改變調(diào)用了這些方法的原始數(shù)組。
Vue 將被偵聽的數(shù)組的變異方法進(jìn)行了包裹丁恭，所以它們也將會(huì)觸發(fā)視圖更新曹动。這些被包裹過的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
##替換數(shù)組
非變異 (non-mutating method) 方法，例如?filter()牲览、concat()?和?slice()?墓陈。它們不會(huì)改變原始數(shù)組，而總是返回一個(gè)新數(shù)組第献。
##注意事項(xiàng)
由于 JavaScript 的限制贡必，Vue?不能檢測以下數(shù)組的變動(dòng)（也就是說不是響應(yīng)式的）：
????????1.當(dāng)利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
????????2.當(dāng)修改數(shù)組的長度時(shí)庸毫，例如：vm.items.length = newLength
但是要實(shí)現(xiàn)上面兩個(gè)情況仔拟，也是有方法的，同時(shí)也將在響應(yīng)式系統(tǒng)內(nèi)觸發(fā)狀態(tài)更新：
Vue.set(vm.items, indexOfItem, newValue)飒赃；
vm.items.splice(newLength)
#對象檢測更新
還是由于 JavaScript 的限制利花，Vue 不能檢測對象屬性的添加或刪除。
但是盒揉，可以使用?Vue.set(object, propertyName, value)?方法向嵌套對象添加響應(yīng)式屬性晋被。
還可以使用?vm.$set?實(shí)例方法，它只是全局?Vue.set?的別名刚盈。
需要為已有對象賦值多個(gè)新屬性，比如使用?Object.assign()?或?_.extend()挂脑。在這種情況下藕漱，你應(yīng)該用兩個(gè)對象的屬性創(chuàng)建一個(gè)新的對象欲侮。要像這樣：
vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green'})
#顯示過濾后和排序后的結(jié)果
不實(shí)際改變或重置原始數(shù)據(jù)，只顯示過濾后和排序后的結(jié)果肋联，可以創(chuàng)建一個(gè)計(jì)算屬性威蕉，來返回過濾或排序后的數(shù)組。
例如：
HTLM
<li v-for="n in evenNumbers">{{ n }}</li>
JS
data: {
? numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
? evenNumbers: function(){
? ? return this.numbers.filter(function(number){
? ? ? return number % 2 === 0? ? })
? }
}
在計(jì)算屬性不適用的情況下 (例如橄仍，在嵌套?v-for?循環(huán)中) 可以使用methods方法
HTML
<li v-for="n in even(numbers)">{{ n }}</li>
JS
data: {
? numbers: [ 1, 2, 3, 4, 5 ]
},methods: {
? even: function(numbers){
? ? return numbers.filter(function(number){
? ? ? return number % 2 === 0? ? })
? }
}
7.事件處理
#監(jiān)聽事件
v-on監(jiān)聽DOM韧涨，只限于簡單監(jiān)聽，一般事務(wù)的邏輯比較復(fù)雜侮繁，要寫在methods 組件中虑粥。
#事件修飾符
事件修飾符為了讓方法只處理數(shù)據(jù)邏輯，不處理DOM細(xì)節(jié)宪哩。處理DOM細(xì)節(jié)交給事件修飾符娩贷。常見的有
.stop 阻止事件繼續(xù)傳播
.prevent 阻止頁面重載
.capture
.self
.once 只觸發(fā)一次
.passive
實(shí)參 vs 形參
實(shí)參?全稱為"實(shí)際參數(shù)"是在調(diào)用時(shí)傳遞給函數(shù)的參數(shù)；形參全稱為"形式參數(shù)" 由于它不是實(shí)際存在變量锁孟，所以又稱虛擬變量彬祖。是在定義函數(shù)名和函數(shù)體的時(shí)候使用的參數(shù),目的是用來接收調(diào)用該函數(shù)時(shí)傳入的參數(shù).在調(diào)用函數(shù)時(shí)，實(shí)參將賦值給形參品抽。
8.表單輸入綁定
????????可以用?v-model?指令在表單?<input>储笑、<textarea>?及?<select>?元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素圆恤。盡管有些神奇突倍，但?v-model?本質(zhì)上不過是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)哑了，并對一些極端場景進(jìn)行一些特殊處理赘方。
#修飾符
.lazy? ? ??使用?change?事件進(jìn)行同步，
.number? ? ?自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型弱左，
.trim? ? ??自動(dòng)過濾用戶輸入的首尾空白字符窄陡。
9.組件基礎(chǔ)
? ? ? ? 可以把經(jīng)常重復(fù)使用的功能封裝為組件，v.js用vue.component()函數(shù)創(chuàng)建一個(gè)組件拆火。與new vue（）接受相同的選項(xiàng)跳夭。可以使用props 定義組件的屬性们镜。
????????一個(gè)組件默認(rèn)可以擁有任意數(shù)量的 prop币叹，任何值都可以傳遞給任何 prop。一個(gè)組件默認(rèn)可以擁有任意數(shù)量的 prop模狭，任何值都可以傳遞給任何 prop颈抚。
????????每個(gè)組件只能有一個(gè)根節(jié)點(diǎn)，所以在最外層用<div>包起來嚼鹉。這樣可以實(shí)現(xiàn)在組件內(nèi)使用多個(gè)html標(biāo)簽的效果贩汉。當(dāng)html結(jié)構(gòu)越來越復(fù)雜時(shí)驱富，可以重構(gòu)組件，例如：
HTML
? ??????????<blog-post
????????? v-for="post in posts"
????????? v-bind:key="post.id"
? ????????v-bind:post="post"
????????????></blog-post>
Js
Vue.component('blog-post', {
? props: ['post'],
? template: `
? ? <div class="blog-post">
? ? ? <h3>{{ post.title }}</h3>
? ? ? <div v-html="post.content"></div>
? ? </div>
? `})
#監(jiān)聽子組件
像上面匹舞，將組件重構(gòu)后褐鸥，它的一些功能可能要求和父級組件（html部分）進(jìn)行溝通。父級組件可以像處理 native DOM 事件一樣通過?v-on?監(jiān)聽子組件實(shí)例的事件赐稽；同時(shí)子組件可以通過調(diào)用內(nèi)建的?$emit?方法?并傳入事件名稱來觸發(fā)一個(gè)事件叫榕。
有的時(shí)候用一個(gè)事件來拋出一個(gè)特定的值是非常有用的。這時(shí)可以使用?$emit?的第二個(gè)參數(shù)來提供這個(gè)值：
HTML
<button v-on:click="$emit('enlarge-text', 0.1)">
? Enlarge text
</button>
HTML 增加函數(shù)
<blog-post
? ...
? v-on:enlarge-text="onEnlargeText"
></blog-post>
那么這個(gè)值將會(huì)作為第一個(gè)參數(shù)傳入這個(gè)方法：
methods: {
onEnlargeText:function(enlargeAmount)
{
this.postFontSize += enlargeAmount?
}
}
四姊舵、深入了解組件
1.組件注冊
用Vue.component?來創(chuàng)建組件晰绎，是全局注冊。
優(yōu)點(diǎn)是：全局注冊后蠢莺，可以用在任何新創(chuàng)建的 Vue 根實(shí)例 (new Vue) 的模板中
缺點(diǎn)是：全局注冊所有的組件意味著即便你已經(jīng)不再使用一個(gè)組件了寒匙，它仍然會(huì)被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無謂的增加躏将。
局部注冊：通過一個(gè)普通的 JavaScript 對象來定義組件：
varComponentA = {/* ... */}
varComponentB = {/* ... */}
然后在?components?選項(xiàng)中定義你想要使用的組件：
newVue({el:'#app',
components: {'component-a': ComponentA,'component-b': ComponentB? }})
局部注冊的組件在其子組件中不可用锄弱。
2.模塊系統(tǒng)
一般用import/require?使用一個(gè)模塊系統(tǒng)，比如要使用?Babel 和 webpack 的模塊系統(tǒng)祸憋，最好
創(chuàng)建一個(gè)?components?目錄会宪，并將每個(gè)組件放置在其各自的文件中。
#模塊中局部注冊
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
? components: {
? ? ComponentA,
? ? ComponentC
? },
? // ...}
#基礎(chǔ)組件中自動(dòng)注冊
