很实用的一个长宽比锁定组件 for vue2.0
作者:admin 日期:2017-03-17功能点：
1、长宽比锁定，per参数为百分比，如果 高：宽=200:100，则per="200"，默认宽高比为100：100（正方形）。
2、参数bg="images/c3.jpg"，背景可带图片
3、link="a.html",可以带链接
HTML中调用：
XML/HTML代码
- <div id="app" v-cloak >
- <lock-div bg="images/c3.jpg" link="a.html" per="200"></lock-div>
- <lock-div><img src="images/p3.jpg"></lock-div>
- <lock-div per="50">里面也可以放文字</lock-div>
- </div>
组件定义：
Javascript代码
- Vue.component('lockDiv', {
- props:{
- per: {type: [Number,String], default: 100 },
- bg: {type: [String], default: ""},
- link: {type: [String], default: ""}
- },
- data:function (){
- return {
- hh:100
- }
- },
- template: "<div class='lockDiv' :style=\"{height: hh + 'px', backgroundImage: 'url(' + bg + ')'}\" @click='clickH'><slot></slot></div>",
- methods: {
- clickH:function(){
- if(this.link){
- window.location.href=this.link;
- }
- }
- },
- mounted: function() {
- this.hh = this.$el.offsetWidth* this.per/100;
- }
- });
显示效果：
VUE开发的三个阶段
作者:admin 日期:2017-03-14长沙很多开发团队，看待vue还是一个新事物。我还记得半年前，一个项目经理从网站找到了iview这样的第三方组件库，准备使用，但是团队的现实情况是，vue刚开始使用，webpack没有使用经验。他还以为vue的第三方库跟jquery组件使用方式类似。
目前，身边也有不少朋友，还只把vue当页面渲染器用。并不太了解组件化方式。所以我画出这个阶段图，给vue传道时，可以节省一些口水。
选择适合自己的步调，不要太激进，一口吃不掉胖子。
脑图地址：
http://naotu.baidu.com/file/17f6177717e34b26775fa3bd8e91956e?token=f1078f80a16ed553
VUE2.0 组件功能测试(普通使用，非单文件组件)
作者:admin 日期:2017-03-07年后实战了两个移动端(前端)项目，收获良多
作者:admin 日期:2017-03-06年后实战了两个移动端(前端)项目，都是使用的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模板使用的几种形式，有了更多选择。在多页面开发模式下，一些共性功能块，还是值得提炼成组件的。我这次提炼的组件的，就实现了“锁定长宽比的图片容器”。这个功能在页面中大量存在，写个组件能大大的提升效率。
