分类: VUE研究预览模式: 普通 | 列表

在任何一个购物页面,只要购买了商品,就可以将购买量存储到缓存,实现跨页面共享数据。这个原理也可以用来管理其它较复杂的跨页面结构。

demo地址:

 
几个技术要点:
  • 使用js-storage这个js库来实现对localstorage的读写及判断,比自己写原生要简单。因为localstorage默认存储是字符形式,如果要存储对象、数据这些,还要自己写转换,用库就简单得多了。另外还用isEmpty对“空结构”做判断。
  • 基于VUE做了一个单独的mixin_cart,要引入购物车的页面都可以使用这个mixin
  • 用一个数据结构(cart)来完整的映射“购物车”,针对它写了一些API:
    • init_cart----从local读数据来形成cart
    • get_cart_item_count----得到某件商品的购买量
    • write_cart------新建/改写商品数据
    • sum_cart-------汇总购买量
    • clear_cart------待加
  • 使用watch监听页面中的数据变化,一旦发生变化,就扫描数据结构,把购买量的变化使用write_cart映射到cart-->并存储到localstorage。注意watch监听数组或是对象这样的复杂结构,要使用handler+deep: true写法。
  • 一些算法使用了lodash.js,比如:
    • 查找符合条件的商品-- _.find
    • 从数组中删除商品---_.pull
    • 汇总商品购买量------_.sumBy
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 153

VUE中用refs实现父子通讯的新方法

例子:http://258754.cn/2017/read2/test_component.html 

用refs父子通讯的新方法,比用emit要方便。主要思路是用refs去读取子组件的内部值,调用内部函数。之前真不知道可以这样用,直到我读到这篇文章--Vue.js 组件样式指南(英文):
https://github.com/pablohpsilva/vuejs-component-style-guide
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 138

近期VUE及周边笔记--YDUI框架

 YDUI是基于vue2.0的一个功能齐全的UI框架,就我个人的应用范围来说,比element ui更适合我的需要。可能他的组件配置并没有ele那么强大而齐全,但是简练的风格反而更适合于中小移动端项目。

我主要使用这些组件:

  • flexible组件,用于rem-px单位转换,默认单位是10,好转脑子。
  • 弹窗,只有几个参数,适用于不复杂的情况。
  • 日期选择器,weui风格的,从底部向上弹出。
  • 滚动加载(yd-infinitescroll)
  • 数字动画 (CountUp)

其它的一些组件,别的库中也有,或是可以自己手写出来,并不是完全依赖。

要注意的事及BUG:

1、这个库的版本更新很快,如果发现参数无效等奇怪的情况,请先检查版本。比如yd-infinitescroll的不同版本写法就不一样。

2、flexible组件,对于窗口宽度的变化是有范围的。

Javascript代码
  1. //ydui.flexible.js,以下的11.2会在宽420像素以上停止变化,改为21.2后,会在768像素以上才停  
  2. return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 21.2), 8.55) + "px", e  

查看更多...

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

近期VUE及周边笔记--easy mock

