vue2.0混入mixins

假设一个项目,首页不需要登录就可以直接进入,但是在首页中有各种其他的模块,这些模块中,有些需要登录权限,而有些则不需要登录权限,所以在进入这些模块的时候,我们都要判断当前的登录状态,那么我们应该怎么组织这一部分代码呢? 在每一个需要登录状态的组件内,进行单独判断? 如果需要判断登录状态的模块比较少,也就是单独的组件很少,其实也无所谓,但是如果有10个.8个的模块需要判断登录状态呢?每个组件内部,判断一次?虽然代码都一样,也就是合并复制粘贴一下,但是,这是不是一种浪费,这时,就是mixins混入大…

重开Vue2.0

目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加载,减少服务器压力 2.v-show:调整css display属性,使客户端操作更加流畅 v-if: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&…

Vue2.0组件的继承与扩展

如果有需要源代码,请猛戳源代码希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢前言本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/extends和extend的用法. 一.slot 1.默认插槽和匿名插槽 slot用来获取组件中的原内容,此方式用于父组件向子组件传递"标签数据".有的时候为插槽提供默认的内容是很有用的,例如,一个<my-hello> 组件可能希望这个按钮的默认内容是"如果没有原内容,则显…

Vue2.0源码阅读笔记--生命周期

一.Vue2.0的生命周期 Vue2.0的整个生命周期有八个:分别是 1.beforeCreate,2.created,3.beforeMount,4.mounted,5.beforeUpdate,6.updated,7.beforeDestroy,8.destroyed. 用官方的一张图就可以清晰的了解整个生命周期: Vue最新源码下载:地址二:源码分析 1.先看new Vue实例的方法创建Vue实例的文件是: src/core/instance/index.js function Vue…

vue2.0中使用sass

第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性,并且完全兼容CSS语法.Sass有助于保持大型样式表结构良好. Sass有两种语法. 一种称为SCSS,是一个CSS3语法的扩充版本,也就是说,所有符合CSS3语法的样式表也都是具有相同语法意义的SCSS文件,SCSS样式表文件要以.scss扩展名结尾.在vue中,我们可以使用<style lan…

vue2.0和better-scroll实现左右联动效果

在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果. 实现上面的效果,思路一定很重要,还有需求 1. 左边一级分类和右边二级分类形成联动 2. 当滑动右侧分类列表时, 更新左侧分类选中 3. 点击左侧一级分类项时, 右侧列表滑动到对应位置在vue脚手架的时候,引入第三方插件better-scroll,如果想了解的话,可以去看看它的中午文档说明, npm install better-scroll --save…

vue2.0读书笔记2-进阶

一.深入响应式原理二.过渡效果三.过渡状态四.Render函数五.自定义指令六.混合七.插件八.单文件组件九.生产环境十.路由 vue-router: http://router.vuejs.org/ 十一.状态管理vuex 集成到了vue-devtools当中十二.单元测试(断言等,使用karma进行自动化测试) 十三.服务端渲染一.深入响应式原理 1.1.如何追踪变化通过watcher把组件渲染过程中的依赖纪录下来,当依赖项的setter被调用时,watcher…

Vue2.0父子组件间事件派发机制

从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆落.特别是在组件层级比较深的情况下.通过广播和事件分发的机制,就显得比较混乱了. 官方在废除的同时,也为我们提供了替换方案,包括实例化一个空的vue实例,使用$emit反应子组件上的状态变化 1.使用$emit触发事件 helloWorld.vue作为父组件,dialogConfigVi…

vue2.0实践的一些细节

最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个有高度的元素占位,不然当数据加载好渲染的时候会出现跳动的感觉.可以这样写: <div class="yhq_inner"> //占位元素 <template v-if="true"> //加template则页面加载时就不会显示待编译符号如:{{…

vue2.0构建淘票票webapp

项目描述之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + vuex + mint-ui 后台技术栈:nodejs + express 项目地址:https://github.com/canfoo/vue2.0-taopiaopiao 废话先不多说,先晒晒预览效果,过过瘾: 项目架构本项目采用vue2.0栈构建前端页面,采用expre…

Vuex2.0+Vue2.0构建备忘录应用实践

一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. 1.什么是状态管理模式? 看个简单的例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content=&q…

一步步构造自己的vue2.0+webpack环境

前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wkdemo,这是我们的项目目录.执行 npm init 命令生成package.json文件.执行npm init之后,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行 npm init -y 直接跳过询问步骤. 2.安装项目依赖项 npm install webpack webpack-…

Vue2.0组件间数据传递

Vue1.0组件间传递使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有的后代 Vue2.0后$dispatch(),$broadcast()被弃用,见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换 1,父组件向子组件传递场景:Father上一个输入框,根据输入传递到Child组件…

