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

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

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

列表渲染

廢話不多說，直接上代碼：


    
        {{ item }}

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

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

HTML的部分，也可以用v-text來代替大胡子語法：

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

事件監(jiān)聽

先做一個簡單的例子：點擊按鈕之后alert。

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

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

要記得v-bind的簡寫是:class，用的冒號，但是v-on用的是@，像@click這樣。

最后我們把這兩個新知識合并到一起，做一個可以讓用戶通過輸入文字來新增列表項的列子吧。


    
        {{ item }}

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

最后是完成后的效果：

這期就到這里，敬請期待下一期：計算屬性。

寫在最后

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

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

GPU云服務器云服務器 Part-2 vue條件渲染監(jiān)聽事件事件監(jiān)聽

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81317.html

Vue 2 | 基礎API系列文章合集

摘要：在大家的鞭策和鼓勵下，這個基礎的系列終于完成了。關于更新的頻率，因為是我自己一個人在做，文案視頻都準備好了才發(fā)的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因為公司放假了。不過月份的更新速度真的不能保證，抱歉。在大家的鞭策和鼓勵下，這個基礎API的系列終于完成了。所幸是沒有真的更到一百期才完結（笑）。最初是因為覺得錄視頻好玩，才挖的這個坑。也想過中途放棄，關掉專欄，但由于...

instein 2019-08-20 14:00 評論0 收藏0
VUE - MVVM - part12 - props

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

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

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

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

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

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

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

MartinDai 2019-08-20 13:58 評論0 收藏0