vue2.0
文章平均质量分 69
XU丶WEI
这个作者很懒,什么都没留下…
展开
-
Vue.js自定义指令的用法与实例
自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。 比如谷歌图片的加载做得非常优雅,在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来。用自定义指令可以非常方便的实现这个功能。效果: 自定义指令的第二用处是用于集成第三方插件。我们知道任何软件开发领域都转载 2017-05-23 10:29:58 · 363 阅读 · 0 评论 -
Vue.js--自定义指令
基础http://www.jianshu.com/p/c2bef47439abVue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为。你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令。定义对象需要提供一些钩子函数(全部可选):bind: 仅调用一次,当指令第一次绑定元素转载 2017-05-23 17:41:52 · 468 阅读 · 0 评论 -
vue.js中使用set方法
vue教程中有这样一个注意事项:第一种具体情况如下: 运行结果:当利用索引改变数组某一项时,页面不会刷新。解决方法如下:运行结果:三种方式都可以解决,使用Vue.set、vm.$set()或者数组的splice方法。在做项目的过程中,有个发现,先上代码:第一个数组通过利用下标改变第二项,第二个数组使用$set()方法改变第二项,根据上面的代码,我们会知道:第一个数组的第二项改变不会在页面更转载 2017-05-23 17:42:40 · 686 阅读 · 0 评论 -
vuejs2.0运用原生js实现简单的拖拽元素功能
[javascript] view plain copy print?<span style=“font-size:18px;”>http://www.cnblogs.com/moqiutao/p/6428632.html </span> http://www.cnblogs.com/moqiutao/p/6428632.html[javascript] view plain copy pri转载 2017-05-23 17:43:23 · 313 阅读 · 0 评论 -
vuejs2.0使用Sortable.js实现的拖拽功能
简介http://www.cnblogs.com/moqiutao/p/6423754.html在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组。但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码。该案例主要是在用于vuejs2.0中实现的转载 2017-05-23 17:44:31 · 1973 阅读 · 0 评论 -
不容错过的Vue2.0组件开发
简述http://www.jianshu.com/p/313f11bccb33?utm_source=tuicool&utm_medium=referral(本文针对于有Vue有一定基础的人学习了解,环境搭建等入门教程网上很多,大家自行学习,也可留言,我会给出一些不错的教程博客供大家学习。)一、通过一个小demo,让大家深入了解组件开发。并将教会大家以下知识。(特色) v-model 在自定义组件转载 2017-05-23 17:45:17 · 270 阅读 · 0 评论 -
Vue2.0组件之间通信
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单。笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信。首先我们先搭好开发环境,我们先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦)环境搭建步骤:打开git ,运行 npm install –global vue-cli 这是安装vue的命令行vue i转载 2017-05-23 17:45:53 · 353 阅读 · 0 评论 -
Vue2.0子父组件通信
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦)环境搭建步骤:打开git ,运行 npm install –global vue-cli 这是安装vue的命令行vue init webpack vue-demo 这是vue基于webpa转载 2017-05-23 17:46:29 · 341 阅读 · 0 评论 -
Vuejs(15)——Vue的异步组件
Vue的异步组件1、前置要求建议使用webpack;Browserify在默认情况下不支持;2、用法解释首先上官网说明:https://cn.vuejs.org/v2/guide/components.html#异步组件虽然说明是没问题的,但是示例中的写法怪怪的,不符合一般新手学习者在实际使用中的习惯。嗯,换句话说,这段代码告诉你,通过这种方式引入异步组件,然后他漏掉了一些内容,比如说赋值,如何使用转载 2017-05-23 17:47:07 · 976 阅读 · 0 评论 -
Vuejs(16)——Vue插件写、用详解(附demo)
Vue插件1、概述简单来说,插件就是指对Vue的功能的增强或补充。比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一段代码等2、使用方法总体流程应该是:【声明插件】——【写插件】——【注册插件】——【使用插件】写插件和声明插件是同步的,然后注册到Vue对象中(不用担心重复注册),最后在写Vue组件的时候使用写的插件声明插件先写一个js文件,这个转载 2017-05-23 17:47:47 · 496 阅读 · 0 评论 -
vue2.0--组件通信(非vuex法)
写在前面:1.父组件的data写法与子组件的data写法不同//父组件data:{ //对象形式}//子组件data:function(){ return { //函数形式 }}2.引用子组件遵循 引入组件components里定义使用如果有通信,需要在子组件的props注册以下实例全部使用以下模板<div id="app"> //父组件转载 2017-05-23 17:48:22 · 439 阅读 · 0 评论 -
使用vue2.0 vue-router vuex 模拟ios7操作
其实你也可以,甚至做得更好…首先看一下效果:用vue2.0实现SPA:模拟ios7操作 与 通讯录实现 github地址是:https://github.com/QRL909109/ios7 如果您觉得可以,麻烦给一个star,支持我一下。 之前接触过Angular1.0,React,都只是学点入门,但对于Vue却觉得很容易上手,不止入门简单,插件也是很丰富的,脚手架也是便利的很…项目分析:转载 2017-05-23 17:49:02 · 816 阅读 · 0 评论 -
vuejs与外界通信
源代码:其中在vue项目中用npm安装jQuery,vue-resource插件的的命令行:npm install jQuerynpm install vue-resource[javascript] view plain copy import VueResource from ‘vue-resource’ import Vue from ‘vue’ import $转载 2017-05-23 17:49:43 · 352 阅读 · 0 评论 -
Vue 2.0 起步 (3) 数据流 vuex 和 LocalStorage 实例 - 微信公众号 RSS
参考:Vue 2.0 起步(2) 组件及vue-router实例 - 微信公众号RSSVue 2.0 起步(1) 脚手架工具vue-cli + Webstorm 2016 + webpack本篇主要介绍设计思路和过程。假定读者已有简单的Vue入门知识,如果没有,请先行补课:Vue.js官网教程本篇目标:给我们的应用 - “简读 - 微信公众号RSS”,添加搜索、订阅、取消公众号功能,以及实现本地转载 2017-05-23 17:51:02 · 369 阅读 · 0 评论 -
基于vue的下拉刷新&滚动刷新指令
小编最近在实现移动端列表页面显示的时候一直在思考如何实现列表的自动更新数据,对于大多数Native App或者Web App,在列表的底部增加“加载更多”的按钮也是解决这样的问题一种交互的方式,当然,这样的交互其实还好,不过根据用户的操作习惯来看,似乎滚动刷新更多数据和下拉刷新当前数据的操作方式,更符合用户对列表分页数据的读取习惯,因此,在这里小编想简单的说说,这次在小编系统中所使用的下拉刷新和滚动转载 2017-05-23 17:51:41 · 508 阅读 · 0 评论 -
基于 Vue 的直播播放器实战
前言时下直播的盛行让很多人对直播技术产生浓厚的兴趣,orange 本人也不例外,本文借着实战的目的完成一个 demo,并没有深入的讲解直播技术的实现原理以及推流和拉流的实现,为什么不深入讲解直播的底层技术,原因很简单大公司没必要看我的文章去了解如何搭建直播服务器,小企业又没有不要去搭建自己的直播服务器,因为涉及到的技术繁杂又琐碎,感兴趣的直接谷歌,各位大神有不同深度的讲解怎么去搭建自己的直播服务器,转载 2017-05-23 17:52:24 · 915 阅读 · 0 评论 -
Vue2 移动端开发环境搭建
本文给出基于 Vue2 的移动端环境搭建,移动端大家更多想到的是响应布局,我们根据不同大小的屏幕进行适配,当然少不了我们的重头戏 rem,移动端相比 pc 端就没什么特别的了。我会一步一步带领大家进入 Vue2 的世界,拥抱变化,熟悉 Vue 1.x 的根据文档可以迅速掌握 2.0,因为其中大约 90% 的语法是重复的。2.0 更多是基于框架本身的优化,整体设计思想是不变的。vue-cli首先还是转载 2017-05-23 17:54:25 · 244 阅读 · 0 评论 -
Vue 2.0 构建单页应用最佳实战
前言我们将会选择使用一些vue周边的库vue-cli, vue-router,vue-resource,vuex1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请求我们的node服务端5.使用.vue文件进行组件化的开发PS:本文node v6.2.2 npm v3.9.5 vue v2.1.0 vue-转载 2017-05-23 17:55:19 · 268 阅读 · 0 评论 -
在Vue中通过自定义指令获取元素
vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的;http://www.tuicool.com/articles/6Jfiyyz在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个 组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,转载 2017-05-24 17:33:22 · 1137 阅读 · 0 评论 -
VUWE——又一个移动端Vue2组件库
VUWE在线预览介绍VUWE是一款基于微信WeUI所开发的,专用于Vue2的组件库。它与WeUI完全解耦。用户通过自定义WeUI的样式文件,可以方便地对VUWE实现定制化。中文文档使用进入一个Vue工程项目,然后执行以下命令:npm install vuwe --save加载WeUI在开始之前,需要在index.html内加载WeUI样式库:<link rel="stylesheet" href转载 2017-05-24 17:34:20 · 318 阅读 · 0 评论 -
Vue2.0开发购物车实例
前言虽然Vue最强大的是组件化开发,但是其实多页面开发也蛮适合的。看了慕课网的使用Vue2.0开发购物车的教程之后,自己也实现了一遍。http://www.imooc.com/article/16454初始化package.json使用npm init命令来自动生成package.json文件。会依次让你输入:name: 你的项目名称(默认会使用你的文件夹名称,不更改的话直接回车跳过)versio转载 2017-05-24 17:34:56 · 499 阅读 · 0 评论 -
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
这篇文章主要为大家详细介绍了Vue.js实现多条件筛选、搜索、排序及分页的表格功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能——表格入手,展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备。需求分析还是先从需求转载 2017-05-24 17:35:37 · 6087 阅读 · 0 评论 -
使用Vue框架实现NGA客户端
vue-nga由于手机配置不太好,刷nga安卓端经常重载,每次进入都要看好几秒的广告。。于是用vue.js试着做了一个(常年看帖不回,先只做游客功能- -),在浏览器上面体验还好(还可以全屏!),速度也过得去,能满足自己的日常需求了。Preview UsingFrontendVue.jsvue-routervue-resourcevuexcookingwebpackMuse-UIBack转载 2017-05-24 17:37:10 · 527 阅读 · 0 评论 -
低仿饿了么H5-纯前端Vue版 + 手把手教学
这是一个低仿饿了么H5的纯前端练手,数据是伪造的,写的比较粗糙,写这个的目的是为了加深一下熟练度,半年前看到别人写的仿cnodejs网站,我也用vue1仿了cnodeJs的网站,当时写的也是粗糙的令人发指,在线预览:https://hbxywdk.github.io/vue-cnodeJs/#!/半年过去,工作中很少有机会用上vue,vue也早已更新到2.+,想想学了不用也是白学了,恰好年后离了职,转载 2017-05-24 17:38:00 · 2014 阅读 · 0 评论 -
用vue开发一个猫眼电影web app
前言:之前一直在学习原生的JavaScript,但是无奈功力太浅,学了很长时候也只能写一些简单的小demo,知道遇见了vue,一切都变了,他的双向绑定和组件化思想让我迅速的爱上了他,可是光学不练是没有什么成就感的,想着豆瓣提供了免费的api接口,不如就利用这个接口做一个电影网站,想想还是有点小激动的!http://www.tuicool.com/articles/viYVBfB技术栈技术栈当然首选转载 2017-05-24 17:38:42 · 1070 阅读 · 0 评论 -
Vue.js 实用技巧(二)
观众老爷们好,如果你看过上一篇文章就会知道,我们这个系列是介绍 Vue.js 实践中的一些技巧,合理的运用还是能提升一些开发效率的。今天介绍 jsx 的特殊用法和 Vue.js 的新功能 —— $props。https://zhuanlan.zhihu.com/p/25623356?utm_source=tuicool&utm_medium=referral技巧一:任何地方都能写 jsx写过 V转载 2017-05-24 17:39:15 · 596 阅读 · 0 评论 -
进阶vue全家桶
有人说只会vue不会vuex还只是个切图仔,所以本项目结合前端Vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)以及后端Node,一个前后端分离的练手项目。本项目可以作为一个前端vue进阶项目,从前端flex布局到前端vue以及组件分离的使用,再到后端Node以及Leancloud的结合,是一个打通前后端流程的一个项目。欢迎大家前来star。如果有任何问题,可转载 2017-05-24 17:39:58 · 1043 阅读 · 0 评论 -
Vue.js使用vue-router构建单页应用
传统的网页应用单页应用单页应用的优缺点每种技术都有其利弊,单页应用也是如此。无刷新体验,这个应该是最显著的有点,由于路由分发直接在浏览器端完成,页面是不刷新,对用户的响应非常及时,因此提升了用户体验;完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整;API 共享,如果你的服务是多端的(浏览器端、Android、iOS、微信等),单页应转载 2017-05-24 17:40:34 · 543 阅读 · 0 评论 -
Vue.js组件化开发实践
Vue.js 是一套构建用户界面的 渐进式框架。它非常容易与其它库或已有项目整合,而无须从头开始重构整个项目;另一方面,Vue 完全有能力驱动采用单文件组件来开发的更为复杂的单页应用。https://segmentfault.com/a/1190000008591915目前在我参与开发维护的项目中已经使用上了Vue.js的一些基本功能,下面两幅图来自项目截图。Vue.js基本功能视图元素响应式数据转载 2017-05-24 17:41:08 · 1924 阅读 · 0 评论 -
一款基于Vue2.0高仿微信App的单页应用
概述利用Vue2.0模仿微信app,努力做到以假乱真的效果。个人独立开发,源码中有详细的注释,为新手提供许多有用的提示信息。项目的第一期接近尾声,后期会增加 仿3DTouch、登陆、注册、emoji表情内嵌、通讯录检索、朋友圈图片查看等功能,让它更接近微信App的用户交互体验。项目地址 https://github.com/zhaohaodang/vue-WeChathttp://Git.oschi转载 2017-05-24 17:42:28 · 826 阅读 · 1 评论 -
Vue相关开源项目库集合
awesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合。我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们。如果收录的项目有错误,可以通过issue反馈给我们。这里的项目Star数不是实时更新的,一般是一周更新一次。https://github.com/opendigg/awesome-github-vue内容UI组件开发框架实用库服务端转载 2017-05-24 17:43:33 · 952 阅读 · 0 评论 -
使用vue2、vuex、vue-router、axios等重写饿了么点餐系统
我用vue2.0写了一个饿了么点餐系统的Demo,关于vue的一些基本用法都有用到,并且引入了vuex、vue-router、axios、webpack、eslint、better-scroll等,感兴趣可以来看看GitHubhttps://github.com/SimonZhangITer/VueDemo_Sell_Eleme饿了么点餐系统vue2.0、vuex、vue-router、axios转载 2017-05-24 17:44:06 · 338 阅读 · 0 评论 -
vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发
关于项目vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发,使用webpack构建工具编译打包项目http://www.vue-js.com/topic/58ae7fc2a9c1282817afc2e0如果此开源项目对大家学习vue的全家桶有帮助,请给我一个star,因为你的star让我觉得这个开源有了价值!仓库地址点击查看效果vue1.x 项目基于vu转载 2017-05-24 17:45:08 · 980 阅读 · 0 评论 -
在vue2.0中父组件如何触发子组件的自定义方法?
如果我在父组件的button上绑定了click事件,我想当点击button时可以触发子组件(单文件的子组件xx.vue)的某个方法(如fn1),要这样的效果该怎样实现?之前看了vue1的文档实例里面有methods和events这两者有什么区别,为什么在vue2去掉dispatch后我用emit(‘fn’),如果fn放在events会没有响应,而放在methods里面才会被触发到?子组件:[htm转载 2017-05-24 17:45:43 · 1361 阅读 · 0 评论 -
vue2.0父子组件通信(慕课网)
vue2.0父传子:Props子传父:子:emit(eventName)父emit(eventName) 父on(eventName)父访问子:ref非父子组件通信 :https://vuefe.cn/guide/components.html#非父子组件通信 vue2.0 移除:1.dispatch()2.dispatch() 2.broadcast() 3.eventsvue1.0<t转载 2017-05-24 17:46:18 · 378 阅读 · 0 评论 -
Vue学习之路---No.4(分享心得,欢迎批评指正)
1.目前的项目几乎每个页面都用到了1.0的ready钩子函数,然而2.0已废弃不用,进而使用mounted替换,同时还新增了beforeMount、beforeUpdate、updated等,私以为越来越向React看齐了有木有。。beforeUpdate的作用是在页面初始渲染视图之后,一旦监测到data发生变化,在变化的数据重新渲染视图之前会触发beforeUpdate钩子函数,这也是重新渲染之前转载 2017-05-24 17:51:38 · 176 阅读 · 0 评论 -
基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
前言http://www.vue-js.com/topic/587c16c4a9c1282817afc059项目灵感的最初来源是[@shinygang](https://github.com/shinygang/Vue-cnodejs)来自的Vue-cnodejs,感谢cnodejs社区提供的API。github:https://github.com/lzxb/vue-cnode感悟在vue-cn转载 2017-05-24 17:52:30 · 373 阅读 · 0 评论 -
滴滴 webapp 5.0 Vue 2.0 重构经验分享
项目背景滴滴的 webapp 是运行在微信、支付宝、手 Q 以及其它第三方渠道的打车软件。借着产品层面的功能和视觉升级,我们用 Vue 2.0 对它进行了一次技术重构。技术栈MVVM框架: Vue 2.0源码:es6代码风格检查:eslint构建工具:webpack前端路由:vue-router状态管理:vuex服务端通讯:vue-resource几个问题滴滴 webapp 是转载 2017-05-24 17:53:02 · 537 阅读 · 0 评论 -
学习vue的一些资源
下图仅仅是给入门vue的同学一个参考,若有错误和建议欢迎指出http://blog.yubangweb.com/xue-xi-vuede-yi-xie-zi-yuan/一些参考资料:官方教程什么是双向绑定vue生态vue 常用ui组件使用webpack构建vuevue的小demovue路由例子vue跨组件通信的几种方法Vue.js——60分钟快速入门到底vuex是什么?VUE资源列表Vue.js转载 2017-05-25 17:42:17 · 213 阅读 · 0 评论 -
VUE 全家桶,vue2-vue-router-vuex-axios - 一个看笑话的 webapp
VUE全家桶,都有很牵强的用到http://www.tuicool.com/articles/qEvErmvue2Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。vue.jsvue-router应用的路由映射routervuexVuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保转载 2017-05-25 17:43:35 · 1190 阅读 · 0 评论