2018年11月4日
最近面試比較多阴挣，也算是喪了有點(diǎn)久了断序，終于打開了vue的官方文檔，看的比較慢做個總結(jié)拆挥。
0.Vue對象
開始之前自然需要創(chuàng)建一個Vue對象
var app=new Vue({
el:'#app',
data:{
message:'hello,world'
}
}
})
el所指的是需要綁定的元素樟插，data則是申明的變量
1.v-bind
v-bind指令可縮寫為“：”，已接觸的有
:title:顯示提示信息
:style:樣式
2.v-if
v-if指令用于判斷竿刁，根據(jù)判斷的結(jié)果決定元素是否存在于頁面上黄锤，可配合v-else ,v-else if等指令使用。并且這些標(biāo)簽需要以連續(xù)的狀態(tài)存在食拜。
3.v-on
v-on指令的作用是監(jiān)聽事件鸵熟，可簡寫為@，例如@click,@mouseover等等
4.v-for
v-for字面意思嘛负甸，循環(huán)流强，可以輸出的是數(shù)組，對象等呻待。
<span v-for='item in items'>{{item}}</span>
5.v-model
v-model用于數(shù)據(jù)的雙向綁定
<input>{{msg}}</input>
<p v-model='msg'></p>
6.v-once
v-once指令會使標(biāo)簽中的數(shù)據(jù)不再程序動態(tài)修改
7.v-html
v-html指令對標(biāo)簽內(nèi)Html做轉(zhuǎn)義
8.v-show
v-show指令會根據(jù)指定的條件隱藏或顯示頁面元素
9.v-show與v-if
兩者都能通過邏輯判斷來隱藏/顯示元素打月，但它們存在一些差異
不管判斷結(jié)果是什么，v-show指令都會加載該頁面元素蚕捉，并且將其隱藏是使用的display:none
v-if隱藏的元素實(shí)際上并不是隱藏奏篙，打開網(wǎng)頁源代碼會發(fā)現(xiàn)原有的元素被注釋掉了，也就是說迫淹，v-if會讓這個頁面元素不存在秘通。
10.組件
使用component申明模板化的組件
<ol>
<todo-item v-for="list in List" v-bind:todo="list" :key="list.id"></todo-item>
</ol>
//-------------------------script----------------------------------------
Vue.component("todo-item",{
props:['todo'],
template:"<h6 class='h6Style'>{{todo.text}}</h6>"
})
11.數(shù)據(jù)綁定
Vue框架的操作都是基于數(shù)據(jù)的而不再是基于Dom，在元素里可以使用變量名來動態(tài)修改數(shù)據(jù)敛熬，這種操作就被叫做數(shù)據(jù)綁定
雙向綁定則是指標(biāo)簽與數(shù)據(jù)綁定肺稀，而頁面上還存在著其他的數(shù)據(jù)與該數(shù)據(jù)v-model綁定，這樣就形成了雙向綁定应民，任意一個標(biāo)簽導(dǎo)致的變量值的變化都會使所有綁定該變量的標(biāo)簽中的值變化（好繞口话原。。诲锹。）
