VueJs学习汇总

落日映苍穹つ 2022-06-15 12:11 449阅读 0赞

*最近更新时间：2017年6月2日16:58:06*

[《我的博客地图》][Link 1]

前端的框架很多，需要不断的摸索和学习，截止20170602已经接触和使用VueJS一个多月了，遇到的问题很多，在此总结作以温故知新。

1、条件渲染问题

条件渲染指令包含： v-if 和 v-show

v-if指令有 v-if 、 v-else-if 、 v-else，这些指令需要它添加到一个元素上。我们可以把一个 <template> 元素当做该指令的包装元素，并在上面使用 v-if。最终的渲染结果不会包含 <template> 元素。

不同点：

v-show 的元素始终会被渲染并保留在 DOM 中，v-show 是简单地切换元素的 CSS 属性 display ，v-show 不支持 <template> 语法。

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。  
    相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。  
    一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

因此：问题来了，v-if 是惰性的，当条件从真变假，条件块内的事件监听器和子组件被销毁，当条件从假变真，条件块内的事件监听器和子组件开始重建，但什么时候重建成功？当条件从假变真时，从条件块内拿DOM元素，有取不到的情况，此时，需要做异步处理。

this.$nextTick(() => \{...\})//这个方法相当于window.οnlοad=function()\{\},等待页面重新渲染成功再执行下一步操作；一个异步执行的过程，一件事情执行成功，再执行下一件事情；

2、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)