说一说第一次用vuejs闯关记录

2017-04-27

VUE1.0记录

场景介绍

16年在大数字总有一些需求，把一些原生的页面改用H5来做，其中有几大块（个人中心、抽奖中心）等一些集合型比较强的页面，当时如果一个页面一个页面做的话，需要制作好几十个html页面然后用两三个ajax接口请求数据然后渲染页面，所以考虑用vue的双向绑定、组件和路由来解决不断copy的尴尬过程！

当时vue2还在测试阶段，所以先用的vue1做的第一个项目，下面是我当时遇到的一些问题，如果用法和理解上有错误还希望各位看官给个建议意见和指正；

问题1

vue1-1

由于一开始用vue我是直接上手，上手前就大概看了一样vue的api，所以当时想了一个问题，为什么我在入口文件里已经引入了vue，在接口用到vue时还要在引用一次呢？现在其实我了解了，不知道这么解释对不，入口文件也只是一个引入，只有在组件里用到vue可以不用引入，接口文件的js如果需要用vue还是需要引用的，入口文件这个简单理解为是个模块，当在其他js文件需要用这个模块时也是需要引入使用的！

问题2

vue1-2

这其实不算个问题，只是当时没有详细查看时间绑定api，绑定方法时可以访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法:

<button v-on:click="say('hello!', $event)">Submit</button>
// ...
methods: {
  say: function (msg, event) {
    // 现在我们可以访问原生事件对象
    event.preventDefault()
  }
}

问题3

由于安卓端需要获取页面一个a函数作为回调，这个a必须在全局下，所以这里遇到vue问题，钩子的问题！这个问题我一直研究到晚上十一点才算解决，问题场景如下：

在项目里又一个index.vue和silder.vue,在index里我需要调用一个接口，把当前页面的数据接回来，silder是一个组件的形式引入到index里，现在问题时，我在接收完数据后有一部分传入silder里，而silder里还有组件，我的需求是如何在index+silder的dom完全渲染完后执行一个安卓客户端下载方法，这方法是触发那个全局的实时回调函数的，我的回调函数里需要把改变silder渲染后的id，没渲染完无法执行dom修改！这是有人说vue1.x里有ready啊，亲测这个ready不会等到页面组件加载完执行！查了下资料，在vue1.x里并没有这个钩子，2.x里有个mounted说是可以在模版编译挂载完后执行，没有亲测！但我的项目已经成型，有些插件还是1.x的插件，2.x不支持，所以只好自己找办法解决，先找到了一个很差的方法，由于index有加载和路由两个方式进来，所以在sild里加上了如图：

vue1-3

这种方法一个是为了加载完组件用，一个是用做路由来回跳用，用一个不是加载时不生效，一个是路由时不生效，这是一个非常不对的解决方案，睡了一夜到早上上班一直想这个问题解决方案，结果终于想到了如下：

vue1-4

我在index的ready里用了\$nextTick这个方法，也就是我在index加载完后调用异步请求，并把数据已经给到组件后，这个时候组件接到数据已经把id渲染进取了，然后我调用了\$nextTick这个方法执行app端的下载方法，就可以在回调里接收到slider渲染后的dom中的ID了（这个DOM的id是异步数据回来的一个key，所以只有渲染完后才可执行下载方法，这个app端的下载方法执行后会实时回调我的全局的一个a方法，这个a方法里需要用document.getElementById把当前的ID状态改成回调回来的状态），如上就是可以把slide里的ready和attached钩子方法干掉了

问题4

v-if 和 v-for 不能同时用在同一个标签上！

如上是我在开发第一个vue项目中遇到的一些问题，可能有些问题理解的不是很对，看官们多多指教

VUE2.0记录

问题1

vue2刚刚上线我就上手用了那时候vue的交互插件还用vue-resource，现在有的人说官方已经推荐使用axios 了，但貌似官方并没有真的说，所以大家各取所好吧，这次主要是说resource在使用时遇到了一个大坑，我踩上时有人也踩了，但没有人解决，今天就说说这个坑；

vue-resource在jsonp和get里请求参数，除了｛jsonp:”back”｝起作用，其他不管什么参或者把jsonp的key改成什么都不起作用代码如下：

1
2
3

Vue.http.jsonp(DEV_HOST+'/benefitlist',{pageID:29,jsonp:"_callback"})

Vue.http.jsonp(DEV_HOST+'/benefitlist', {aaa:"_callback"})

解决办法：

1	Vue.http.jsonp(DEV_HOST+'/benefitlist',{params: {pageID:29},jsonp:"_callback"})

params是固定key，把params改成其他的都不行，在官方api里没有给出

https://segmentfault.com/q/1010000005903585/a-1020000007407040这是我当时在sf里找到的难友，我的回答里后来又有一些难友入坑，对此我表示深切的同情；

问题2

filters不能像以前那样到处用了，只能自己定义才有的用，转而用计算属性或者方法吧。

问题3

[^这是不同浏览器中js解释器的兼容问题]:

在safari里面是无法对形如”xxxx-xx-xx”这种形式的日期进行变换，在safari里new Date(‘2015-8-13’); 会提示Invalid Date

后来查找才发现，safari里面能够识别的日期只能是”xxxx/xx/xx” 这种形式的日期，在safari里面

new Date(‘2015/8/13’);

解决方法：new Date(time.replace(/-/g, “/“));

总结：整体来说还有一些没有记录的坑，都是因为当时没有仔细研究vue的API导致的，当时开发项目也没有用到vue一些高级的功能，主要用到的也就组件，路由和数据绑定这三点；貌似三四个项目都上线了：奖品中心,活动中心;这两个都是vue2开发的，当时项目比较集也没太考虑关于渲染和懒加载这块的东西，接下来我在新的公司打算发力前端工程化这块的知识和实践有但不限如下技术Nodejs,Vuejs,Reactjs,Webpack打包,ES6,ES7等一些流行工具使用和原生js的加强！

在接下来我会开发一个小的，非常open的vue验证小工具；有兴趣和想法的小伙伴可以一起加入，我们一起用实际行动来开发好玩的小工具和特效；