预览模式: 普通 | 列表

很实用的一个长宽比锁定组件 for vue2.0

 功能点:

1、长宽比锁定,per参数为百分比,如果 高:宽=200:100,则per="200",默认宽高比为100:100(正方形)。

2、参数bg="images/c3.jpg",背景可带图片

3、link="a.html",可以带链接

HTML中调用:

XML/HTML代码
  1. <div id="app" v-cloak >  
  2.       <lock-div bg="images/c3.jpg" link="a.html" per="200"></lock-div>  
  3.       <lock-div><img src="images/p3.jpg"></lock-div>  
  4.       <lock-div per="50">里面也可以放文字</lock-div>  
  5.     </div>  

组件定义:

Javascript代码
  1. Vue.component('lockDiv', {  
  2.     props:{  
  3.         per: {type: [Number,String], default: 100 },  
  4.         bg: {type: [String], default""},  
  5.         link: {type: [String], default""}  
  6.     },  
  7.     data:function (){  
  8.         return  {  
  9.             hh:100  
  10.         }  
  11.     },  
  12.     template: "<div class='lockDiv' :style=\"{height: hh + 'px', backgroundImage: 'url(' + bg + ')'}\" @click='clickH'><slot></slot></div>",  
  13.     methods: {  
  14.         clickH:function(){  
  15.             if(this.link){  
  16.                 window.location.href=this.link;  
  17.             }  
  18.         }  
  19.     },  
  20.     mounted: function() {  
  21.         this.hh = this.$el.offsetWidth* this.per/100;  
  22.     }  
  23. });  

显示效果:

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 107

VUE开发的三个阶段

长沙很多开发团队,看待vue还是一个新事物。我还记得半年前,一个项目经理从网站找到了iview这样的第三方组件库,准备使用,但是团队的现实情况是,vue刚开始使用,webpack没有使用经验。他还以为vue的第三方库跟jquery组件使用方式类似。

 
目前,身边也有不少朋友,还只把vue当页面渲染器用。并不太了解组件化方式。所以我画出这个阶段图,给vue传道时,可以节省一些口水。
 
选择适合自己的步调,不要太激进,一口吃不掉胖子。
脑图地址:
http://naotu.baidu.com/file/17f6177717e34b26775fa3bd8e91956e?token=f1078f80a16ed553
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 181
练手做了个小例子。点击:
http://www.contactu.cn/2017/test_component.html

Tags: vue2.0组件

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 133

 年后实战了两个移动端(前端)项目,都是使用的VUE2.0,做的是多页面类型(非SPA),地址:

 
收获:
1、让我可以熟练的运用FLEX布局。估计提升了50%的布局效率。原来的多层结构、乱七八糟的修补型代码都被淘汰了,结构、样式都更加简洁。
2、熟练使用scss。之前已经用了小半年。但是有时候没有形成自己的scss书写模式。这次两个项目,最大的收获就是,小项目,不再细致考虑重用,除了页头页尾、导航,其它的布局块,全都一个个写单独的结构。这样脑子里不用思考命名、重用这些问题,写起来极快。
3、VUE的mixins功能充分发挥。多页面模式下的“共性功能”,全部提出来放到common.js中的mixins代码中,不用再写到每个页面的vm结构中。
4、试验了多个第三方组件、库。对于vue2.0生态的众多第三方组件有了实战经验。真实使用了element-ui(饿了么开源)。
5、搞清了iscoll之类滚动插件的利弊。---这里被视频课程中的老师带着,绕了一个大圈。以后再专门说这个技术问题。
6、自己试着写了一个VUE的小组件,对于组件的template模板使用的几种形式,有了更多选择。在多页面开发模式下,一些共性功能块,还是值得提炼成组件的。我这次提炼的组件的,就实现了“锁定长宽比的图片容器”。这个功能在页面中大量存在,写个组件能大大的提升效率。

Tags: vue2.0

分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 316

最近跟着慕课网的教材实战了一个项目:http://coding.imooc.com/learn/list/74.html(Vue.js高仿饿了么外卖App)。我从vue1.0到2.0都撸了一下代码,做出了例子。本文讲到的一些坑,都是根据我的笔记整理的,菜鸟们可参考,大牛请无视。

 
一、是否要升vue 2.0
vue版本已经升到2.*,所有配套的vueRouter、第三方组件,都跟着升到2.0。1.0的淘汰指日可待。因此没啥好犹豫的,能用2.0就直接升吧。
目前所有的官方文档已经升2.0了,但是网上流传的大量例子,都还是1.0的,因此实践前,请一定注意版本!请一定注意版本!请一定注意版本!
 
