vue实际项目解决办法

解决vue变量未渲染前代码显示问题

将v-cloak最好写在根标签上：

<div v-cloak>  
    {{demo}}  
</div> 

绑定动态的样式

:style="{'stroke-dasharray': item.img}"

注：属性为 stroke-dasharray使用单引号区分，不然会报错

v-for多层循环

 <div v-for="(item,index) in items">
    <div v-for="(lists,typesIndex) in item.types">
         <div  v-for="(list,key) in lists.sites"></div>
     </div>
 </div>

自定义滚动事件

在mian.js中注册

Vue.directive('scroll', {
    inserted: function (el, binding) {
        let f = function (evt) {
            if (binding.value(evt, el)) {
                window.removeEventListener('scroll', f)
            }
        }
        window.addEventListener('scroll', f)
    }
});

在具有的html
<div v-scroll="handleScroll"></div>

实现上拉刷新组件

通过npm引入
1. 安装better-scroll
npm install better-scroll

2. 页面中引入better-scroll
import BScroll from 'better-scroll'

3. 如果不支持import，可使用
var BScroll = require('better-scroll')

参考链接：https://blog.csdn.net/qq_22557797/article/details/78866328