精华内容
下载资源
问答
  • 首先我们会想着mounted或者created里面加入想要执行方法,但是有的时候会遇到执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。 解决思路: 1.通过子页面调用...

    首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。

    解决思路:

    1.通过子页面调用父页面的方法,因为在子页面开始渲染的时候,你的父页面肯定是已经渲染好了的,前提这里的方法中是去找寻父页面的标签。

    2.直接在本页面监视一个参数,发现参数被初始化了,说明页面也已经加载完成,因为你的页面用到了这个参数。

     

    方法1案例:tab页里的子页面如果没有内容就隐藏

    父页面代码

    <el-tabs v-model="initTab" type="card">
      <el-tab-pane label="1信息" name="tab1">
        1
      </el-tab-pane>
      <el-tab-pane label="2报告" name="tab2">
        2
      </el-tab-pane>
      <el-tab-pane label="3信息" name="tab3">
        3
      </el-tab-pane>
      <el-tab-pane label="4信息" name="tab4">
        <ziyemian-group @tabShow="tabShow" title="4信息" v-if="detailInfo">
        </ziyemian-group>
    
      </el-tab-pane>
      <el-tab-pane label="5信息" name="tab5">
        5
      </el-tab-pane>
      <el-tab-pane label="其它信息" name="tab6">
        6
      </el-tab-pane>
    </el-tabs>
    
    import ZiyemianGroup from './ZiyemianGroup.vue'
    components: {
      ZiyemianGroup
    },
    data () {
        return {
            detailInfo: {},
            initTab:‘tab1’
        }
    }
    methods: {
      tabShow: (data) => {
        document.getElementsByClassName('el-tabs__item').item(4).style.display = data
      },
    }

    然后是ZiyemianGroup.vue的代码,这里主要就是方法调用,页面自己搞定

    data () {
      return {
        list: []
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init() {
        if (list.length > 0) {
            this.$emit('tabShow', 'inline')
        } else {
            this.$emit('tabShow', 'none')
        }
      )
    }

    list是子页面的内容,这样如果子页面没有内容就可以隐藏掉了

     

    方法2案例:我这边需要tab页隐藏

    <el-tabs v-model="initTab" type="card">
      <el-tab-pane label="1信息" name="tab1">
        1
      </el-tab-pane>
      <el-tab-pane label="2报告" name="tab2">
        2
      </el-tab-pane>
      <el-tab-pane label="3信息" name="tab3">
        3
      </el-tab-pane>
      <el-tab-pane label="4信息" name="tab4">
        <ziyemian-group title="4信息" v-if="detailInfo">
        </ziyemian-group>
    
      </el-tab-pane>
      <el-tab-pane label="5信息" name="tab5">
        5
      </el-tab-pane>
      <el-tab-pane label="其它信息" name="tab6">
        6
      </el-tab-pane>
    </el-tabs>
    
    import ZiyemianGroup from './ZiyemianGroup.vue'
    components: {
      ZiyemianGroup
    },
    data () {
        return {
            detailInfo: {},
            initTab:‘tab1’
        }
    }
    watch: {
      detailInfo: function () {
        this.$nextTick(function () {
          this.tabShow()
        })
      }
    },
    methods: {
        tabShow () {
            document.getElementsByClassName('el-tabs__item').item(6).style.display = 'none' // 隐藏tab6
        }
    }

    nextTick方法,意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

    隐藏tab的方法我用了原生js,因为vue生成后的页面和写的vue页面有所差别,所以我直接用了最笨的方法进行匹配。

    展开全文
  • 主要介绍了Vue.js 关于页面加载完成执行一个方法的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了详解Vue.js在页面加载执行某个方法的实现代码,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 今天小编就为大家分享一篇VUE DOM加载执行自定义事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在Vue脚手架项目中,所有以import方式导入的组件的html+css+js等都会编译到app.js文件中----所以这个文件会很大,但是这个文件必然首屏加载的时候下载。 这就导致了首屏加载慢!解决的方法:1.异步延迟加载 先看非...

    在Vue脚手架项目中,所有以import方式导入的组件的html+css+js等都会编译到app.js文件中----所以这个文件会很大,但是这个文件必然在首屏加载的时候下载。 这就导致了首屏加载慢!

    解决的方法:1.异步延迟加载

    先看非异步延迟加载,index.js文件中

    import  About from '../components/About.vue';
    //一旦这样写,后续项目打包结束将会直接打包到app.js文件中
    
    const routes = [
       {
         path: '/about',
         component: About      //引入组件     
       }
    ]

    正确的懒加载方法

    //第一步注释import导入的文件
    //import  About from '../components/About.vue';
    
    
    //第二步将引入组件的方式以箭头函数的方式异步引入
    const routes = [
       {
         path: '/about',
         component: () => import( /* webpackChunkName: 'about' */ '../components/About.vue' )
       }
    ]
    
    注意:import中  /* webpackChunkName: 'about' */ 这个注释必须有,这个为将来打包命名
    
    
    结果:最后打包工具打包不会将 About.vue组件中的内容打包进app.js中,
          它会单独打包成一个新的about.js文件,并在页面加载完成后异步加载,从而达到懒加载效果

    缺点就是,如果客户不想看About页面,但是还是会下载数据,导致----偷跑流量

    解决的方法:2.彻底懒加载,这个方法只有当客户访问About页面时,才开始下载数据

    彻底懒加载:需要自己在vue脚手架项目根目录下配置文件

     第一步: 这种方式基于异步延迟加载方式上,也就是先实现异步延迟加载后
    
     第二步: 跟目录创建文件: vue.config.js    
      
     第三步: 文件添加以下代码:
     
                 module.exports={
      			chainWebpack:config=>{
        				config.plugins.delete("prefetch") //取消预加载
      			}
    		}
     

    总结: 异步延迟加载,容易偷跑流量,对于PC端来说影响不大,适用于PC端

    彻底懒加载,基于异步延迟加载,多了一步配置文件,不会偷包流量,适用于移动端

    展开全文
  • created: ...模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。 methods: { indexs:function(){ this.$http.post('{:url("Index/fun")}') .then(function(res){ ...

    created

    在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

    methods: {
                indexs:function(){
                    this.$http.post('{:url("Index/fun")}')
                        .then(function(res){
                            this.items=res.data;
                            console.log(res.data);
                        })
                        .catch(function(error){
                            console.log(error);
                        });
                }
            },
            created(){
                //自动加载indexs方法
                this.indexs();
            }
    

    mounted

    在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

    methods: {
                indexs:function(){
                    this.$http.post('{:url("Index/fun")}')
                        .then(function(res){
                            this.items=res.data;
                            console.log(res.data);
                        })
                        .catch(function(error){
                            console.log(error);
                        });
                }
            },
            mounted(){
                //自动加载indexs方法
                this.indexs();
            }
    
    展开全文
  • Vue.js在页面加载执行某个方法

    千次阅读 2018-05-22 10:23:38
    jQuery中可以这样写vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted附上vue.js的生命周期函数执行流程

    jQuery中可以这样写



    vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted



    附上vue.js的生命周期函数执行流程


    展开全文
  • Vue.nextTick( [callback, context] )方法在页面元素加载完成之后,执行里面的方法 this.$nextTick(()=>{ //元素加载完成执行的代码 });
  • 如下所示: var c = new Vue({ el: "#cartoon", data: data, mounted: { ...以上这篇vue加载完成后的回调函数方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 前言很多时候访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载。这个功能我们...
  • 使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能。 1、安装vuex npm install vuex --save 2、项目目录下找到store.js文件 ...
  • 很多时候用this.$nextTick并不能满足需求 通过定时器,判断document... // 判断文档和所有子资源(图片、音视频等)已完成加载 if (document.readyState === 'complete') { //执行方法 _this.fn() window.clearInterv
  • vue 图片加载完成事件

    千次阅读 2019-08-14 14:38:51
    页面里有ajax请求数据,...想到了image的onload事件,当图片加载完成之后再显示页面 原生js <img onload="get(this)" src="..." style="display: none"/> <script type="text/javascript"> functi...
  • VUE页面实现加载外部HTML方法

    万次阅读 2019-06-04 17:47:24
    本文主要和大家介绍VUE页面加载外部HTML的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 不同以往的IFRAME标签,那种方式比较Low,另外有...
  • 一、vue的两种安装方式(1)直接html中引入vue.js(2)通过vue+nodeJS搭建我们采用的是第二种方式二、vue和nodeJS的关系(1)nodeJS不是一个js框架,是一个基于Chrome V8引擎的javascript运行环境,所以会产生众多基于...
  • this.mounted=function(){ this....页面的渲染过程无需等到 mount 中的方法执行完成后才能进行 那为什么会造成这种情况呢?经过排查,发现是 getAllVirtualResourceList 函数的 ajax 请求中,用到了
  • created页面加载未渲染html之前执行。 mounted渲染html后再执行。 由于createdhtml模板生产之前所以无法对Dom进行操作而mounted可以。 补充知识:关于Vue子组件data选项某个属性引用子组件props定义的属性的几点...
  • I have a Vue.JS application with a beforeDestroymethod that I'm trying to use to store some data in local storage before the app closes or is reloaded. Just for reference:beforeDestroy: function() {lo...
  • 需要在加载页面的时候调用生成验证码的click事件函数 解决方法如下,利用Vue中的mounted mounted:function(){ this.createcode();//需要触发的函数 } //下面是createcode函数 createcode(){ var self = this;...
  • build/webpack.base.conf.js下:这里,定义了vue的程序入口文件 执行index.html文件 执行main.js文件 main.js挂载了app.vue文件,用app.vue的templete替换index.html中的 main.js中注入了路由文件,将对应的...
  • 想到了image的onload事件,当图片加载完成之后再处理图片。 原生js <img "get(this)" src="..." style="display: none"/> <script type="text/javascript"> function get(ts){ ts.style.d...
  • vue 页面加载完自动请求ajax加载数据

    千次阅读 2020-09-04 09:06:14
    首先要引入vue.js 再引入axios.js <script src="/static/vue/kf_vue.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> <script> new...
  • 作者:愣锤 ...如果你是vue大佬,请忽略小弟的愚见V查看打包后各文件的体积,帮你快速定位大文件路由懒加载(也叫延迟加载)开启gzip压缩代码详情页返回列表页缓存数据和浏览位置...
  • 使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。之前使用jquery的时候,有ready可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,399
精华内容 16,559
关键字:

vue页面加载完成在执行的方法

vue 订阅