vue初探-簡易留言板

學完vue的基礎語法以後，練手一下，從最基本的留言板開刀吧。功能很少，主要爲了熟悉vue的基礎語法使用。詳細vue教程請移步vue.js 2.0

技術框架

1.vue.js 2.0

2.bootstrap

語法概述

這裏只寫一點此例子用到的一些語法知識，詳細API請移步：vue 2.0 api

@click: 綁定點擊事件 @ 是v-on:的縮寫

v-model: 在表單控件或者組件上建立雙向綁定

v-show: 根據表達式之真假值，確實是否顯示

v-for：循環顯示列表

:class: 綁定class, : 是v-bind:的縮寫

// vue 基礎模板
var app = new Vue({
    el: '#app', // 綁定的DOM，vue在此DOM內生效
    data: { // 綁定的數據
        msg: 'message'
    },
    watch: { // 監聽變化
        msgs: {
            // TODO...
        }
    },
    methods: { // 事件方法
        addMsg: function () {

        },
        ...
    }
})

實現思路

1.利用localStorage實現本地存儲

這裏借鑑了官網的todoMVC例子中思路，封裝一個msgStorage對象，進行讀取和存儲數據
用的時候轉換成JSON對象，存的時候是JSON格式的字符串。

2.增長留言、清空留言功能

這裏對留言列表進行了監聽，監聽Vue實例中的msgs變化後，更新localStorage中msgs，同時更新列表，當執行增長和刪除時更新Vue實例中的msgs

寫在後面

可能敘述中有錯誤的地方，歡迎指正，交流~，最後附上demo地址http://fehey.com/Vue-items/ms... ,源碼：https://github.com/EryouHao/V...