Vue 2 | Part 5 列表渲染和事件監聽

以前在vue裏面綁定數據，都只是單個地綁定。這期咱們來看一下怎樣渲染列表，而後經過事件監聽方法往列表裏面增長item。

列表渲染

廢話很少說，直接上代碼：

<div id="app">
    <ul>
        <li v-for="item in list">{{ item }}</li>
    </ul>
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            list: [
                '星際牛仔',
                '攻殼機動隊',
                'Blassreiter',
                '鴉KARAS',
                '黑之契約者'
            ]
        }
    });
</script>

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

惟一須要注意的是，給v-for的值是<item> in <list>的形式。很容易就直接寫v-for="list"了。

HTML的部分，也能夠用v-text來代替大鬍子語法：

<div id="app">
    <ul>
        <!-- <li v-for="item in list">{{ item }}</li> -->
        <li v-for="item in list" v-text="item"></li>
    </ul>
</div>

其實也能夠直接循環數字，雖然好像實際中會這樣用的機會不大：

<div id="app">
    <ul>
        <li v-for="item in count" v-text="item"></li>
    </ul>
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            count: 10
        }
    });
</script>

事件監聽

先作一個簡單的例子：點擊按鈕以後alert。

Vue的事件監聽，使用的是v-on指令，後面跟的就是須要監聽的事件。

<div id="app">
    <button class="btn btn-success" v-on:click="clickMe">點擊我吧，主人！</button>
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            count: 10
        },
        methods: {
            clickMe: function () {
                alert('感覺到了主人的點擊！')
            }
        }
    });
</script>

在頁面監聽用戶交互事件是很是經常使用的，可是若是每次都要寫v-on，就會很繁瑣了，因此vue也爲咱們準備好了簡寫方法：

<button class="btn btn-success" @click="clickMe">點擊我吧，主人！</button>

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

最後咱們把這兩個新知識合併到一塊兒，作一個可讓用戶經過輸入文字來新增列表項的列子吧。

<div id="app">
    <ul>
        <li v-for="item in list">{{ item }}</li>
    </ul>

    <div class="input-group">
        <input type="text" class="form-control" v-model="userInput">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" @click="addItem">增長</button>
        </span>
    </div>        
</div>

<!-- ... ... -->

<script type="text/javascript">
    var userInput = ''
    var app = new Vue({
        el: '#app',
        data: {
            list: [
                '星際牛仔',
                '攻殼機動隊',
                'Blassreiter',
                '鴉KARAS',
                '黑之契約者'
            ],
            userInput: userInput
        },
        methods: {
            addItem: function () {
                this.list.push(this.userInput)
                this.userInput = ''
            }
        }
    });
</script>

這裏須要特別講的，也許就只有this了。this指的實際上是咱們建立的這個vue實例，也就是app。在vue-devtools裏面能夠看到（在console裏面log一下app也能夠找到，因爲圖片會太長，這裏就不展現了）：

最後是完成後的效果：

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

寫在最後

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

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