精华内容
下载资源
问答
  • 主要介绍了Vue.js 关于页面加载完成后执行一个方法的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 今天小编就为大家分享一篇VUE DOM加载后执行自定义事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 首先我们会想着在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在页面加载执行某个方法的实现代码,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 如下所示: var c = new Vue({ el: "#cartoon", data: data, mounted: { ...以上这篇vue加载完成后的回调函数方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • created页面加载未渲染html之前执行。 mounted渲染html执行。 由于created在html模板生产之前所以无法对Dom进行操作而mounted可以。 补充知识:关于Vue子组件data选项某个属性引用子组件props定义的属性的几点...
  • 在模板渲染成html调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。 methods : { indexs : function ( ) { this . $http . post ( '{:url("Index/fun")}' ) . then ( function ...

    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();
            }
    
    展开全文
  • 主要介绍了vuejs实现ready函数加载完之后执行某个函数的方法,需要的朋友可以参考下
  • Vue.nextTick( [callback, context] )方法在页面元素加载完成之后,执行里面的方法 this.$nextTick(()=>{ //元素加载完成后执行的代码 });

    Vue.nextTick( [callback, context] )方法在页面元素加载完成之后,执行里面的方法

    this.$nextTick(()=>{
        //元素加载完成后执行的代码
    });
    
    展开全文
  • 用Promise来实现 function2(){ // 你的逻辑代码 return Promise.resolve(/...拓展知识:vue解决一个方法同时发送多个请求的问题 在项目开发过程中,让人抓狂之一的问题就是一个点击事件,当快速点击的时候,它会重复
  • 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.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({
    	el: '#vue_list',
    	data: {
    		list: {}
    	},
        // 事件区域
        created(){
          // 点击事件
        },
        //存放方法区域
        methods: {
        	// 创建convert方法
    		convert:function () {
    			axios.post("{:url('indexApi/client')}").then(res => {
                    //ajax返回值赋值给 data中list
    				this.list=res
    			})
    		}
        },
        //页面加载完自动加载区域
        mounted(){
            //自动加载convert方法
            this.convert();
        }
    })
    </script>

    第二种方法

    new Vue({
    	el: '#vue_list',
    	data: {
    		list: {}
    	},
        //数据渲染后的操作
        created(){
          // 点击事件
        },
        // 方法存放区
        methods: {
        	/*var that=this;
    		convert:function () {
    			axios.post("{:url('indexApi/client')}").then(res => {
    				that.list=res
    			})
    		}*/
    		/*function i_list(data){
    			$.post("{:url('indexApi/client')}",data,function(e){
    	        	console.log(e)
    	        	that.list=e
    	        })
    		}*/
        },
        //页面加载完自动执行
        mounted(){
        	var that=this,data={}
            $.post("{:url('indexApi/client')}",data,function(e){
                // 赋值给data 中list
            	that.list=e
            })
        }
    })

     

    展开全文
  • 今天小编就为大家分享一篇Vue页面数据渲染完成之后的调用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在methods 中,使用 $nextTick 
  • html源码: <template> //:is里面装的是组件名称 :child="child"是指子组件需要的数据 <component:is="isComponent":child="childValue"></component> </template>......
  • 下面小编就为大家分享一篇vue实现图片加载完成前的loading组件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 一般在index.js中都是这么引入的组件 import from '@/pages/my' import Cart from '@/pages/cart' import Order from '@/pages/order' import TMap from '@/pages/map' import New from '@/pages/new' ...
  • 很多时候用this.$nextTick并不能满足需求 通过定时器,判断document... // 判断文档和所有子资源(图片、音视频等)已完成加载 if (document.readyState === 'complete') { //执行方法 _this.fn() window.clearInterv
  • VUE 等数据加载之后再执行某些操作

    千次阅读 2020-05-27 16:46:12
    解决:存储状态,刷新之前记录当前是哪个页面用sessionStorage保存 而菜单是动态获取的,拿到菜单模拟点击事件,就可以定位到当前保存的页面了 判断对象数组中是否有某个属性:(参考...
  • 之前用@load的时候总是不生效。 其实原因是这样的: image src有值的时候,才开始加载 onload事件是在src的资源加载完毕的时候,才会触发 这样的话,在img标签的... console.log("资源加载完毕执行"); }, }, ...
  • vue+ajax实现页面加载完成后渲染页面

    千次阅读 2020-01-02 10:41:57
    完vue很长时间了但是一直在实际工作开始中用到...我想实现页面加载完成立马去渲染页面 new Vue({ el:"#award", data:{ msg:[] }, methods:{ getData:function(){ let self = this; ...
  • vue 图片加载完成事件

    千次阅读 2019-08-14 14:38:51
    页面里有ajax请求数据,...想到了image的onload事件,当图片加载完成之后再显示页面 原生js <img onload="get(this)" src="..." style="display: none"/> <script type="text/javascript"> functi...
  • https://www.jianshu.com/p/50e118628054
  • var iframe = document.getElementById("content");... $(iframe).hide();... } iframe执行后加载行为,上面的代码表示iframe加载新的page页面完成后,再显示页面,避免了加载过程中的闪烁(尤其vue会闪烁)。
  • 前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载。这个功能我们...
  • 这篇文章主要介绍了vue如何实现动态加载脚本,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 今天在研究,tinymce富文本编辑器怎样在vue中使用,然后看到其它...
  • 作者:愣锤 ...如果你是vue大佬,请忽略小弟的愚见V查看打包各文件的体积,帮你快速定位大文件路由懒加载(也叫延迟加载)开启gzip压缩代码详情页返回列表页缓存数据和浏览位置...

空空如也

空空如也

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

vue页面加载完成后执行

vue 订阅