vue初探-简易留言板

GHOST_349178 发布于2019-08-20 12:04 / 2398人阅读

摘要：学完的基础语法之后，练手一下，从最基本的留言板开刀吧。功能不多，主要为了熟悉的基础语法使用。

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

服务器托管混合云 js简易留言板实现初探webrtc webrtc技术初探初探腾讯云存储网关

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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