vue
关注
分享
扫一扫
摇摇马骑骑
要解放生产力就得用工具，架构不是一蹴而就的，而是一个不断迭代的过程，每跨过一个坑、每解决一个痛点痒点，都能使架构更加健壮。
展开
-
Vue或React多页应用脚手架
前言一直以来都在研究多页应用如何能有一套像SPA一样优雅的开发模式本套架构在项目上使用感觉还不错（已跑在上百个页面的项目上），所以决定开源出来给大家阅读完本文能实现在项目中使用ES6(7)+组件化（.vue | .jsx）开发多页应用(其实我是想把它做为大家多页应用的脚手架)目录结构介绍TIPS：任何的项目的架构都和目录结构有关，所以这部分非常重要，请仔细耐转载 2017-07-11 09:45:15 · 539 阅读 · 0 评论 -
如何让vue文件中的代码在Sublime Text 3中高亮？
大家写在Sublime Text 3中编写vue文件时，会发现没有代码智能提示，清一色的黑底白字，不会像html、js一样变成彩色，给我们带来了很大的不便。所以需要安装一款叫作Vue Syntax Highlight的插件，它不仅可以使代码高亮起来，还能进行代码智能提示。那怎样安装呢？分为以下几步：安装Package Control执行Install Package安装Vue Synt原创 2017-07-10 10:54:07 · 423 阅读 · 0 评论 -
better-scroll插件初使用
模仿了一个饿了吗页面先上图，看一看better-scroll的效果如果用overflow：auto或scroll属性，这样的页面就会出现两个滚动条，用户体验会有折扣，所以给介绍一款插件better-scroll，附上github资源链接。这款插件是基于iscroll插件做的重新封装，改善了一些bug，增加了一些拓展功能（插件作者并不是本人，望周知），有兴趣的小伙伴们转载 2017-07-19 09:34:20 · 987 阅读 · 0 评论 -
Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。于是我开始先去搜索，发现vue2.0的生命周期没啥文章。大多是转载 2017-09-13 11:33:24 · 298 阅读 · 0 评论 -
better-scroll的参数和方法
格式：let obj = new BScroll(object,{[option1,],.,.});Options 参数startX: 0 开始的X轴位置startY: 0 开始的Y轴位置scrollY: true 滚动方向为 Y 轴scrollX: true 滚动方向为 X 轴click: true 是否派发click事件，通常判断浏览器派发的click还是b转载 2017-09-05 21:34:53 · 23132 阅读 · 1 评论 -
vue动画
在vue中，实现过渡动画一般是下面这样:transition name="fade"> div>div>transition>123用一个transition对元素或者组件进行封装. 在过渡的时候，会有 4 个(CSS)类名在 enter/leave 的过渡中切换。v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。v-enter-act转载 2017-09-07 12:19:02 · 396 阅读 · 0 评论 -
Vue2学习笔记:事件对象、事件冒泡、默认行为
DOCTYPE html>html>head> title>title> meta charset="utf-8"> script src="http://unpkg.com/vue/dist/vue.js">script> script type="text/javascript"> window.onload = function(){转载 2017-09-08 09:30:54 · 361 阅读 · 0 评论 -
better-scroll VS vue 纯干货
什么是 better-scrollbetter-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。better-scroll 的滚动原理不少同学可能用过 better-scroll，我收到反馈最多的问题是转载 2017-09-27 11:15:02 · 2158 阅读 · 1 评论 -
vue 使用Slot 分发内容
单个slot 除非子组件模板包含至少一个 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。 最初在 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。以下代码为 app.转载 2017-11-07 10:32:21 · 302 阅读 · 0 评论 -
Vue过渡的应用及技巧
Vue中提供了和来为元素增加过渡动画。文档写的很清楚，但是实际使用起来还是费了一番功夫。这里做一个简单的记录: 单个过渡使用元素把要过渡的部分包裹起来，不会在DOM中渲染出来，只是做一个标记。其中常用的属性主要是： - name : 匹配相应的过渡类名，当没有name的时候默认为v-enter,v-leave-active等 - mode:控制离开/进入的先后顺序，out-in或者in转载 2017-12-07 15:29:10 · 254 阅读 · 0 评论 -
Vue2.0 Vue.set的使用
这里我定义了一个列表数据，我将通过三个不同的按钮来控制列表数据。首先在列表中动态新增一条数据：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head&转载 2018-06-22 08:48:28 · 196 阅读 · 0 评论 -
Vue 使用中的小技巧
在vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧，在下将不定期更新~1. 多图表resize事件去中心化1.1 一般情况有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写：mounted() { s...转载 2018-07-24 13:49:34 · 405 阅读 · 0 评论 -
Vue-Router导航守卫
有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。为此我们有很多种方法可以植入路由的导航过程：全局的, 单个路由独享的, 或者组件级的,推荐优先阅读路由文档全局守卫vue-router全局有三个守卫：router.beforeEach 全局前置守卫 进入路由之前 router.before...转载 2018-07-24 15:24:33 · 675 阅读 · 0 评论 -
Vue 问题及解决办法
最近要求使用vue进行前后端分离开发微信公众号，不断摸索踩坑之后，总结出如下几点vue项目开发中常见的问题及解决办法。如果你是vue大佬，请忽略小弟的愚见^V^列表进入详情页的传参问题。本地开发环境请求服务器接口跨域的问题API接口的统一管理UI库的按需加载如何优雅的只在当前页面中覆盖ui库中组件的样式定时器问题rem文件的导入问题Vue-Awesome-Swiper基本能解决你...转载 2018-07-25 16:04:47 · 639 阅读 · 0 评论 -
Vue.js是如何做到数据响应的？
许多前端JavaScript框架（例如Angular，React和Vue）都有自己的数据相应引擎。通过了解相应性及其工作原理，您可以提高开发技能并更有效地使用JavaScript框架。在视频和下面的文章中，我们构建了您在Vue源代码中看到的相同类型的Reactivity。当你第一次看到它时，Vue的响应系统看起来很神奇。拿这个简单的Vue应用程序：不知何故，Vue只知道如果价格发生...转载 2018-08-09 16:18:45 · 719 阅读 · 0 评论 -
vue2.0之axios使用详解(一)
axios基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用http://blog.youkuaiyun.com/binginsist/article/details/65630547功能特性在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据自动转转载 2017-07-17 23:46:48 · 334 阅读 · 0 评论 -
Vue2.0的改变
vue2.0-组件定义方式全局 script> var Home={ //这是2.0组件 template:'#aaa' }; //Vue.extend() Vue.component('my-aaa',Home); window.onload=function(){转载 2017-07-17 23:43:18 · 228 阅读 · 0 评论 -
vuex学习实践笔记
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。栗如(travel store)：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748转载 2017-07-11 11:51:52 · 208 阅读 · 0 评论 -
使用Vue-Router 2实现路由功能
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。推荐使用npm安装。npm install vue-router一、使用路由在main.js中，需要明确安装路由功能：import Vue from 'vue'import VueRouter from 'vue-router'impor转载 2017-07-11 12:18:43 · 335 阅读 · 0 评论 -
vue-router
当项目小的时候，我没考虑要去找这个得解决方案，也幸好现在几乎能迁移的项目都整合在了一个vue的项目里面才发现编译后的vendor.js变得异常的大，而且几乎在项目每一个页面都需要加载这一个js，项目内容变多了后，这个文件肯定会越来越大，而且变更也会很频繁。官方的解决方案 https://router.vuejs.org/zh-cn/advanced/lazy-loading原创 2017-07-12 09:47:39 · 407 阅读 · 0 评论 -
简单的通信
1.父->子父 '我是父组件，我显示的内容是'{{mes}} import Cc from './Cc.vue'export default { data(){ return { mes:'我是父组件的内容' } }, components:{ Cc }}子'我是子组件，我显示的内容是'{{原创 2017-07-12 12:10:42 · 237 阅读 · 0 评论 -
Vuex核心知识（2.0）
Vuex 是一个专门为 Vue.js 应该程序开发的状态管理模式，它类似于 Redux 应用于 React 项目中，他们都是一种 Flux 架构。相比 Redux，Vuex 更简洁，学习成本更低。希望通过本文帮助还没使用 Vuex 的同学快速上手。注：本文针对 Vuex 2.0 的语法，目前通过 npm 默认下载的版本为 1.0+ ，想引入 2.0 版本可以通过 script 标签转载 2017-07-12 15:09:08 · 344 阅读 · 0 评论 -
vuex 小结
好在之前接触过 flux，对于理解 vuex 还是很有帮助的。React 学到一半，后来因为太忙，就放弃了，现在也差不多都忘记了。不过感觉 vuex 还是跟 flux 还是有点区别的。http://www.tuicool.com/articles/F3eqUfY对于很多新手来说，只是阅读文档是不好消化，我的建议是看看 vuex 的实例，通过研究实例来学习vuex。这样就会好理解转载 2017-07-12 15:12:46 · 498 阅读 · 0 评论 -
vuex so easy
什么是Vuex？http://www.jianshu.com/p/490e7726fe67Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构，它借鉴了 Flux 和 Redux的设计思想，但简化了概念，并且采用了一种为能更好发挥 Vue.js 数据响应机制而专门设计的实现。我为什么需要它？当你的应用还很简单的时候，你多半并不需要 Vuex。也不转载 2017-07-12 15:17:13 · 481 阅读 · 0 评论 -
vue-router命名视图
有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。router-view class="view one">router-view>router-原创 2017-07-12 16:27:21 · 296 阅读 · 0 评论 -
Vuex + Vue.js 小小单应用
前言：在最近学习 Vue.js 的时候，看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章。感觉收获挺多，自己在它的例子的基础上进行了一些优化和自定义功能，在这里和大家分享下学习心得。在这篇教程中我们将通过构建一个笔记应用来学习如何在我们的 Vue 项目中使用 Vuex。我们将大概的过一遍什么是 Vuex.js，在项目中什么时候使用它，和如何构建我们转载 2017-07-12 15:22:05 · 315 阅读 · 0 评论 -
Vue路由开启keep-alive时的注意点
这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了keep-alive的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺的，在路上的磕磕碰碰在所难免，故在此记录下遇到的问题，希望看到这篇文章的人能有所帮助。ps：这个也没多难。http://www.jianshu.com/p/42429f4d8f9e转载 2017-07-13 17:20:33 · 1755 阅读 · 0 评论 -
vue-router总结
路由的用法// router.config.jsconst routerConfig = [ { path: '/login', component: resolve => require(['登录路径.vue'],resolve), meta: {noCheckSession: true} }, {转载 2017-07-13 17:26:28 · 1066 阅读 · 0 评论 -
前后端分离后的前端时代
什么是前后端分离 要区分前端和后端，需要有个明确的界限。一般，用户可以直接看到的东西，都是属于前端的范畴，除了前端之外都属于后端了。你负责貌美如花，我负责赚钱养家在传统的像ASP，JSP和PHP等开发模式中，前端是处在一个混沌的状态中，可以说是没有独立的“人格”可言。前端负责切图和编写静态页面模板，后端将数据渲染到前端提供的页面模板中，最后将页面渲染到浏转载 2017-07-13 18:20:23 · 408 阅读 · 0 评论 -
Vuex 模块化实现待办事项的状态管理
前言在vue里，组件之间的作用域是独立的，父组件跟子组件之间的通讯可以通过prop属性来传参，但是在兄弟组件之间通讯就比较麻烦了。比如A组件要告诉一件事给B组件，那么A就要先告诉他们的爸组件，然后爸组件再告诉B。当组件比较多，要互相通讯的事情很多的话，爸组件要管他们那么多事，很累的。vuex正是为了解决这个问题，让多个子组件之间可以方便的通讯。项目介绍待办事项中的一转载 2017-07-13 18:12:45 · 496 阅读 · 0 评论 -
每天一点Vue--API(一)
Vue.extend( options )参数：{Object} options用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数div id="mount-point">div>原创 2017-07-07 18:20:34 · 354 阅读 · 0 评论 -
Vue axios处理http请求
基本使用方法get请求// Make a request for a user with a given IDaxios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(转载 2017-07-17 23:38:36 · 752 阅读 · 0 评论 -
vue 组件之间使用eventbus传值
对于前端的我们而言，并非是只有写界面才是最大的问题，很多的情况下，我们需要关注的是数据，比如js页面的数据传递等等，学习vue我们也是需要知道怎么去使用数据当然，使用存储也是可以得，但是并非一定要缓存，当然在vue中有推荐了我们去使用vuex去数据交互，Vuex会让你的Vue代码足够灵活可控，把数据统一存入state, 只允许通过Actions触发Mutations修改。然而，有时候我们的...转载 2018-10-12 00:25:29 · 510 阅读 · 0 评论