预览模式: 普通 | 列表

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

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

我常用的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 | 查看次数: 627

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

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


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

 

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