Vue 2 | Part 5 列表渲染和事件監(jiān)聽

Nekron 發(fā)布于2019-08-20 13:55 / 935人閱讀

之前在vue里面綁定數(shù)據(jù)，都只是單個(gè)地綁定。這期我們來(lái)看一下怎樣渲染列表，然后通過(guò)事件監(jiān)聽方法往列表里面增加item。

列表渲染

廢話不多說(shuō)，直接上代碼：


    
        {{ item }}

直接看效果，可見v-for循環(huán)了一遍list，把其中的每一項(xiàng)都綁定到li中去：

唯一需要注意的是，給v-for的值是 in 的形式。很容易就直接寫v-for="list"了。

HTML的部分，也可以用v-text來(lái)代替大胡子語(yǔ)法：

其實(shí)也可以直接循環(huán)數(shù)字，雖然好像實(shí)際中會(huì)這樣用的機(jī)會(huì)不大：

事件監(jiān)聽

先做一個(gè)簡(jiǎn)單的例子：點(diǎn)擊按鈕之后alert。

Vue的事件監(jiān)聽，使用的是v-on指令，后面跟的就是需要監(jiān)聽的事件。

在頁(yè)面監(jiān)聽用戶交互事件是非常常用的，但是如果每次都要寫v-on，就會(huì)很繁瑣了，所以vue也為我們準(zhǔn)備好了簡(jiǎn)寫方法：

要記得v-bind的簡(jiǎn)寫是:class，用的冒號(hào)，但是v-on用的是@，像@click這樣。

最后我們把這兩個(gè)新知識(shí)合并到一起，做一個(gè)可以讓用戶通過(guò)輸入文字來(lái)新增列表項(xiàng)的列子吧。


    
        {{ item }}

這里需要特別講的，也許就只有this了。this指的其實(shí)是我們創(chuàng)建的這個(gè)vue實(shí)例，也就是app。在vue-devtools里面可以看到（在console里面log一下app也可以找到，由于圖片會(huì)太長(zhǎng)，這里就不展示了）：

最后是完成后的效果：

這期就到這里，敬請(qǐng)期待下一期：計(jì)算屬性。

寫在最后

源碼地址：https://github.com/levblanc/v...

視頻攻略：小的不才，為求一贊，自制本期視頻攻略在此。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/81317.html

相關(guān)文章

Vue 2 | 基礎(chǔ)API系列文章合集

摘要：在大家的鞭策和鼓勵(lì)下，這個(gè)基礎(chǔ)的系列終于完成了。關(guān)于更新的頻率，因?yàn)槭俏易约阂粋€(gè)人在做，文案視頻都準(zhǔn)備好了才發(fā)的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因?yàn)楣痉偶倭?。不過(guò)月份的更新速度真的不能保證，抱歉。在大家的鞭策和鼓勵(lì)下，這個(gè)基礎(chǔ)API的系列終于完成了。所幸是沒有真的更到一百期才完結(jié)（笑）。最初是因?yàn)橛X得錄視頻好玩，才挖的這個(gè)坑。也想過(guò)中途放棄，關(guān)掉專欄，但由于...

instein 2019-08-20 14:00 評(píng)論0 收藏0
VUE - MVVM - part12 - props

摘要：看這篇之前，如果沒有看過(guò)之前的文章，移步拉到文章末尾查看之前的文章。而該組件實(shí)例的父實(shí)例卻并不固定，所以我們將這些在使用時(shí)才能確定的參數(shù)在組件實(shí)例化的時(shí)候傳入。系列文章地址優(yōu)化優(yōu)化總結(jié) 看這篇之前，如果沒有看過(guò)之前的文章，移步拉到文章末尾查看之前的文章。前言在上一步，我們實(shí)現(xiàn) extend 方法，用于擴(kuò)展 Vue 類，而我們知道子組件需要通過(guò) extend 方法來(lái)實(shí)現(xiàn)，我們從測(cè)試?yán)?..

bluesky 2019-08-22 17:07 評(píng)論0 收藏0
VUE - MVVM - part4 - 優(yōu)化Watcher

摘要：關(guān)于中的的實(shí)現(xiàn)，差不多也就這樣了，當(dāng)然這僅僅是基礎(chǔ)的實(shí)現(xiàn)，而且視圖層層渲染抽象成一個(gè)函數(shù)。不同于中的實(shí)現(xiàn)，這里少了很多各種標(biāo)記和應(yīng)用標(biāo)記的過(guò)程。看這篇之前，如果沒有看過(guò)之前的文章，可拉到文章末尾查看之前的文章。回顧首先我們思考一下截止當(dāng)前，我們都做了什么通過(guò) defineReactive 這個(gè)函數(shù)，實(shí)現(xiàn)了對(duì)于數(shù)據(jù)取值和設(shè)置的監(jiān)聽通過(guò) Dep 類，實(shí)現(xiàn)了依賴的管理通過(guò) Wa...

CoffeX 2019-08-22 16:17 評(píng)論0 收藏0
Vue 2 | Part 4 v-bind綁定元素屬性和樣式

摘要：它可以往元素的屬性中綁定數(shù)據(jù)，也可以動(dòng)態(tài)地根據(jù)數(shù)據(jù)為元素綁定不同的樣式。綁定屬性最簡(jiǎn)單的例子，我們有一張圖片，需要定義圖片的。注意樣式的寫法跟會(huì)有些許不同，橫杠分詞變成駝峰式分詞。這期就到這里，敬請(qǐng)期待下一期列表渲染和事件監(jiān)聽。這期跟大家分享的，是v-bind指令。它可以往元素的屬性中綁定數(shù)據(jù)，也可以動(dòng)態(tài)地根據(jù)數(shù)據(jù)為元素綁定不同的樣式。綁定屬性最簡(jiǎn)單的例子，我們有一張圖片，需要定...

vboy1010 2019-08-20 13:51 評(píng)論0 收藏0
Vue 2 | Part 8 組件通信

摘要：實(shí)例和組件之間的通信先來(lái)看一下我們最后要完成的效果吧。在組件的內(nèi)部監(jiān)聽到用戶的事件后，執(zhí)行自身的方法，把信號(hào)發(fā)布出去。所以可以直接把實(shí)例作為一個(gè)，在組件之間進(jìn)行通信。比方說(shuō)，我們希望點(diǎn)擊按鈕以后，另外一個(gè)組件可以接收到這個(gè)信號(hào)。當(dāng)組件監(jiān)聽到用戶的行為，需要觸發(fā)一些界面交互的時(shí)候，實(shí)例與組件之間、組件相互之間就需要進(jìn)行通信了。Vue里面有兩個(gè)api可以幫助我們輕松地完成這件事，它們是$...

MartinDai 2019-08-20 13:58 評(píng)論0 收藏0