vue开发笔记（一）

一.vue，在需要动态增减页面dom时，优先利用mvvm的特性，改变dom对应的数据内容，从而完成dom的改变。
eg:多行拖拽排序的时候，需要根据用户选择，动态操作页面，将选中的多行div，放置在一个父div中，就可以改变对应的v-for的数据。
父子甚至孙子div，就可以通过【递归】在<template>，循环出来。配合数据变化，完成页面dom增减。

二.在vue组件dom渲染中，遇到样式变形，操作时，没有dom。可能是vue组件还没渲染完成的原因。
this.nextTick
作用：$nextTick目的就是把传进来的函数延迟到dom更新后再使用。
setTimeOut也可达到一定程度的效果。
可以配合组件上v-if同时使用，完成dom的相关视图刷新和操作。

三.vue中一些组件，显示的高度，宽度等变形，如element table，封装成组件后，max-height设置了，表格高度任然挤在一起。
问题原因：可能的原因是之一，便是在ajax数据填充前，组件已经完成渲染造成的。
解决方式：给组件增加v-if属性，在ajax数据填充前，先隐藏组件，在填充之后在显示渲染组件、

四.vue中img标签动态传递src图片加载不出来的问题。

imgSrc = "../img/icon.png";
<img :src="imgSrc">

 

如上：图片无法加载出来，原因是因为vue会将src解析为静态资源，不会进行编译。
解决方法：

imgSrc = required( "../img/icon.png"); // 用required加载即可。

 

五.elementUI—table错列问题

如下：通过showUser控制用户列的展示与隐藏，会引发错列。

<el-table-column
 v-if="showUser"
 prop="user"
 label="用户"
 width="180">
</el-table-column>

解决方法，为每一列el-table-column增加key属性唯一标识，即可解决。

<el-table-column
v-if="showUser"
prop="user"
label="用户"
width="180"
key="1">
</el-table-column>