预览模式: 普通 | 列表

很实用的一个长宽比锁定组件 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 | 查看次数: 388

VUE开发的三个阶段

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

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

Tags: vue2.0组件

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

 年后实战了两个移动端(前端)项目,都是使用的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 | 查看次数: 981