學習Vue.js的五個小例子

前言

最近在學習vue.js，學着寫了幾個小例子，本身記錄一下，例子都比較簡單，但願給初學vue.js的小夥伴一些參考。

雙向數據綁定

點擊查看

數據綁定是vue.js的基礎。本例中就是利用了vue.js的v-model指令在表單元素上建立雙向數據綁定。

<!--這是咱們的View-->
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>

<script>
    // 這是咱們的Model
    new Vue({
        el: '#app',
        data: {
            message:'Hello World!'
        }
    })
</script>

將message綁定到文本框，當更改文本框的值時，<p>{{ message }}</p> 中的內容也會被更新。

導航切換

點擊查看

這裏主要應用了vue.js的v-for指令來渲染一個列表、v-bind指令來綁定class以及v-on指令來處理事件

即時搜索

連接描述

這個例子主要應用了vue.js的自定義過濾器，能夠經過Vue.filter()註冊一個全局過濾器，具體用法能夠參考這裏，vue.js也提供了一些內置過濾器。

佈局轉換

連接描述

本例應用了vue.js的v-if指令進行了條件渲染，以及v-bind綁定class和v-on處理事件

合計總價

連接描述

這個例子相似購物車那種選中合計總價的功能，也是對各類指令以及數據綁定的綜合應用吧。

後記

文章可能比較簡單，只是分享了幾個小例子，沒有對vue.js的用法進行詳細說明，你們能夠看官方文檔。有時間後面我也會分享更多vue.js的學習筆記。
參考資料
vue.js中文文檔
五個小案例帶你學習火熱的Vue.js