left
:
0
;
top
:
0
;
background
:
url
(
'~@/images/loading.svg'
)
center center no
-
repeat #fff
;
width
:
100
vw
;
height
:
100
vh
;
z
-
index
:
1000
;
<
/
style
>
全局CSS
.fade-enter,
.fade-leave-active {
opacity: 0;
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
<transition name="fade">
<loading v-if="isLoading"></loading>
</transition>
</div>
原文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/102701914
原文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/102701914
解决Element中点开Dialog 对话框灰布在最上层的方法
解决Element中点开Dialog 对话框灰布在最上层的方法
append-to-body： Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
设置属性 :append-to-body='true’即可让对话框在最上层，灰布在它的下面
<el-dialog
title="付款信息"
:visible.sync="centerDialogVisible"
created方法是vue生命周期的created方法,创建vue实例的时候会被调用,接下来我们看一下她的效果吧
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
Vue首次加载Created正常显示数据，再次加载数据不对等
说下{自己}的理解：因为created存在缓存这个东西，当你的$route相同时为了提高效率它会加载缓存中的数据
例如：点击查看同一个详情页，首次ID=1001,再次ID=1002，这个时候第二次加载的数据其实是ID=1001的数据
解决方法：使route每次加载都不一样
在App.vue中的增加 :key="key"
<keep-alive>
<router-view :key="key"></rou
<!-- 重点就是这一句话，v-loading,加在你需要效果的标签上就行了，
他会自动在你的容器中间出现一层遮罩层并有个转圈的样式 -->
<div v-loading="show" @click="change" style="height:200px;width:200px">
Vue页面如何实现loading效果性能最佳？在讨论loading效果前，来看看loading有几种应用场景。页面加载的loading，数据加载的loading，用户操作等待响应的loading三种场景；页面加载的loading ，从发送浏览器加载页面请求前，展示一个loading 请求在页面最顶层；一般是旋转的loading图标，gif动图效果，或者采用css动画，旋转一个图片。等浏览器响应请求，ajax成功回调时，把loading 层隐藏不显示，即结束了loading。这个时候，页面的骨架html的主要
我们经常看到数据未出现时，页面中会有一条提示消息， 页面正在加载中，如何实现该效果呢 ，请看下面代码<template>
<section class="page" v-if="option"
:style="{background: option.background,color: option.color||'#fff'}"
:class=
<template>
<div class="markbox" v-show="loading" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="sun-lo...
doSearchAnimal(query){
this.dataParaAnimal.page=1 //从第一页开始
this.dataParaAnimal.querycont...
对浏览器来说，已经完成了dom与css规则树的render，并完成对render tree进行了布局，而浏览器收到这一指令，调用渲染器的paint（）在屏幕上显示，而对于vue来说，在mounted阶段，vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，即可以调用节点了（关于这一点，在笔者测试中，在mounted方法中打断点然后run，依旧能够在浏览器中看到整体的页面）。通过浏览器的渲染过程，可以总结出created和mounted的使用场景。
created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次（作用：可用于页面预加载数据）；
mounted()：页面初始化完成后，加载完dom后触发，与created一样只会触发一次（可用于页面加载数据）
activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据（作用：可解决页面返回上一页后，重新进入此页面的数据刷新问题
