渲染、事件處理器和class綁定_03章

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]”;

???

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,074評(píng)論 0 29
  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨(dú)立版本,Vue即被注冊為全局變量,可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,074評(píng)論 4 129
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:var data = { a:...
    云之外閱讀 2,241評(píng)論 0 6
  • 名稱 libev - 一個(gè) C 編寫的功能全面的高性能事件循環(huán)。 概要 示例程序 關(guān)于 libev Libev 是...
    hanpfei閱讀 15,380評(píng)論 0 5
  • 初讀《有味》,源于一位很有才學(xué)的朋友推薦,她說《有味》寫了一種洞悉與悲憫的愜意,有味道的人生也是把平凡生活變得有趣...
    月落烏起閱讀 192評(píng)論 0 1