vue初探-簡易留言板

GHOST_349178 發布于2019-08-20 12:04 / 2500人閱讀

摘要：學完的基礎語法之后，練手一下，從最基本的留言板開刀吧。功能不多，主要為了熟悉的基礎語法使用。

學完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...

云服務器 GPU云服務器 js簡易留言板實現初探webrtc webrtc技術初探初探騰訊云存儲網關

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80783.html

Vue初探——Vue是什么

摘要：還是由于幫我們省略了操作，加上雙向數據綁定，的代碼量減少很多，大概還是要看具體項目。其中元素賦值和加事件又需要獲取元素和更元素賦值，也就是這個原因代碼量才會增加。本文代碼下載地址概述前端開發近況需求依然旺盛，從JavaScript已經在編程語言排行榜上排到了第七位和前端聘崗位數就可以看出。加入前端開發的新手越來越多，其中女孩子比例不少，自學能力稍有匱乏前端框架層出不窮，部...

littlelightss 2019-08-21 15:20 評論0 收藏0
Vue初探——Vue是什么

摘要：還是由于幫我們省略了操作，加上雙向數據綁定，的代碼量減少很多，大概還是要看具體項目。其中元素賦值和加事件又需要獲取元素和更元素賦值，也就是這個原因代碼量才會增加。本文代碼下載地址概述前端開發近況需求依然旺盛，從JavaScript已經在編程語言排行榜上排到了第七位和前端聘崗位數就可以看出。加入前端開發的新手越來越多，其中女孩子比例不少，自學能力稍有匱乏前端框架層出不窮，部...

mindwind 2019-08-30 15:53 評論0 收藏0
Vue初探——Vue是什么

摘要：還是由于幫我們省略了操作，加上雙向數據綁定，的代碼量減少很多，大概還是要看具體項目。其中元素賦值和加事件又需要獲取元素和更元素賦值，也就是這個原因代碼量才會增加。本文代碼下載地址概述前端開發近況需求依然旺盛，從JavaScript已經在編程語言排行榜上排到了第七位和前端聘崗位數就可以看出。加入前端開發的新手越來越多，其中女孩子比例不少，自學能力稍有匱乏前端框架層出不窮，部...

happen 2019-08-01 16:24 評論0 收藏0
vue+node 實現的一套簡易博客系統

摘要：實現的一套博客系統包括博客前端展示頁和博客后臺管理頁貌似預覽圖加載不出來，直接點看吧項目地址簡要技術棧后臺管理頁的編輯器用的，支持語法解析部分使用了這個庫，語法高亮用博客在線地址僅供臨時預覽博客后臺管理頁在線地址僅供臨時預覽博客后臺管理 vue+node 實現的一套博客系統,包括博客前端展示頁和博客后臺管理頁 segmentfault貌似預覽圖加載不出來，直接點?github看吧項目...

Tamic 2019-08-20 13:47 評論0 收藏0