因為Vue是一個構(gòu)造函數(shù) 所以使用的時候要通過new的方式進行使用
Vue這個構(gòu)造函數(shù)參數(shù)是一個配置項options,基本屬性如下
options:
el:掛載點
data:當(dāng)前Vue所需要的一些屬性 (當(dāng)前組件所需要的狀態(tài))
v-text:
作用是用來渲染數(shù)據(jù)和執(zhí)行一些js語法
底層原理為innerText烘贴，不會解析標(biāo)簽
簡寫:{{}}
v-text:在加載的時候不會出現(xiàn){{}}
{{}}:在加載的時候會出現(xiàn){{}}紧显，可以用v-cloak解決
v-html:
用來渲染數(shù)據(jù)和執(zhí)行一些js語法
可以用來解析HTML標(biāo)簽
簡寫:{{{}}} 僅限于Vue1.0 后期被廢除掉了
v-show:
值:布爾值 true顯示 false隱藏
通過display來控制元素的顯示和隱藏
v-if:
值:布爾值 true顯示 false隱藏
通過刪除元素和創(chuàng)建元素控制元素的顯示和隱藏
v-if v-else-if v-else三者順序不能變闷盔，中間也不能有其他語句
v-if/v-show二者之間的區(qū)別：
1、v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換拆火，則使用 v-show 較好；如果在運行時條件很少改變涂圆，則使用 v-if 較好
2们镜、使用場景
頻繁切換的時候用v-show 例如選項卡
登錄與非登錄頁面 VIP與非Vip
權(quán)限頁面
v-for:
數(shù)組 對象 字符串 數(shù)字
語法：v-for="(值,下標(biāo)) in 需要遍歷的數(shù)據(jù)"
<p v-for="(item,index) in arr">{{item}} ------{{index}}</p>
<p v-for="(value,key) in obj">{{value}}----{{key}}</p>
<p v-for="(item,index) in str">{{item}}----{{index}}</p>
<p v-for="(item,index) in 10">{{item}}----{{index}}</p>
v-bind:
語法：v-bind:屬性="值"
簡寫： :屬性="值"
href
src
title
style
自定義屬性
class
v-on:
語法： v-on:事件名稱="事件函數(shù)"
簡寫：@事件名稱="事件函數(shù)"
methods中以對象形式存放Vue所需要的一些事件
methods中如果需要訪問data中的屬性則通過this.屬性名稱即可
修飾符:
輔助一些事件 阻止事件冒泡 阻止瀏覽器的默認事件等等
語法： @事件名稱.修飾符 = "事件函數(shù)"
一個事件后面可以跟多個修飾符 @事件名稱.修飾符.修飾符.修飾符.... = "事件函數(shù)"
常見的修飾符：
.stop:阻止事件冒泡
.prevent:阻止瀏覽器默認行為
.once:事件只處發(fā)一次
.enter:回車
關(guān)于事件對象：
默認情況下如果事件函數(shù)不需要傳遞參數(shù)的時候可以不加() 然后可以將methods中的函數(shù)里通過e來獲取到事件對象
如果需要傳遞參數(shù)的時候我們需要給事件函數(shù)加上()
然后給這個函數(shù)傳遞一個$event參數(shù)
這樣就可以拿到事件對象了
v-model:
流程：當(dāng)輸入框的數(shù)據(jù)發(fā)送改變的時候就會修改data中相對應(yīng)的數(shù)據(jù)
當(dāng)data中的數(shù)據(jù)發(fā)生了改變一會視圖層也會跟隨著發(fā)生改變(數(shù)據(jù)驅(qū)動視圖)
使用的場景：只能在表單元素中進行使用
computed:
通過屬性計算而得來的屬性
注意：
1、computed內(nèi)部的函數(shù)名稱可以隨意編寫
2润歉、computed內(nèi)部的函數(shù)必須通過return的方式將結(jié)果進行返回模狭，最好不要在內(nèi)部進行賦值操作
3、雖然computed內(nèi)部是以函數(shù)的方式進行編寫卡辰，但是在調(diào)用的時候并不是一個函數(shù)胞皱，所以不需要加()
4、只要函數(shù)內(nèi)部所依賴的屬性發(fā)生了改變九妈，那么這個函數(shù)就會自己調(diào)用
5反砌、如果函數(shù)內(nèi)部所依賴的屬性沒有發(fā)生改變的時候computed會從緩存中讀取結(jié)果
總結(jié)：computed中的方法都是依賴于Vue中data里面的屬性，如果屬性發(fā)生了改變那么computed中所對應(yīng)的函數(shù)就會去執(zhí)行
使用的場景：當(dāng)多個屬性影響一個屬性的時候我們就需要用到computed( 購物車)
VUE的實例方法
vm.$on:事件綁定
作用: 將事件綁定后放入事件隊列中
參數(shù)1:事件名稱
參數(shù)2：事件函數(shù)
vm.$emit:事件觸發(fā)
作用：觸法事件隊列中的所有事件
參數(shù)1：事件名稱
參數(shù)2：需要傳遞的參數(shù) 選填
vm.$off:事件解綁
作用：將事件隊列中的事件移除
參數(shù)1：事件名稱
參數(shù)2：需要解綁的事件函數(shù) 選填
vm.$once:事件綁定
作用:該事件只觸發(fā)一次
參數(shù)1:事件名稱
參數(shù)2：事件函數(shù)