easy mock(https://easy-mock.com/)平台的主要作用,是用来模拟生成json文件,在后端未到位的情况下,为前端调试提供数据。我的使用方法:

1、是在开发时将ajax请求,直接指向https://easy-mock.com/mock/59a578f77b7ac306cc2fa863/api这样的远程接口,进行调试。

2、等前后端联调结束后,通过修改axios的axios.defaults.baseURL参数,将数据接口指向真实ajax地址,完成切换。

easy平台提供了丰富的mock.js语法,也可以接收并request参数,模拟真实ajax情况很逼真。比如下面这个范式,就模拟了对”/list?page=*“这样的多页请求的情况:

Javascript代码
  1. {  
  2.   res_body: function({  
  3.     _req,  
  4.     Mock  
  5.   }) {  
  6.     //page小于3,每页给出20个随机数据  
  7.     if (_req.query.page < 3) {  
  8.       return Mock.mock({  
  9.         "page_num": 4,  
  10.         "list|20": [{  
  11.           "id": _req.query.page,  
  12.           "tt_amount""@float(200, 2000, 2, 2)",  
  13.           "commission""@float(200, 2000, 2, 2)",  
  14.           "final_amount""@float(200, 2000, 2, 2)"  
  15.         }]  
  16.       })  
  17.   
  18.     }  
  19.   
  20.     //page==3,给出6个数据,模拟末页情况  
  21.     if (_req.query.page == 3) {  
  22.       return Mock.mock({  
  23.         "page_num": 4,  
  24.         "list|6": [{  
  25.           "id": _req.query.page,  
  26.           "tt_amount""@float(200, 2000, 2, 2)",  
  27.           "commission""@float(200, 2000, 2, 2)",  
  28.           "final_amount""@float(200, 2000, 2, 2)"  
  29.         }]  
  30.       })  
  31.     }  
  32.   }  
  33. }  

 模拟身份验证

Javascript代码
  1. {  
  2.   res_flag: function({  
  3.     _req  
  4.   }) {  
  5.     return (_req.header.token == "1234567890")?true:false;  
  6.   }  
  7. }  

 

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

近期VUE及周边笔记--axios

我将ajax工具栈从vue-resource改为了axios,基本用法类似,但调用格式略有不同。比如vue-resource的response是放在res.body中,而axios放在了res.data中。

值得一提的是,axios的全局设置很方便,包括参数和拦截器。列举:

Javascript代码
  1. // 全局基地址配置  
  2. axios.defaults.baseURL = 'https://easy-mock.com/mock/59a578f77b7ac306cc2fa863/api';  
  3.   
  4. // 全局token  
  5. axios.defaults.headers = {token: window.localStorage.getItem("jyg_token")};  
  6.   
  7. // 添加全局请求拦截器  
  8. axios.interceptors.request.use(function (config) {  
  9.   // 给每个发出的请求后面加上php后缀  
  10.   config.url = config.url + "php";  
  11.   return config;  
  12.   }, function (error) {  
  13.   // 对请求错误做些什么  
  14.   return Promise.reject(error);  
  15.   });  
  16.   
  17. // 添加响应拦截器,比如对所有错误代码进行全局统一的出错处理  
  18. axios.interceptors.response.use(function (response) {  
  19.   // 对响应数据做点什么  
  20.   return response;  
  21.   }, function (error) {  
  22.   // 对响应错误做点什么  
  23.   return Promise.reject(error);  
  24.   });  

 

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

这种结构在电商中很常见,比如饿了吗的店铺页。我边写边参考饿站。

项目地址:
 
用到的主要的第三库:
1、bscroll(iscroll的一个改进版本),滑动框架。iscroll能实现的功能,比原生滚动控制要强得多。相应的API也更好用。
2、lodash用来实现各种快速数据运算。
 
技术要点:
1、对于iscroll的一些API的熟悉,比如如何获取滚动高度(onScroll),如何滚动到指定位置(scrollToElement)。
2、必须在dom渲染完成后,再进行iscroll定义,可使用Vue.nextTick。再比如当容器高度发生了变化 ,必须要refresh重建当前iscroll对象。当refresh时,必须要等容器动画完成后,方可进行。
3、最难点在于建立右侧位置模型,用于左导航与右列表的位置对照。也就是说,每次滚动行为,都会触发当前位置与位置表发生比对,以随时更新左侧导航状态。
4、在建立位置模型过程中,数次用到lodash,比如说:
 
// 从位置数组中,查找一个最接近当前坐标的值,然后得到“这个值对应的1、2级目录ID”
var zzz = _.findLast(this.arrPosition, function(n) {
     return n.posi<=posY;
});
this.sortA = zzz.sortA;
this.sortB = zzz.sortB;
 
如果不用工具函数,这种小算法写死人。
 
5、右侧列表是一次性载入的,可考虑做懒加载。如果列表特别长,也要考虑异步加载。
6、点击购物车的加号时,“小球落入购物车”这一效果,基本实现思路是,先算出起、终点的位置,然后用TweenMax实现动画。最后将其封装做成vue组件,以备重用。非本文重点,不做详述。
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 552

 vue-resource1.2.0版本,发现只能读取.json后缀的文件,换个后缀就不灵了。最终找到答案:

1、把vue-resource.js升级到1.3.1
2、调用处加一句 responseType:"json",
 
Javascript代码
  1. <script src="js/vue2.js"></script>  
  2. <script src="js/vue-resource1.3.1.js"></script>  
  3.   
  4. var call = Vue.http({  
  5.       method:'GET',  
  6.       responseType:"json",  
  7.       url:"mocks/news1"  
  8.       });  
  9.   
  10. call.then(function (e) {  
  11.     console.log(e.body);  
  12. });  
 
 
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 481

 vue-finger.js是将alloy_finger.js用于VUE2.0的一个包装小程序。在网上一直找不到跟VUE2.0很无缝搭配的组件,无奈找了个简单替代品。引用时要将两个库都引入:

XML/HTML代码
  1. <script src="js/alloy_finger.js"></script>  
  2. <script src="js/vue-finger.js"></script>  

示例图如下:

 

DEMO在此:http://258754.cn/2017/jzz/test_swipe.html

用F12模拟手机观看

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

寻找IOS风格的datapicker在vue2下运行

 目前我们做的几个移动端项目,使用vue2多页面方式,js文件用<script>方式引入。因为不能使用import方式引入组件,这就意味着网上大量的VUE2第三方组件,无法使用。

我一般建议,VUE2尽量使用element-ui等嫡系UI,设计样式也尽量与element贴近。但是element缺少一些组件,比如IOS风格的日期选择器(下图)。
 
我花了几个小时寻找这个datapicker组件,github、segmentfault,但没发现可用的第三方。山穷水尽之时,突然想起,这个组件最早出现在WEUI中,是否可以从WEUI提取?WEUI之前配合jquery使用,并没有跟VUE结合使用过,事后证明这只是我的一种错觉,WEUI本身是可以跟原生JS结合的,也就是说,可以跟VUE结合使用!
找到目标,开始写代码。但奇怪的是,datapicker没有完整的API官方文档,百度也查不到,最后还是通过谷歌翻墙,才找到答案。
WEUI的CSS还是容易改写的,我改写了部分CSS样式,以对应设计师的设计。
 
最后终于圆满解决!没有使用jquery。
 
主要代码如下:
 
methods:{
        clickH:function (ii) {
          var _dt = this.dtime;
          weui.datePicker({
              start:_dt[0][0],     
              end:_dt[1][0],       
              defaultValue: _dt[0],
              onConfirm: function (result) {
                  Vue.set(_dt[ii], 0, result[0]); //年
                  Vue.set(_dt[ii], 1, result[1]); //月
                  Vue.set(_dt[ii], 2, result[2]); //日
              }
          });
        },
        inquireH:function () {
          console.log('查询服务器');
        }
      },
      data: {
        pic:"images/bg1.jpg",
        dtime:[
            [2017,5,5], //日期选择器起始日期
            [2017,5,10]  //日期选择器最远可选日期
         ]
      }
 
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 469

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

VUE开发的三个阶段

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

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

Tags: vue2.0组件

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

最近跟着慕课网的教材实战了一个项目: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 | 查看次数: 2806