摘要: Actions Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作。 让我们来注册一个简单的 action,实践中,我们会经常会用到 ES2015 的 参数解构 来简化代码(特别是我们需要调用 com 阅读全文
posted @ 2017-07-03 16:51 herozhou工巧 阅读(646) 评论(0) 推荐(1) 编辑
摘要: 上一篇我们简单介绍了vuex在此项目中的作用。 这次来理一下项目的整体思路。 main.js上次看过了,首先看App.vue文件 我们引入了Toolbar.vue,NodeList.vue,Editor.vue并渲染到页面中。 Toolbar.vue的代码在上篇文章中也存在,来看下NodeList. 阅读全文
posted @ 2017-07-03 16:50 herozhou工巧 阅读(661) 评论(0) 推荐(0) 编辑
摘要: 首先使用vue-cli把环境搭建好。 介绍一下应用的界面。 App.vue根组件,就是整个应用的最外层 Toolbar.vue:最左边红色的区域,包括三个按钮,添加、收藏、删除。 NoteList.vue:中间蓝色区域,笔记列表。 Editor.vue:最右边紫色区域,编辑区域。 第一步 安装vue 阅读全文
posted @ 2017-07-02 14:24 herozhou工巧 阅读(1180) 评论(0) 推荐(0) 编辑
摘要: 我们先来理一下思路。 图1:main.js 引入vue,App.vue,router/index.js文件 声明要渲染的Id为app,将App.vue中的模版渲染到入口界面(就是打开localhost:8080会看到的那个页面)。 图2:App.vue router-view是显示路由内容的地方,比 阅读全文
posted @ 2017-06-18 19:08 herozhou工巧 阅读(2799) 评论(1) 推荐(0) 编辑
摘要: 请先完成了项目初始化,具体请看我另一篇博文。vue项目初始化 看一下完成的效果图,很典型的单页应用。 .vue后缀名的单文件组件 这里先说一下我对组件的理解。组件,顾名思义就是一组元素组成的一个原件(理解的比较浅显、直白),在Vue.js中,表现为一个自定义元素。开篇展示的图中,首页的的列表中的每一 阅读全文
posted @ 2017-06-16 22:00 herozhou工巧 阅读(5421) 评论(0) 推荐(1) 编辑
摘要: 用vue-resource向服务器请求数据 我们主要来了解一下以下内容: 模拟服务端返回数据 用vue-resource向服务器请求数据 模拟服务器返回数据 我们用vue-cli创建的项目中,已经给我们提供了模拟服务器端返回数据的地方和接口。如下图所示,在项目目录的build目录下,有一个dev-s 阅读全文
posted @ 2017-06-16 10:47 herozhou工巧 阅读(1733) 评论(0) 推荐(0) 编辑
摘要: 安装node.js 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了。 安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。 安装cnpm 在命令行中输入 npm install -g cnpm --registry=htt 阅读全文
posted @ 2017-06-15 21:05 herozhou工巧 阅读(1873) 评论(0) 推荐(0) 编辑
摘要: 这一篇我们来实现管理员修改每一天剩余数量的功能。 我们在data中加入了checkedDays数组,用来存放我们所选定的日期,因为我们不需要修改checkDays数组中的值,所以不使用对象数组的方式。 checkedCount为默认修改20天的剩余数量。 页面效果为: 这样我们就实现了管理员修改日期 阅读全文
posted @ 2017-06-15 17:24 herozhou工巧 阅读(1345) 评论(0) 推荐(0) 编辑
摘要: 上一篇我们已经实现了基本的日历显示功能,这一次我们要加上预定的功能 废话不多说,上代码 js代码 原理就是使用v-if判断当前日期是否具有index属性,如果有,就说明当前天是可供预定的。 在vue data中加入leftobj对象数组,存放每一天剩余数量count的值。 这里有个问题,为什么不直接 阅读全文
posted @ 2017-06-15 17:13 herozhou工巧 阅读(1754) 评论(0) 推荐(0) 编辑
摘要: 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件。 效果图。 只是一个简单的日历组件,所以并不需要用到node服务器,只需要一个Html文件即可。 项目基本目录 首先在引入 vue.js 贴上最主要的html和js代码 核心是使用vue 阅读全文
posted @ 2017-06-15 16:53 herozhou工巧 阅读(42767) 评论(1) 推荐(0) 编辑