二、是否要使用vue-cli
要实践vue组件化、单页面应用的例子,请一定使用vue-cli。我之前没有使用脚手架,自己用Webpack实验,太麻烦了!说多了都是泪。如果使用vue-cli,基本上跟着教程走就行了。再次提到版本问题!--目前(2017年2月)默认vue init命令,安装的是2.0的脚手架。
 
三、npm大坑
如果你是新人,并不需要兼容之前1.0版本,那么恭喜你,请直接入2.0坑 ------vue init命令很容易就完成了,接下来的npm i安装是一个大坑。我在新手群里看到一半以上的新人都卡在这里。npm说白了,就是要把所有的依赖项安装好。我从头装了一下vue-cli2.0,并统计了一下,node_modules目录下有87个子目录,140M。
 
但这个过程并不会很顺利!
我在数次安装vue-cli的过程中,都没有一次搞定。基本流程是,装完后运行一下npm run dev---报错---根据报错信息,用npm i --save *** 修复某个依赖---再run---再报错---再修复.....修复个五六次,最后才出现locathost:8080的提示,浏览器中出现第一个demo页,这时候才叫安装成功!
 
有时候,npm奇慢无比,5分钟以上还没装完。这时候要果断ctrl+c,再次npm,或转用cnpm---cnpm安装过程也有坑,此处不展开,请自行百度。
我在这里分享一个纯净包,可直接越过冗长的npm i过程,这个包里面已经带上了node_modules目录,解压后直接npm run dev即可调试。
 
四、单页面还是多页面
vue推荐的方式是单页面应用(SPA)。但是实际情况,就本地区(长沙)来说,现实工作中,多页面方式更普遍。多页面方式一样也可以使用vue强大的组件系统和脚手架。在github.com搜索“vue2 multipage”,会得到不少多页面脚手架。此处不展开。
 
五、关于npm run build的几个参数
如果你九死一生走到这里,能生成dist目录下的文件的话,这才迈入了真正的实战。
config/index.js可以配置输出,以下几项可修改成如下:
 
assetsSubDirectory: 'static',     //输出的依赖文件夹路径可自定义
assetsPublicPath: '',     //默认值是assetsPublicPath: '/',即引用的js以“/”开头,则必须在根路径下使用
productionSourceMap: false,     //不输入.map调试文件
 
总结:
 
越过以上几道关,VUE的开发环境就基本搭建成功。意味着你可以愉快的调试代码,按一下ctrl+s存盘,就能在浏览器中看到相应的变化。Vue接下来的一千多个大坑,都在后面等着你......
 
一些关于vue的实践将陆续首发到本人技术博客上,长沙前端开发与培训,www.contactu.cn
推荐一个资源站:https://www.awesomes.cn/subject/vue(感谢佳浩提供资源线索)

Tags: vue.js vue-cli

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 326

2017年VUE2.0试手项目--奔奔算术

利用春节假期,系统的学习了VUE2.0/组件/webpack/SPA技术。正好儿子每天要做口算题,就利用这些新学的知识,花2天时间,为他写了一个移动端的小型出题软件。

 
 
 
 
功能点:
  • 随机出题,加减均可;
  • 可进行一些基础模式的配置,
  • 对加减法做了一些优化,避免出现太简单的题目;
  • 练习模式下,可进行计时、自统计错题功能
  • 一些动画效果用GSAP实现
 
技术点:
  • vue2.0组件
  • vue-cli2.0+webpack生成单页应用
  • sass、flex布局
  • localStorage读写
分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 312

2016年终总结

 经历:

1、2016年,网站业务量减少,最大型的企业网站项目为云龙集团网站项目。
2、以顾问方式,为两家大型软件公司提供界面服务。
3、以顾问方式参与了WK及美一点移动端APP项目。更深刻的了解了创业型项目的甘苦。
4、使用d3.js技术框架,黄花机场触摸屏项目 。
 
技术:
2015年主要是把前端新概念进行了蜻蜓点水式的了解。2016年则是以VUE为突破口,完整的了解了MVVM体系的方方面面。过年前这个月,利用VUE1.0体系,重写了一个袖珍的SPA网站。然后购买了慕课网的【Vue.js高仿饿了么外卖App】的收费课程。两个项目互相印证。之前一直对VUE的组件、路由体系不太了解,此次无法回避,把这些知识点翻来覆去的看了个遍。也在segmentfault.com上提了不少问题,上面的网友很热情。
 
