预览模式: 普通 | 列表

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 | 查看次数: 2515

近期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 | 查看次数: 22472

    近期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 | 查看次数: 4696

    近期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 | 查看次数: 2492

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

    项目地址:
     
    用到的主要的第三库:
    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 | 查看次数: 4070

    我爱人那边的一亲戚,毕业多年,之前一直在外地工作(非IT行业)。结婚生子后下决心转行,回长沙定居。今年过完年跟前东家办了离职手续,住到我家来一门心思学前端。

    历时二个月,跟我写了几个实战项目,然后边帮我做事边找工作。也面试了几家,不靠谱。最后,有一家用人单位听到他用VUE写过几个项目,连细节都没有考察,直接就录用了。老弟本来答应第二天就去上班的,结果当天下午,另一家公司提出更好的待遇---公司规模大,离家近,双休,薪水超过他的心理预期30%。我弟弟自然选择了后者,上班第一周就配了全新电脑。

     

    最终这两家单位选择我弟,都是因为他的VUE实战经验。我估计这个框架在长沙的普及还不是很广,因此缺稀。

    以下是我在知乎上面的回答:

    本地多数团队还停留在多页面、ES5阶段、GULP工作流为主的阶段。针对这个市场,一般公司对前端使用VUE的要求不高,主要考察以下几点:

    查看更多...

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

    来自知乎的前端转行咨询及我的回答

    ***落霞 :你好!大牛!我现在处于转行迷茫期!有些问题想你帮我解答下,谢谢!我毕业后在上海做了三年的船舶管系生产设计,四月中旬辞职回武汉,想转前端开发,因为我姐夫是做后端的!他推荐我转前端,主要是工资比船舶设计类高!我五月份在我姐夫家根据慕课网,W3C自学了一个月前端,对html.css.Javascript基础有了些基本掌握!因为我在家呆一个月了,心理有些烦躁想出去找一个前端实习的工作,我姐夫也认同,说能找到一个公司边做边学更好,我当时想的无所谓工资多少,有公司要就行!投了好多前端实习,或0基础学习的公司,结果去面试都是培训机构!当然我也被这些培训机构洗脑了,想花2万去培训,我姐夫坚决不同意,最后我姐夫建议我把简历上前端工作经验写为半年或一年,找个小公司进去!他的一些前端同学也建议我这样!但我心理是非常排斥的!先不说骗人吧!即使有公司叫我去面试,问我一些项目经验问题,估计我就慌了!因为不是自己做的!所以我想问的问题是,是不是现在所有公司都招那种有项目经验的人!像我这种初学者都找不到工作!还有就是为了面试虚构项目经验好不好?希望你能帮我解答!谢谢!

    ---------------------------------------

    你好。

    1、我不是大牛,只算熟练工。

    2、公司当然只招熟练工。假设你自己将来做了老板,你想想看,你招初学者进来做啥?-----实际项目你敢给实习生做?质量不过关,总要人擦屁股。坐在那里还占个位子和电脑。除非实习生给钱给公司。

    3、越是小公司,越是要做实事的人,进去以后不会给你啥过渡期的。做不了事就走人。虚构经验不是不行,是混不过去,谁也不傻。

    查看更多...

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

     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 | 查看次数: 2399

     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 | 查看次数: 7295

    我常用的gulpfile.js配置与sublime组件列表

    我自己的gulpfile.js代码: 

    这样运行:

    gulp --u DIRNAME

    --u是自定义参数,这样可以快速建立DIRNAME目录的虚拟站点,并启动所有监听服务。当你有很多不同的目录时,这样做很方便。

    Javascript代码
    1. var gulp = require('gulp'),  
    2.     // concat = require('gulp-concat'),  
    3.     // uglify = require('gulp-uglify'),  
    4.     // mock = require('n-mock'),  
    5.     browserSync = require('browser-sync').create(),  
    6.     // fileinclude = require('gulp-file-include'),  
    7.     // minifyCss = require('gulp-minify-css'),  
    8.     sass = require('gulp-sass')  
    9.     autoprefixer = require('gulp-autoprefixer')  
    10.     // directoryMap = require("gulp-directory-map")  
    11. ;  
    12.   
    13.   
    14. gulp.task('default'function() {  
    15.     var dir = gulp.env.u;  
    16.     console.log( "----------------当前处理目录为:/"+ dir +"----------------" );  
    17.     browserSync.init({  
    18.         server: {  
    19.             baseDir: dir,  
    20.             index: "index.html"  
    21.         }  
    22.     });  
    23.   
    24.     // 自动刷新  
    25.     gulp.watch(dir+'/*.html'function() {browserSync.reload(); });  
    26.     gulp.watch(dir+'/scss/*.scss'function () {  
    27.         return gulp.src(dir+'/scss/*.scss')  
    28.             .pipe(autoprefixer({  
    29.                     browsers: [  
    30.                     "last 10 versions",  
    31.                     "last 12 Chrome versions",  
    32.                     "Firefox > 20",  
    33.                     "ie 6-8"],  
    34.                     cascade: true  
    35.                 }))  
    36.             .pipe(sass().on('error', sass.logError))  
    37.             .pipe(gulp.dest(dir+"/css"));  
    38.   
    39.     });  
    40.     gulp.watch(dir+'/css/*.css'function() {browserSync.reload(); });  
    41.     gulp.watch(dir+'/js/common.js'function() {browserSync.reload(); });  
    42.   
    43. });  

    我常用的sublime插件:

    ColorPicker--色彩选择器

    查看更多...

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

    寻找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 | 查看次数: 2797

    您好,我是湖南**大学大四的学生,去年11月开始在一家创业公司实习,但是最近公司人事告诉我,公司现在发展,前端人员他们招聘了另外一个有三年经验的,人员已经够了,然后刷知乎的时候,刚好有看到您的回答,感觉您经验丰富,技术深厚,想请问一下你们最近还在招聘吗?这是我以前写的一个线上简历https://***.github.io/demo_collection/现在修改了一下,您能帮我看一下对于找到工作有什么不足吗?打扰您了,万分感谢😊


    我的回答:
     
    1、我有不少朋友在招前端,好的前端市面上很缺。
    2、看了一下你的简历,给几个建议:
     
    - 把自己做过的项目、页面拷屏界面放出来,用图、表格来说事,越多越好。光从文字上理解,无法知道项目复杂度。尤其是对一些非专业的HR来说。
     
    - 要高度重视前端的“布局”层面的技术。jquery也好,vue也好,都不是前端的传统自留地。对于刚毕业的你来说,企业需要你的技能点,一般都是布局。就是说,你能把页面排出来就好,响应式、移动端、兼容性,如果都能做得好,你就是不会JS,也没关系。
     
    - 把你的简历、作品全都写在一个页面里,不要让人翻来翻去。
    - 写简历要分时间、分条目、分自然段。这一点你做得不好。
    - 技能点、分技能,采用脑图结构写清楚。写得越细越好,粗线条的技术名词,只能说明你对此技术了解不深。比如谈及bootstrap,你需要写明,你用过boot的什么皮肤套件,了解过哪些配套的插件,用它做过几个项目,在项目中重点攻克了什么难题?---甚至可以把这些经验写成小文章。这样用人单位会觉得你是“准专业的”。如果你对此技术了解不深,那就实事求是的说说,你做了哪些学习和探索,相信你不是一片空白。
    - 你现在这个网站,并没有什么亮点,建议简化成一页式在线简历。把结构和CSS好好写写、搞点交互小动画,足矣。
     

     

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

    网上沙盘(jquery)

     http://www.contactu.cn/2017/sp/demo2.html

     
    适用场景:
    一个全屏背景+自适应前景点的例子。窗口尺寸随便怎么变化都行。特别适合用于制作全屏沙盘类的案例。
     
    原理:
    根据容器尺寸,计算背景图、前景点的位置,前景利用css的transform-scale/translate子属性进行自适应。实际使用中,是用了我熟悉的tweenMax实现了快速转换,否则要用css的Matrix矩阵滤镜,俺不熟。
     
    使用方法:
    在设计稿中测量背景图尺寸,所有点的位置点。按我的例子放置,即可。
     
    分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2161

    很实用的一个长宽比锁定组件 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 | 查看次数: 2106
  • | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | | »