文章列表
苍都 于 1个月前发表 614 0 1
学习一个框架有两个阶段最难,一个是初期的入门,一个是后期的源码阅读。 虽然vue的官方文档非常棒,在我读完文档之后还是会有一种感觉,知识点我都懂,然后呢?似乎大体知道该怎么利用vue全家桶去搭建一个项目,但具体下笔又有点模糊。vue官方的脚手架并没有将vue-router和vuex包括进去,所以我们需要自己去配置它们。虽然找了一堆的demo,但是都没有达到我想要的效果。正好趁着自己接了一个小项目,拿来练手。 这个项目主要的作用是熟悉 vue vue-router vuex 在初期搭建项目的时候该怎么配置,以及怎么去互相配合,xx.vue文件该怎么写,如何创建和使用组件,vuex的state,mutations,actions,getters怎么配合,形成一个完整的流程。 项目并不复杂,所以拿出来分享,希望对大家有帮助 源码地址: https://github.com/bailicangdu/vue2-happyfri [https://github.com/bailicangdu/vue2-happyfri] 路由配置 import App from'../App'
1个月前
前端库
林鑫 于 1个月前发表 389 0 1
前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了。比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸组件再告诉B。当组件比较多,要互相通讯的事情很多的话,爸组件要管他们那么多事,很累的。vuex正是为了解决这个问题,让多个子组件之间可以方便的通讯。 项目介绍 image [https://raw.githubusercontent.com/lin-xin/notepad/master/screenshots/3.gif] 待办事项中的一个事件,它可能拥有几个状态,未完成、已完成、已取消或被删除等。这个事件需要在这多种状态之间切换,那么使用vuex来管理也是非常方便的。 来看一下vuex怎么完成状态管理的: image [https://raw.githubusercontent.com/lin-xin/notepad/master/screenshots/1.png]
1个月前
前端库
苍都 于 2个月前发表 692 0 0
前言 初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大部分都是像音乐播放器之类的展示型项目,交互没有预期那么复杂。但我们实际在工作中,经常会遇到有购物车的项目,这类项目因为涉及到money,所以对逻辑严谨度要求高,页面之间交互复杂,又会伴随着登陆、注册、用户信息等等,常常会让我们很头疼。既然还没人用vue写过这样的项目,那不如我来写,开源出来对能看到的人也会有帮助。 这种功能性的项目很实用但是往往也很枯燥,没有音乐播放器那么看起来绚丽,思来想去发现饿了么是一个不错的素材,一来它足够复杂,开放的外卖平台比一般的公司独有商店更加复杂。二来 见到那么多美食,大家也不会感觉到厌烦。 为啥是饿了么,而不是百度,美团?原因很简单,三个外卖大佬里,饿了么的色调和布局是最漂亮的,看起来最舒服。 此项目大大小小共 45 个页面,涉及注册、登陆、商品展示、购物车、下单等等,是一个完整的流程。一般公司即便是官网的单页面项目都没这么复杂,如果这个项目能驾驭的了,相信大部分公司的其他单页面应用也就不在话下,即便更复杂,也不会比这个高到哪里去。
2个月前
前端库
分享的项目:manage-system By lin-xin

该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统开发。基于vue.js,使用vue-cli脚手架快速生成项目目录,引用Element UI组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。

150 0 0
2个月前
前端库
郭明慧 于 5个月前发表 1232 2 0
开发的一个简单的移动端时间选择器,支持多种主题,现在来共享一下。 Github地址: https://github.com/IronPans/LazyPicker [https://github.com/IronPans/LazyPicker] 效果图: [http://7s1r1c.com1.z0.glb.clouddn.com/t_lazyPicker.gif] 你也可以扫描二维码用手机体验: [http://7s1r1c.com1.z0.glb.clouddn.com/t_1480730967.png] 如果你使用PC浏览器,那么你需要切换到手机模式才可使用。 步骤:按F12或鼠标右键--点击检查,再点击控制台左上角的手机模式按钮即可。 使用方法 引入CSS和JavaScript脚本: <link rel="stylesheet" href="lazyPicker.min.css" /> <script src="lazyPicker.min.js"></script> 简单的表单(input)
5个月前
前端库
张颖 ,认真认真 于 5个月前发表 1038 0 0
REACT-ROUTER使用方式 react-router是专为React设计的路由解决方案,以react component的方式提供API,包含常用的Router,Route,IndexRedirect,Link,browserHistory等。react-router充分利用react component提供的生命周期特性,使定义路由和开发react component体验一致。 嵌套的路由表声明一份路径到各个component的映射表结构非常清晰: <Providerstore={store}><Routerhistory={browserHistory}><Routepath="/"component={AppSimple}><Routepath="/editor"component={Editor} /><IndexRedirectto="/proj" /></Route></Router></Provider> 而且支持多层嵌套
5个月前
前端库
moonye 于 9个月前发表 1107 0 0
创建一个chrome的插件,并让这个插件能够作为一个app,运行在终端设备上。 <!--more--> 创建一个CHROME插件 该插件app实现一个搜索框,输入内容后,根据输入内容去github搜索名称有关联的repositories * 书写manifest.json * 创建chrome app的加载页面 * 书写加载页面的内容 * 使用chrome的扩展程序加载程序代码MANIFEST.JSON chrome的app的配置文件有固定的形式,简单配置如下{ "manifest_version": 2,//固定为2"name": "chrome extension search",//名称自定义 "version": "1.0", "app": { "background": { "scripts": ["scripts/main.js"]//app的入口文件 } }, "permissions": [
9个月前
前端库
coolriver 于 9个月前发表 1201 2 0
1 前言 React目前在前端的影响力就不多说了,不管你目前有没有入坑React,估计都见过不少各种相关的新闻和技术文章。如果你有入坑React的打算,或者刚开始学习React,可以参考一下下面内容。如果你已是React达人,可以绕过(当然也很欢迎指出不足)。本文不是API文档,也不是代码搬运工,只是谈一下学习React的一些心得和Tips (学习资料,还是推荐 官方文档 [https://facebook.github.io/react/docs/getting-started.html] ) 2 入坑REACT的原因 前端的伙伴们都知道,我们的技术氛围十分活跃,要跟进所有新的技术,保持不落伍不是一件容易的事情。所以,我们必须把有限的学习精力花在能持续产生价值的事情上面。作为参考,我本人学习和使用React的原因有以下几点: * 好多人都在搞啊,Facebook在维护啊,生态好啊,总不会那么容易过时吧(从众心理) * UI组件组织很爽,在开发时会不自觉地提取组件,再次开发时组织原有组件,效率高。 * 数据与UI解耦,单向数据流使逻辑清晰,告别jquery时代的混乱。
9个月前
前端库
何方舟 于 10个月前发表 1535 0 1
co.js 作为 koa 框架的核心库,利用 es6 Generator 新特性来解决 callback hell 已经非常流行 。 本文将剖析 co.js 是为何用同步的写法,就可以解决异步回调的问题。 GENERATOR 首先简要介绍一下 Generator 特性, co.js 是基于该特性实现的,所以弄清 Generator 的远离非常重要。 function* fn(){ beforeA(); yield doA(); yield doB(); afterB(); } var gen = fn(); //生成构造器; gen.next(); //这里会执行到以第一个yield之前的位置,所以执行beforeA 和 doA 这两行; gen.next(); //这里会执行到第二个yield的位置,也就是执行 doB() gen.next(); //这里会执行到生成器结束的位置,afterB(); 简单来说 generator 可以变成一种分步函数,gen 成为这 Generator 函数的指针,通过调用 gen.next()
10个月前
前端库
黎清龙 于 1年前发表 5144 3 2
深入探讨前端UI框架 1 前言 先说说这篇文章的由来 最近看riot的源码,发现它很像angular的dirty check,每个component ( tag )都保存一个expressions数组,更新时,遍历expressions数组,重新求值,对比旧值,如果有变更则更新DOM。 这不就是dirty check吗?为什么riot还声称它实现了virtual DOM? 疑惑之下,就去复盘了一下各大前端框架,把一些收获分享给大家 本文内容很多,实在不知道怎么取标题,最终取了一个泛泛的标题,请读者不要纠结 本文将会涉及的内容有: 1. MV*前端框架,UI框架,UI更新相关介绍 2. UI更新机制原理及其代表框架介绍 3. 深入探讨各个UI更新机制(为什么virtual DOM会快) 4. 浏览器渲染机制 5. riot的真相(virtual DOM的本质,给我自己一个交代!) 裹脚布较长,读者慎入! 2 理解前端框架 2.1 前端的工作 [http://7tszky.com1.z0.glb.clouddn.com/FjQRozSFfOJTE8y3Ew9l3yMZoEY8]
1年前
前端库
陈映平 于 1年前发表 2355 2 1
写在前面 在实际项目中,应用往往充斥着大量的异步操作,如ajax请求,定时器等。一旦应用涉及异步操作,代码便会变得复杂起来。在flux体系中,让人困惑的往往有几点: 1. 异步操作应该在 actions 还是 store 中进行? 2. 异步操作的多个状态,如pending(处理中)、completed(成功)、failed(失败),该如何拆解维护? 3. 请求参数校验:应该在 actions 还是 store 中进行校验?校验的逻辑如何跟业务逻辑本身进行分离? 本文从简单的同步请求讲起,逐个对上面3个问题进行回答。一家之言并非定则,读者可自行判别。 本文适合对reflux有一定了解的读者,如尚无了解,可先行查看 官方文档 [https://github.com/reflux/refluxjs] 。本文所涉及的代码示例,可在 此处 [https://github.com/chyingp/blog/tree/master/demo/2016.01.05-reflux-async] 下载。 SYNC ACTION:同步操作 同步操作比较简单,没什么好讲的,直接上代码可能更直观。
1年前
前端库
陈映平 于 1年前发表 1825 0 0
先看例子 其实,redux的核心概念就是 store 、 action 、 reducer ,从调用关系来看如下所示 store.dispatch(action) --> reducer(state, action) --> final state 可以先看下面的极简例子有个感性的认识,下面会对三者的关系进行简单介绍 // reducer方法, 传入的参数有两个 // state: 当前的state // action: 当前触发的行为, {type: 'xx'} // 返回值: 新的state var reducer = function(state, action){ switch (action.type) { case 'add_todo': return state.concat(action.text); default: return state; } }; // 创建store, 传入两个参数 // 参数1: reducer 用来修改state
1年前
前端库