另外熟练了git命令行方式,熟练使用github.com。
通过优特项目,更加熟悉前后端配合/mock测试方式。
 
工具:
使用了更多基于nodejs的工具软件。对于Webpack这个大坑有了更多了解(不懂的也仍然很多)。
 
合作与分享:
继续以顾问方式参与项目。也带了几个前端学生。在知乎上回答了一定数量的问题,得到了一些关注。
 
生活:
搬家到河西,重新构建自己的工作圈。花了很多精力在孩子的学业上。
坚持跑步,完成了第二届长马(半马)完赛。与儿子一起踢足球、打乒乓。
 
2017愿景:
使用VUE构建具体的组件化项目。
学习小程序或是react native,打通APP开发通路。
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 368

不知道咋的备案就失效了。好容易恢复了。备案号不在的这段半个月,学到了不少的新知识:

  • * 完整的学习了git命令行,用命令行管理自己的仓库https://github.com/csdudu,并上传了几个小片段。建立gh-pages分支。以后需要演示的片段,全部都使用这个方法进行演示了。
  • * 完整的了解了npm包管理的机制,编辑package.json,更多的npm语法。并且通过实战,了解到npm的一些坑:比如node版本的影响、cnpm的优缺点。
  • * 基本搞懂了Webpack的运行机制,编辑webpack.config.js,常用loader。日常使用webpack-dev-server --inline --content-base .方式进行热更新。
  • * 基于Webpack搞清了es6的import/require语法,投入使用。用loader方式打包vue工程。
  • * 基本搞懂vue-router路由系统,开始制作一个SPA的demo,以用于以后PC端的仿FLASH类网站。
  • * 恶补了许多vue组件的知识。
  • * vue自定义指令的写法。
  • * 了解了前端AJAX模拟的一些知识,比如mock server的工具、搭建方式。顺便学习了LeanCloud这种把数据库抽象为API的工具的基本用法。
 
接下来,要向VUE组件化开发、ES6语法,甚至React native的方向进军。微信小程序有时间也想试试。

Tags: 学习新知识

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 809

 演示:http://contactu.cn/2016/round/round.html

 
分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 457

达内前端培训的真实个案

 我现任技术顾问的单位,有两个妹子前端人员,我现在进阶培训她们。小A,昨天跟她聊天得知,是不久前从达内培训出来的。她自述,在达内培训4个月,前端制作方向(另一个方向是前端设计),费用一万七。每天学习、作业安排得非常紧,以下是她给我的部分课程和习作目录,可以说,跟前端沾边、隔得远的,都学了:

但她求职效果不太理想,实际工作能力被主管评价“一般”,目前仅拿该岗位起薪。(这样说小A,有点让她难堪,但实际情况如此,我也希望她迎头赶上)。
 
此培训机构课程安排确实太杂。这种大而全的设置,某种程度上,更好迎合市场,让课程表华丽。刚入门的学生,并非学得多就能嚼得烂。即使我们知道任何培训机构,学员都有 先后之分,但这个学费也确实太贵了,性价比低。何况小A看上去,并不是那种不努力、不思考的学生。这点血汗钱,花得有得冤。
----------------------------
对比:我另一个女学生,自学四个月,在我这里听了几堂课,目前待遇比A要好。
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 460

经老同事推荐,昨日在优特咨询,与该公司技术人员进行了为期一天的前端技术交流与培训。

我介绍了目前我所了解的前端技术的大致形式。然后为大家重点分享了iconfont、bootstrap、vue.js、gulp工作流的内容。
 
会谈中大家多次发生热烈的讨论,主要讨论点包括:
如何前后端分离--vue(mvvm)模式的优缺点
切换体积较大的页面时,如何保证切换更流畅---讨论了浏览器缓存、SPA+AJAX+require等技术方式;
 
交流很愉快--对于后期技术合作,项目组领导也对我提出了诚意的邀请。
以己微薄之技,为更多的技术团队提供服务。
 
 
 
 
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 509

我学生求职成功

我一个前端学生,女,非计算机专业,2016年6月毕业后,毅然放弃原专业,入前端大坑。自学四个月,在我这听了5次课,共10小时 

上周,在长沙,求职前端成功,薪水
4500+双休。

世上无难事,只怕有心人。
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 458

 

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1076

熟悉GIT命令行

花了两天时间学习vue.cli+github,命令行方式基本搞熟了,顺便给自己搞了个响应式简历:

 http://csdudu.github.io/

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 550