vue实现留言板的功能_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

写在后面

vue实现留言板的功能_vue初探-简易留言板相关推荐

android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
php简易留言板功能,php实现简易留言板效果
首先是Index页面效果图 index.php date_default_timezone_set('PRC');$filename="msg.txt";$msgs=[];//检测 ...
vue实现留言板的功能_Vue实现简单的留言板
本文实例为大家分享了Vue实现简单的留言板的具体代码,供大家参考,具体内容如下 body { /* margin: 0; */ padding-left: 10px; } #app{ width: 4 ...
vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能导出功能截图二.安装相关依赖 cnpm install --save xl ...
vue 点击按钮筛选功能_vue实现前端列表多条件筛选
本文实例为大家分享了vue实现前端列表多条件筛选的具体代码,供大家参考,具体内容如下 1.先上图: 2.搜索条件绑定的数据是: filterForm:{ schoolName:'',//输入的学校名称 ...
RV1109开发板ssh服务器移植到arm开发板
RV1109开发板ssh服务器移植到arm开发板 ssh功能移植到RV1109开发板的,由于RV1109的SDK中,没有telnet功能,有时候adb功能在量产中需要关闭,避免造成设备留有漏洞,造成安 ...
vue实现留言板的功能_基于vue和bootstrap实现简单留言板功能
本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今 ...
vue生命周期，组件，slot替换，tab切换，简易留言板
data规范: data:(){ return{ arr:[{ a: "wan1", b: "在线", c: 5000},{ a: "wan2&quo ...
php留言板的实验步骤,PHP实现基本留言板功能原理与步骤详解
本文实例讲述了PHP实现基本留言板功能的方法.分享给大家供大家参考,具体如下: 作为一个PHP的初学者,我试着写了一个留言板,页面有点丑,多多见谅,嘻嘻嘻 #我们写留言板需要用到数据库,所以我们先要建 ...
PHP编辑留言源码,php实现简单的留言板功能（附源码）
php实现简单的留言板功能 1.原理简单的说就是数据库的创建,添加数据,显示在前端上.我的程序只是简单的留言再显示. 首先写好留言的前端页面,就简单的写入作者,标题和内容. 2.界面: 3.显示留 ...

vue实现留言板的功能_vue初探-简易留言板

vue实现留言板的功能_vue初探-简易留言板相关推荐

最新文章

热门文章