最近更新时间：2017年6月2日16:58:06前端
《个人博客地图》
vue
前端的框架不少，须要不断的摸索和学习，截止20170602已经接触和使用VueJS一个多月了，遇到的问题不少，在此总结做以温故知新。ajax
一、条件渲染问题element-ui
条件渲染指令包含： v-if 和 v-show
json
v-if指令有 v-if 、 v-else-if 、 v-else，这些指令须要它添加到一个元素上。咱们能够把一个 <template> 元素当作该指令的包装元素，并在上面使用 v-if。最终的渲染结果不会包含 <template> 元素。框架
不一样点： 异步
v-show 的元素始终会被渲染并保留在 DOM 中，v-show 是简单地切换元素的 CSS 属性 display ，v-show 不支持 <template> 语法。vue-resource
v-if 是“真正的”条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：若是在初始渲染时条件为假，则什么也不作——直到条件第一次变为真时，才会开始渲染条件块。
相比之下， v-show 就简单得多——无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。
通常来讲， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。所以，若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不太可能改变，则使用 v-if 较好。
post
所以：问题来了，v-if 是惰性的，当条件从真变假，条件块内的事件监听器和子组件被销毁，当条件从假变真，条件块内的事件监听器和子组件开始重建，但何时重建成功？当条件从假变真时，从条件块内拿DOM元素，有取不到的状况，此时，须要作异步处理。学习
this.$nextTick(() => {...})//这个方法至关于window.onload=function(){},等待页面从新渲染成功再执行下一步操做；一个异步执行的过程，一件事情执行成功，再执行下一件事情；
二、element-UI框架问题
实际项目中使用 Vue^2.2.6 搭载 element-ui^1.3.3 时，发现<el-date-picker>日期选择器的clearable="false"属性失效，不显示清除按钮失效。
解决方案一：
禁止 el-icon-date 的 hover 事件将 el-icon-date 改变为 el-icon-close，没有真实测试；
解决方案二：
禁止 el-icon-date 和 el-icon-close 的 click 事件，没有真实测试；
解决方案三：
实际解决方案，在 <el-date-picker v-model="date"> 的 @change="dateChange" 事件上加入清空判断，以下，
dateChange（）{
if(this.date == undefined || this.date[0] == null)
retrun;//此时用户清空了日期选择器的数据
}
对于非跨度日期，如年、月、日、日期，单个日期的清空判断条件以下，
if(this.year == undefined || this.year == '')
解决方案四：昨天在网上留言提问，这个问题有网友已经帮我解决，:clearable="false"，属性名前加上冒号；
三、http请求
通常状况下，VueJs框架搭建的项目不建议使用jQuery库，所以 $.ajax 的 http 请求只能放弃，而是使用 vue-resource 插件发送 http 请求。
vue-resource 支持 http 请求七种方法：get,post,head,delete,jsonp,patch,put
第一种：基于全局Vue对象使用
this.$http.get();
this.$http.post();
第二种，基于 resource 对象使用
this.$resource(url).get({data:data}).then(successCallback,errorCallback).catch(function(response){“catch回调，在http从请求到响应的整个过程当中，只要出错就会被调用”});
使用拦截器 interceptor 对象，该对象能够在 请求发送前 和 接收响应后 作一些回调操做
Vue.http.interceptors.push((request,next) => {
request.headers.set();//请求发送前 的操做
next((response) => {
//接收响应后 的操做
})
})