基于Vue2.0+Vue-router构建一个简单的单页应用

爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是目前最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点并且提供了很多的周边配套工具如vue-router .vue-resource .vuex等等通过他们我们可以很轻松的构建一个大型单页应用目前Vue版本为Vue2.0 官网地址http://vuejs.org.c…

vue2.0实战

学了几周的vue2.0,终于有时间去做一个应用了. 为了全面联系相关知识,所以用到了vue-router,以及作者最新推荐的axios,组件库用的是饿了么的mint-ui2.0. 项目构建使用官方vue-cli,由于项目较小,使用simple模板. 在2.0中路由不再使用router.start();而路由跳转得组件也有所变化,官方文档很全面.有一点不是很懂,就是关于路由的挂载,本来准备另外写个router.js来挂载路由,可是不太好使,所以全都放在了main.js中. 在首页有页面切换但是并不…

vue DatePicker vue2.0的日期插件

一个用vue2.0写的日期控件,可以支持简单的年月日选择.地址:https://github.com/Stevenzwzhai/vue-datepicker. 首先是关于日期对象的使用,基本就是日期的设置(date.setDate())与获取(date.getFullYear(),date.getMonth(),date,getDate()).在这里主要的一点就是根据选择的年和月份去设定当月的天数,使用设定日期,date.setDate(year, month, 0);这里要注意的是,获取哪个月…

项目vue2.0仿外卖APP（六）

goods 商品列表页开发布局编写除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可以上下滚动. good.vue: 为了兼容性问题呢,设置flex之后还设置了宽度,使得在不兼容flex的浏览器也能有80px的宽: 外壳就是这样了: 开始填内容了同样的,我们还是利用vue-resource这个技术去拿到数据,获取goods数据: goods需要用data去绑定,因为后面需要用到g…

项目vue2.0仿外卖APP（五）

header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为…

项目vue2.0仿外卖APP（四）

组件拆分先把项目搭建时生成的代码给清了吧现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯,我们可以在ESLint进行设置,如下: 回到入口js文件main.js,为了好看,我们给它加上分号: 不过这是就会报错了: 所以要到eslintrc.js去设置(上面对应可以去官网查看怎么配置),使它接受这样的编码方式. 现在的App.vue如下: 然后我们编写组件来替换那三个区块. 创建header组件将…

饿了么基于Vue2.0的通用组件开发之路（分享会记录）

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,…

vue2.0有哪些变化

vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码之前: <template> <h3>vue-router+vue-loader</h3> <p>hshsh</p> </template> 现在:必须有根元素 <template> <div> <h3>vue-router+vue-loader</h3> <p>hshsh</p&…

Vue2.0实现1.0的搜索过滤器功能

Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy.官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索功能,比较简单,学一下. <body> <div class="app"> <input type="text" v-model="name"> <ul> <li v-for="user in newUsers" &…

vue2.0 开发实践总结之入门篇

vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文章:如果有兴趣,可以移步 vue2.0 开发实践总结之疑难篇项目是图片分享社交平台. 项目预览: 1 .vue-cli构建工具必知我选用的vue-cli 是基于webpack的版本 ,不了解webpack的可以先粗略看下下面的基本知识 webpack 基本知识点: entry:入口点,w…

基于vue2.0的分页组件开发

今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组件传哪些必要的参数,即子组件需要提供什么接口组件需要去实现哪些功能我们要返回哪些参数给用户针对这几点,做如下分析: 先上简单的模板: <template lang="html"><div class="page"> <ul> &…

Vue2.0 + Element-UI + WebAPI实践：简易个人记账系统

最近正在学习Vue2.0相关知识,正好近期饿了么桌面端组件Element-UI发布,便动手做了一款简易个人记账系统,以达到实践及巩固目的. 1.开发环境 Win10 + VS2015 + Sqlserver2008R2 + WebAPI + Dapper + Vue2.0 + Element-UI 2.项目解决方案概览简单介绍下,Account是WebAPI项目,承载前端请求:Account.BLL.Account.DAL.Account.Entity不废话:Account.Common是对D…

Vue2.0流式渲染中文乱码问题

在参照vue2.0中文官方文档学习服务端渲染之流式渲染时,因为响应头默认编码类型为GBK,而文件为UFT-8类型,所以出现了中文乱码问题. 解决办法:设置响应头编码类型即可 response.setHeader("Content-type", "text/html;charset=UTF-8"); server.get('*',function(request,response){ response.setHeader("Content-type"…

VUE2.0不可忽视的很多变化

今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也没发现什么问题,浏览器也没报错或者提示,很令人捉急.然后去github看了webpack-simple源码,才发现原来vue init webpack-simple默认安装的vue是2.0版本.马上推测到是不是因为vue2.0废弃了ready的用法,果然不出所料,我真是太机智了.看了下vue2.0的…