1.文本:{{msg}}不會(huì)解析標(biāo)簽? 等于v-text;v-html會(huì)解析標(biāo)簽
2.事件對(duì)象:event,不加括號(hào)就認(rèn)為是事件對(duì)象庶骄,加括號(hào)要么傳參不傳就是underfined
3.默認(rèn)事件:@click.prevent
js中阻止默認(rèn)事件:event.preventDefault()??? window.event.returnValue=false;
4.事件冒泡:@click.stop
?Js中阻止事件冒泡:event.cancleBubble()?? event.stopPropagation()
5.修飾符:事件~,按鍵~捌显,系統(tǒng)~(不常用)
@keyup.enter ||@keyup.13?? //鍵盤按下回車執(zhí)行
6.綁定屬性:v-bind適用于img的src屬性呀伙,或組件間的傳值
當(dāng)屬性時(shí)變量時(shí)使用? v-bind:text=””
7.class綁定:
對(duì)象語(yǔ)法:? :class=’{active:true}’
數(shù)組語(yǔ)法:?? :class=”[key1,key2]”
8.style 綁定
對(duì)象語(yǔ)法:? :style=’{clolr:#000,font-size:10px}’ ||或者等于一個(gè)寫好的樣式對(duì)象
數(shù)組語(yǔ)法:?? :class=”[obj1,obj2…]”
9.條件判斷:v-if??? v-else-if???v-else
v-show=”? ”??v-show=”!? ”
v-if 執(zhí)行時(shí)顯示其余不執(zhí)行,初識(shí)條件為假,則什么都不做日丹,知道條件為真,改變較少時(shí)用v-if
v-show:條件都渲染蚯嫌,只是把不滿足條件的display:none;初始就渲染哲虾,需要頻繁切換時(shí)用
10.循環(huán)遍歷:v-for
v-for=(item,index)of/in list? :key=”唯一性的值”??? //其中items是源數(shù)據(jù)數(shù)組,而item則是被迭代的數(shù)組元素的別名
可遍歷數(shù)組對(duì)象字符串
v-for的優(yōu)先級(jí)高于v-if
11.數(shù)據(jù)更新檢測(cè):? .push最有一位增?? .unshift最前加 .shift最前變刪
12.表單輸入
特殊:checkbox:初始偽數(shù)組是多選择示,是布爾值為單選
修飾符:.lazy會(huì)車時(shí)做接下來的事情
.trim去除空格?????? .number轉(zhuǎn)數(shù)值
1.計(jì)算屬性:根據(jù)某一值去衍生另一個(gè)值束凑,具有依賴性
?? Computed:{fn(){reyurn value}},用的時(shí)候不加括號(hào)
2.方法調(diào)用:methods:{
fn(){reyurn value}},計(jì)算屬性優(yōu)于方法調(diào)用
3.偵聽屬性:watch:{fn(new,old){
}}計(jì)算屬性優(yōu)于偵聽屬性
4.生命周期鉤子函數(shù)
初始化階段:beforeCreate(),created(),beforeMount(),mounted()
運(yùn)行時(shí)階段:beforeUpdate()
,updated()
摧毀階段:beforeDestroy()
,destroyed()
在created()或mounted()中請(qǐng)求數(shù)據(jù),如果必須使用dom操作可以再mounted或者update
5.fetch數(shù)據(jù)請(qǐng)求,可直接使用栅盲,不需要引用
Fetch(url).then(res=>res.json).then()返回的是promise對(duì)象汪诉,需要轉(zhuǎn)成json
6.axios請(qǐng)求,自動(dòng)轉(zhuǎn)成json數(shù)據(jù)
Asios.get().then
Axios.post(url,{數(shù)據(jù)對(duì)象}).then()
7.組件:也是Vue的一個(gè)實(shí)例谈秫,全局注冊(cè)和局部注冊(cè)
步驟:定義組件:const
myhead={template:’<header>header<header>’
全局注冊(cè)組件:
使用組件:<myheader><myheader>
局部注冊(cè)組件: