1、列表渲染
①?? v-for? — 根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染;
語法: value,key in items
?????????? value,key of items
如:v-for =? “item in items”???? items指源數(shù)據(jù)數(shù)組; item指數(shù)組元素的每一項(xiàng)
②?? 變異方法 — vue提供了一組方法對(duì)數(shù)組進(jìn)行操作時(shí)候會(huì)觸發(fā)視圖更新
push();? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? splice();
shift();? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? sort();
unshift();? ? ? ? ? ? ? ? ? ? ? ? ??? reverse();
2、事件處理器
1、v-on — 用來監(jiān)聽DOM事件觸發(fā)代碼;
語法:v-on:eventName=“eventHandle”;
事件處理函數(shù)寫在methods中統(tǒng)一管理;
事件對(duì)象($event)在事件處理函數(shù)中獲取,內(nèi)聯(lián)事件處理函數(shù)執(zhí)行傳入事件對(duì)象;
注意:
① 當(dāng) v-on:eventName=“eventHandle(abc)”;函數(shù)名加括號(hào)傳參時(shí),如 eventHandle(ev){},ev不是事件對(duì)象而是傳入的參數(shù);如果還需要事件對(duì)象需要手動(dòng)添加,如v-on:eventName=“eventHandle(abc,$event)eventHandle(message,ev){}
② 事件處理函數(shù)中的this指向的是當(dāng)前這個(gè)根實(shí)例;
3、事件修飾符
事件處理函數(shù)只是純粹的邏輯判斷,不處理DOM事件的細(xì)節(jié),例如阻止冒泡、取消默認(rèn)行為、判斷按鍵等
① 修飾符的位置? v-on:eventName.修飾符?? 通過由點(diǎn)(.)表示的指令后綴來調(diào)用修飾符;
② 修飾符
.shop??? // 阻止冒泡 ????????????????????????????????? .prevent?????? // 取消默認(rèn)行為
.capture?????????????????????????????????????????????????? .self
.once?? // 執(zhí)行一次
按鍵修飾符
.space?????????????????????????????????????????????????????? .up
.down??????????????????????????????????????????????????????? .left
.right???????????????????????????????????????????????????????? .esc
.enter???? ? //回車 ?????????????????????????????????????? .tab
.delete?????????????????????????????????????????????????????? .alt
.shift????????????????????????????????????????????????????????? .meta
.鍵位
4、條件渲染
v-show 指令 — 根據(jù)表達(dá)式的值,用來顯示和隱藏元素;
語法:v-show=“表達(dá)式”;
元素會(huì)被渲染在頁面中,中根據(jù)表達(dá)式的值進(jìn)行css的切換;
5、動(dòng)態(tài)class(動(dòng)態(tài)綁定class)
class為元素的屬性,也可以使用v-bind:class
語法:? : class=“{className:表達(dá)式}”;
注意:表達(dá)式的值為true,添加className;表達(dá)式的值為false,不添加className;
:class=“[className,classname]”;
???