1.vue的新建：
（1）在head添加<script src="vue.js"></script>來添加vue庫戴而。
（2）在下邊的body中再添加
<script>
var vm =vue({? //創(chuàng)建vue的實例
el:'標(biāo)簽',//跟將vue實例跟id綁定
data:{//數(shù)據(jù)源
msg:'你好呀',//數(shù)據(jù)源中的一個數(shù)據(jù)
msg:'<h1>我是一個大大的h1</h1>' //數(shù)據(jù)源會把h1標(biāo)簽渲染成字符串直接顯示.
},
methods:{? //方法源,定義了當(dāng)前vue實例所有可用的方法
show:function(){
alert('Hello')
}
}
})
</script>
2.v-clock的學(xué)習(xí)
在網(wǎng)速慢的時候叽奥，vue庫還未被加載完成，所以標(biāo)簽中的插值表達式{{msg}}還未跟vue的數(shù)據(jù)源取代文搂，
所以頁面會有閃爍，在含有插值表達式的標(biāo)簽內(nèi)添加v-clock
既<p v-clock>{{msg}}</p>中，讓vue庫在加載前捌锭，不讓插值表達式顯示出來。就不會出現(xiàn)閃爍問題罗捎。
3.v-text的學(xué)習(xí)
除了插值表達式{{msg}},還可以用
<h4 v-text="msg"></h4>的形式取代观谦。v-text相比插值表達式的優(yōu)點是沒有閃爍的問題，因為其標(biāo)簽內(nèi)
沒有內(nèi)容桨菜。但是插值表達式可以任意添加其他符號豁状，如
<h4>++++{{msg}}-----</h4>插值表達式只會替代它的占位符，不會把整個元素內(nèi)容清空倒得，而使用v-text
既<h4 v-text="msg">++++++-------</h4>會將數(shù)據(jù)源msg的內(nèi)容完全取代其間的內(nèi)容泻红。
4.v-html的學(xué)習(xí)
? ? 使用插值表達式和v-text時，數(shù)據(jù)源會把h1標(biāo)簽渲染成字符串直接顯示霞掺，既
data:{msg:'<h1>我是一個大大的h1</h1>'},會直接輸出<h1>我是一個大大的h1</h1>谊路。可以使用v-html既
<div v-html="msg2"></div>解決這個問題菩彬。
5.v-bind的學(xué)習(xí)
v-bind是vue中提供的用于綁定屬性的指令缠劝，input標(biāo)簽中的title就是其中的一個屬性，在其前面加上v-bind:既
<input type="button" value="按鈕" v-bind:title="msg" />
告訴其綁定的msg是一個變量骗灶。
注意：v-bind：的簡寫為：惨恭。v-bind中，可以寫合法的JS表達式耙旦。
6.v-on的學(xué)習(xí)
vue中提供了v-on：事件綁定機制脱羡。如果input標(biāo)簽如下
<input type="button" value="按鈕" v-bind:title="msg" id="btn"/>
在傳統(tǒng)的原生js的條件下，需要使用dom操作既
document.getElementById('btn').onclick=function(){alert('Hello')}
而使用v-on指令免都，既
<input type="button" value="按鈕" v-bind:title="msg" v-on:click='show'/>
即可在點擊事件中綁定show事件锉罐，然后在vue對象的方法源中定義show方法即可。
注意：v-on：的縮寫是@：琴昆。
7.事件修飾符的學(xué)習(xí)
由v-on提供的事件修飾符氓鄙。事例如下：
<input type="button" value="" @click.事件修飾符="方法源" />
·stop 阻止冒泡（阻止全部冒泡）
·prevent 阻止默認事件
·capture 添加事件偵聽器時使用事件捕獲模式
·self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時觸發(fā)回調(diào)（只阻止其上對它的冒泡）
·once 事件只觸發(fā)一次
事件修飾符可有多個對v-on進行修飾。如v-on.prevent.once就是只制止一次默認行為业舍，順序不影響結(jié)果抖拦。
8.v-model的學(xué)習(xí)
v-bind和v-on都是單向數(shù)據(jù)綁定。只有v-model是雙向數(shù)據(jù)綁定舷暮。
v-bind和v-on都是從model層修改數(shù)據(jù)态罪，然后同步到頁面既visual層中，數(shù)據(jù)是單向的下面，無法從
visual層中將數(shù)據(jù)傳送給model層复颈。而v-model依介表單元素（用戶交互需要使用表單元素）可以
讓v層的表單對m層進行雙向數(shù)據(jù)更新。代碼如下
<input type="text" style="width: 100%;" v-model="數(shù)據(jù)源msg" />
v-model取代了value屬性的位置沥割。
注意：v-model只能運用在表單元素中（input select checkbox textarea）耗啦。
9.v-for的學(xué)習(xí)
（item in 數(shù)組凿菩，對象，方法）帜讲，類似js的for循環(huán)遍歷數(shù)組或?qū)ο笮乒取Ｍǔ＜釉诒砀駭?shù)據(jù)進行迭代賦值。
注意使用key使他唯一似将。
10.一些循環(huán)查找获黔，數(shù)組遍歷的方法
1.foreach（）方法用于調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)在验。
語法：array.forEach(function(currentValue,index,arr),thisValue)
第一個參數(shù)為必需玷氏，第二個可選。第一個參數(shù)里的第一個參數(shù)為必須腋舌，其他可選盏触。其中currentValue指當(dāng)前元素，index指當(dāng)前元素的索引值侦厚。
arr指當(dāng)前元素所屬的數(shù)組對象耻陕。
例如：
show:function(){
? var newList= []
? this.list.forEach(item => {
if(item.name.indexOf(this.keywords)!=-1){
// 來自keywords實參的疑惑,keywords初始值為空,為什么能把所有值都顯示呢/？
// 領(lǐng)悟:因為空字符串indexof方法放回的是0并不等于-1,也就是空字符串是每個字符串的子集,因此,遍歷數(shù)組,
// 的屬性都能顯示處理.
newList.push(item)
}
? })
? return newList
}
注意：foreach方法沒法被終止
2.some()方法
some可以通過return true停止循環(huán)
3.findIndex()方法
4.filter()方法
es6的新方法刨沦，例
array.filter(item=>{
console.log(item)
})會將array的值一個個輸出到控制臺诗宣。
11.過濾器的學(xué)習(xí)
Vue.js允許自定義過濾器，可被用作一些常見的文本格式化想诅。
過濾器可以用在兩個地方：mustache插值（既插值表達式{{}}中）和v-bind表達式召庞。
過濾器應(yīng)該添加在js表達式的尾部，由管道符|（shift+\）指示来破。實例如下
在body中? ? ? {{name|過濾器的名稱}}
在vue中? ? Vue.filter('過濾器的名稱',function(data){})
過濾器中的function篮灼，第一個參數(shù)已經(jīng)被規(guī)定死，永遠是過濾器管道符前面?zhèn)鬟^來的數(shù)據(jù)
私有過濾器的寫法是在vm實例中添加filter對象
var vm =new Vue({
data:{}
methods:{}
filters:{
過濾器名稱：（回調(diào)函數(shù)）=>{
函數(shù)體
}
}
})
12.一些ES6的新方法
1.PadStart(maxlength,fillstring='')方法或PadEnd(maxlength,fillstring='')方法
這兩個方法可以用來填充字符串徘禁，例如
date.getHours().toString().PadStart(2,'0')
既如果小時數(shù)小于兩位數(shù)诅诱，即在前面加0。
13.自定義按鍵符
像在keyup屬性中有：enter送朱，deleter等常用的按健符娘荡。
可以用@keyup.enter來定義
而F1，F(xiàn)2這些按健符就需要使用js的按健碼來使用驶沼。
而這些按健碼需要記憶炮沐，可能會比較繁瑣，而Vue中提供了一種自定義按健符的屬性
既Vue.config.keyCodes.f2(按健符) = 113(按健碼)
示例是將f2設(shè)置為113按健碼回怜。
之前不能使用@keyup.f2大年，現(xiàn)在就能用了。
14.自定義全局指令
使用 Vue.directive('')定義全局的指令
其中：參數(shù)1：指令的名稱，注意翔试，在定義的時候轻要，指令的名稱前面，不需要加v-前綴
參數(shù)2：是一個對象遏餐，這個對象身上伦腐，有一些指令相關(guān)的函數(shù)，這些函數(shù)可以在特定的階段失都，執(zhí)行相關(guān)的操作
指令定義函數(shù)提供了幾個鉤子函數(shù)bind，inserted幸冻，undate
例如
Vue.directive('focus',{
? 數(shù)據(jù)還在內(nèi)存的時候粹庞，還未渲染到頁面中
bind：function(el,binding){}
el.focus()? //在每個函數(shù)中，第一個參數(shù)洽损，永遠都是el庞溜，表示被綁定了指令的那個元素
這個el參數(shù)，是一個原生的js對象
//第二個參數(shù)binding是一個對象
包含有name碑定，value流码，oldvalue，expression等屬性
name是指令的名稱延刘，value是指令的綁定值(表達式)
expression是綁定值的字符串
? 元素插入到Dom中的時候漫试，會執(zhí)行inserted函數(shù)
inserted：function(el){}
? 數(shù)據(jù)更新的時候，其他都觸發(fā)一次碘赖，update可能會觸發(fā)多次
update：function(el){}
})
注意：Vue中的指令都是以v-開頭
15.定義私有指令
例子如下
var vm =new Vue({
data:{}
methods:{}
directives:{
'指令名稱'：function(el,binding){
函數(shù)體
}
}
}
})
簡寫：如果只需要用到bind喝update鉤子做重復(fù)動作驾荣，可以像下面一樣簡寫
Vue.directive('指令名稱',function(el,binding){
函數(shù)體
})
16.Vue實例的生命周期
創(chuàng)建期間的生命周期函數(shù)：
beforcreate(){}實例剛在內(nèi)存中被創(chuàng)建，還沒初始化
created(){}剛初始data和methods普泡，此時還未編譯模板
beforemount(){}此時完成了模板的編譯播掷，還未掛載到頁面
mounted(){}此時已經(jīng)掛載到頁面
運行期間的生命函數(shù)：
beforeupdate(){}狀態(tài)更新前
update(){}狀態(tài)更新后
銷毀期間的生命函數(shù)：
beforedestroy(){}
destroy(){}
17.vue-resource實現(xiàn)get，post撼班，jsonp請求
除了vue-resourse之外歧匈，還可以使用`axios`的第三方包實現(xiàn)數(shù)據(jù)的請求
vue-resource包需要導(dǎo)入在vue包的后面，因為vue-resource依賴于Vue
測試網(wǎng)址：http://vue.studyit.io/api/getlunbo
vue-resource在vue中掛載了this.$http.get('地址'砰嘁，可選屬性).then(成功的回調(diào)函數(shù))
this.$http.get('http://vue.studyit.io/api/getlunbo'件炉，可選屬性).then(function(result{
console.log(result)
}))
18.JSONP的實現(xiàn)原理
由于瀏覽器的安全性限制，不允許AJAX訪問 協(xié)議不同般码、域名不同妻率、端口號不同的 數(shù)據(jù)接口，瀏覽器認為這種訪問不安全板祝；
用script標(biāo)簽去請求http協(xié)議就不受安全性的限制
例如在<script src="http://192.168.0.1:3000/地址"></script>
使用script的src屬性就可以向服務(wù)器的3000端口請求回想要的腳本宫静，實現(xiàn)跨端口號請求http
19.使用v-resource改進品牌列表
獲取接口：http://www.liulongbin.top:3005/api/getprodlist
添加接口：http://www.liulongbin.top:3005/api/addproduct
刪除接口：this.$http.get("http://www.liulongbin.top:3005/api/delproduct/" + id).then（）
添加時，使用v-resource的post進行傳送，第一個參數(shù)是地址孤里，第二個是數(shù)據(jù)為對象{name:this.name}
第三個是格式{emulateJSON:true}如果result.body的status為0既傳送成功了
這時再調(diào)用ALLlist即可伏伯。
刪除使用get傳id過去即可
20.vue動畫
vue動畫分為了倆個部分，
<style>
一個為
.v-enter-active(進入半場動畫)捌袜， 入場動畫的時間段
一個為v-leave-to(離開半場動畫) 離場動畫的時間段
其中又分為了
.v-enter(進入起始)说搅， 是進入之前，元素的起始狀態(tài)虏等，此時還未進入
.v-enter-to(進入結(jié)束)和
.v-leave(即將離開)弄唧，
.v-leave-to(離開之后) 是動畫離開之后，動畫已經(jīng)結(jié)束
</style>
v-enter(進入起始) = v-leave-to(離開之后)霍衫，v-enter-to(進入結(jié)束)=v-leave(即將離開)
21.使用過渡類名實現(xiàn)動畫
使用vue內(nèi)置函數(shù)transition候引，把需要被動畫控制的元素，包裹起來
在配置兩個css標(biāo)簽來實現(xiàn)動畫效果
<style type="text/css">
//初始狀態(tài)
.v-enter,
.v-leave-to{
opacity: 0;//透明度
transform: translateX(150px);//位移
}
/* 時間段*/
.v-enter-active,
.v-leave-active{
transiton: all 0.8s ease;
/* 第一個參數(shù)是所有指向動畫
第二個參數(shù)是持續(xù)時間
第三個參數(shù)
*/
}
</style>
注意：他們都帶.v-前綴
如果想定義兩個不同的動畫敦跌，在transition標(biāo)簽的屬性name中加入名稱
這時就可用? .你加入的名稱-前綴來區(qū)分澄干，如
<transition name="my"></transition>
則其樣式可以這樣寫
<style type="text/css">
//初始狀
my-enter,
my-leave-to{
opacity: 0;//透明度
transform: translateX(150px);//位移
}/
my-enter.active,
my-leave-active{transiton: all 0.8s ease;}
22.使用第三方類實現(xiàn)動畫
使用animate類來實現(xiàn)動畫，進入其官網(wǎng)就可即使瀏覽效果
使用過度類名實現(xiàn)動畫有很多動畫不能做到柠傍，animate既解決了這個問題
使用如下
在head的引入animate樣式表
<link rel="stylesheet" type="text/css" href="animate.css"/>
然后從其官網(wǎng)挑選出動畫麸俘，如bouncein，bounceout
在transiton標(biāo)簽中加入
<transition
enter-active-class="animated bounceIn"
leave-active-class="animated bounceOut"http://進場動畫和離場動畫都有第三方類庫,引用類名實現(xiàn),記得加基本類名animated
:duration="{enter:200,leave:400}"http://使用duration設(shè)置動畫的時間,毫秒
>
被包裹的動畫元素
</transiton>
23.鉤子函數(shù)實現(xiàn)半場動畫
前面兩種方式都不能實現(xiàn)半場動畫惧笛，使用鉤子函數(shù)進行定義从媚，定義如下
<transition
//這是進入的半場動畫過程
? v-on:before-enter="beforeEnter"
? v-on:enter="enter"
? v-on:after-enter="afterEnter"
? v-on:enter-cancelled="enterCancelled"
//這是離開的半場動畫過程,如果只需進入半場動畫,下面的事件不用添加
? v-on:before-leave="beforeLeave"
? v-on:leave="leave"
? v-on:after-leave="afterLeave"
? v-on:leave-cancelled="leaveCancelled"
</transition>
上面v-on都是動態(tài)綁定了事件，因此需在methods中第一其上的方法徐紧，如下
methods: {
? beforeEnter: function (el) {
el.style.color ="color(red)"
? },
? // 當(dāng)與 CSS 結(jié)合使用時
? // 回調(diào)函數(shù) done 是可選的
? enter: function (el, done) {
? el.offsetTop //這句話沒有實際意義静檬，但它會強制動畫刷新，需添加
el.style.transform="translate(120px,240px)"
el.style.transiton="all 1s ease"
done()
? },
? afterEnter: function (el) {
// ...
? },
? enterCancelled: function (el) {
// ...
? },他們
? 第一個參數(shù)都是el并级，可認為是js中的getelementbyid獲取的js原生dom
注意拂檩，在enter過渡到after-enter的時候會有卡頓，這時需在enter第二個形參添加done嘲碧，里面加done()
實現(xiàn)立即刷新稻励，done是afterenter函數(shù)的引用。
24.列表動畫
? 在實現(xiàn)列表過渡動畫的時候愈涩，由于它不是單個元素望抽，因此不能用transiton進行包裹，
? 要使用tansiton-group標(biāo)簽進行包裹
? 注意：如果要為v-for循環(huán)創(chuàng)建的元素設(shè)置動畫履婉，!!必須為每一個元素設(shè)置：key屬性煤篙。
<style type="text/css">
.v-enter
.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active
.v-leave-active{
transition: all 0.8s ease;
}
.v-move{
transition: all 0.6s ease;
}//這個類名是指文件區(qū)域一有移動就使用這個類
.v-leave-active{
position: absolute;
} //這個是跟v-move一起的固定寫法
</style>
列表漸漸出現(xiàn)的效果，給transiton標(biāo)簽添加appear屬性即可
25.vue中的組件
組件的出現(xiàn)毁腿，就是為了拆分Vue實例的代碼量的辑奈，能夠讓我們以不同的組件苛茂，來劃分不同的功能模塊，將來我們需要什么樣的功能鸠窗，就可以去調(diào)用對應(yīng)的組件即可妓羊；
組件化和模塊化的不同：
+ 模塊化： 是從代碼邏輯的角度進行劃分的；方便代碼分層開發(fā)稍计，保證每個功能模塊的職能單一躁绸；
+ 組件化： 是從UI界面的角度進行劃分的；前端的組件化臣嚣，方便UI組件的重用净刮；
### 全局組件定義的三種方式
1. 使用 Vue.extend 配合 Vue.component 方法：
```
var login = Vue.extend({
? template: '<h1>登錄</h1>'
});
Vue.component('login', login);
```
2. 直接使用 Vue.component 方法：
```
Vue.component('register', {
? template: '<h1>注冊</h1>'
});
```
3. 將模板字符串，定義到script標(biāo)簽種：
```
<script id="tmpl" type="x-template">
? <div><a href="#">登錄</a> | <a href="#">注冊</a></div>
</script>
```
同時茧球，需要使用 Vue.component 來定義組件：
```
Vue.component('account', {
? template: '#tmpl'
});
```
> 注意： 組件中的DOM結(jié)構(gòu)庭瑰，有且只能有唯一的根元素（Root Element）來進行包裹！
26.組件中的數(shù)據(jù)和方法
組件的data和實例的data有點不一樣抢埋，實例中的data可以為一個對象，但是組件中的data必須是一個方法
組件中的data除了必須為一個方法外督暂，這個方法內(nèi)部還必須返回一個對象才行揪垄；
Vue.component('組件名稱',{
template:'<h1>這是一個組件</h1>',
data:function(){
return {
msg:'這是組件自己定義的數(shù)據(jù)'
}
},
//為什么要將數(shù)據(jù)data做成方法來返回呢？因為當(dāng)引用多次組件時逻翁，能做到數(shù)據(jù)不指向同一個對象饥努。
methods:{
functionName(){}
}
})
27.組件的切換
使用v-if和v-else屬性，用點擊事件使得flag變換八回，可做到
也可使用Vue自帶的標(biāo)簽<component :is="tagName"></component>將tagName替換成想要展示的組件名即可
例如：
{
<a href="" @click.prevent='tagNmae=login'></a>
<a href="" @click.prevent='tagNmae=register'></a>
<component :is="tagName"></component>
</body>
<script type="text/javascript">
Vue.component('login',{
template:'<h3>這是登陸組件</h3>'酷愧，
})
Vue.component('register',{
template:'<h3>這是注冊組件</h3>'，
})
var vm =new Vue({
el:'app',
date:{
tagName:'login'
}
})
</script>
28.組件切換銜接動畫
動畫標(biāo)簽<transition></transition>中有個屬性mode缠诅，
將其value設(shè)置成out-in就可實現(xiàn)先出后進的效果
29. 父組件給子組件傳值溶浴，傳方法
父組件可以在引用子組件的時候，通過屬性綁定的形式管引，把需要傳遞給子組件的數(shù)據(jù)士败，以屬性
綁定的形式，傳遞到子組件內(nèi)部褥伴，給子組件使用
例如
<div id="app">
<com1 v-bind:parentmsg='msg'></com1>
</div>
{
el："#app"
data:{msg:'123 啊-父組件中的數(shù)據(jù)'}
methods:{}
components:{
com1:{
template:'<h1>這是一個子組件 --- {{parentmsg}}</h1>',
props:['parentmsg']
}
}
//父組件傳遞過來的自定義parentmsg屬性谅将，需要先在props數(shù)組中定義一下。
}
注意：props中的數(shù)據(jù)都是只讀的重慢。
父組件給子組件傳方法跟傳數(shù)據(jù)大致一樣饥臂，其最大的區(qū)別就是
1.使用V-on事件綁定機制來傳遞方法，而不是數(shù)據(jù)綁定V-bind
2.調(diào)用時似踱，不需在類似props數(shù)組中在定義一下隅熙，而是使用自身定義的方法使用this.$emit()方法來調(diào)用
<div id="app">
<com2 @func='show'></com2>//func是自己定義的方法名
</div>
{
el："#app"
data:{}
methods:{
show(){
console.log('這是父組件的方法')
}}
components:{
com2:{
template:'<input type="button" value="這是子組件按鈕,點擊觸發(fā)父組件的方法" @click="myclick"/>'稽煤，
methods:{
myclick(){
//emit的英文原意是觸發(fā)，發(fā)射猛们，調(diào)用的意思
this.$emit('func'念脯，第二個參數(shù))//觸發(fā)調(diào)用過來的func方法，第二個參數(shù)是調(diào)用過來弯淘，你要添加的參數(shù)
}}}}}
使用第二個參數(shù)就能實現(xiàn)子組件向父組件進行傳值
此時數(shù)據(jù)已經(jīng)從子組件傳到父組件
show(data){
console.log(data)//就輸出子組件的數(shù)據(jù)
}
30.localStorage
localStorage.getItem('對象名或文件名绿店？' || '[]' ) //避免取數(shù)據(jù)時，無數(shù)據(jù)會報錯庐橙，使用[]避免報錯
使用JSON.parse(localStorage.getItem('對象名或文件名假勿？' || '[]' ))將其轉(zhuǎn)化為對象
獲取來的對象賦值給list，在調(diào)用localStorage.setItem('cmts',JSON.stringify(要存儲的對象))
既將對象存入localstorage了
31.$ref獲取DOM元素
vue中不提倡調(diào)用DOM态鳖，那你vue就得提供的方法讓我獲取dom函數(shù)
在標(biāo)簽添加屬性ref转培，就可在vue實例創(chuàng)建ref元素
使用this.$refs.ref屬性值.innerText就可獲取元素
ref英語是reference
如下
<h3 ref='myh3'></h3>
console.log(this.$refs.mth3.innerText)
當(dāng)有多個標(biāo)簽有ref屬性時，refs是一個數(shù)組
組件也可獲取
32.vue路由導(dǎo)航守衛(wèi)
router.beforEach((to,from,next)=>{
//1.to是將要訪問的網(wǎng)站? ? ? 2.from是表示從那個路徑來的 3.next()表示放行? next('/home')表示強制跳轉(zhuǎn)
if(to.path='/login') return next()? ? ? //表示要去login路徑時浆竭，放行
var tokenStr = window.sessionstorage.getItem('token')? ? //獲取token
if（浸须！tokenStr）return next('/login')? ? ? //如果沒有token，強制跳轉(zhuǎn)到登錄頁
next（）? ? ? //有token就直接放行
})
33.退出功能
window.sessionstorage.clear()? ? //清除token
this.$router.push('/login')? ? ? ? //強制跳轉(zhuǎn)到登錄頁
