在vue.js渲染完界面之后如何再调用函数

目录
  • vue.js渲染完界面后调用函数
    • 1.下面开始介绍下
    • 2.运行之后
    • 3.此时查询官方api文档发现
    • 4.继续查询api文档发现
    • 5.最终把watch和nextTick组合一起
    • 6.运行后发现
  • vue渲染完成事件
    • vue里面本身带有两个回调函数

vue.js渲染完界面后调用函数

在使用vue.js框架的时候，有时候会希望在页面渲染完成之后，再执行函数方法来处理初始化相关的操作，如果只处理页面位置、宽或者高时，必须要在页面完全渲染之后才可以，页面没有加载完成之前，获取到的宽高不准确。

使用过jquery的都知道，有个ready方法可以使用，但vue.js则需要结合watch和nextTick方法来使用。

1.下面开始介绍下

在页面加载一个数据列表完成之后，页面自动滚动定位到中间某个列表元素，需要在列表数据渲染完成，计算列表高度，再控制定位到指定行。

首先介绍下一开始尝试没有生效的方案，这也是大家最容易出现错误的地方，vue.js提供的mounted函数，表示挂载到实例上去之后调用该钩子。

2.运行之后

发现mounted执行的时候，获取到的height值不对，打个断点也可以发现，此时页面没有渲染完成，列表块还是一片空白

3.此时查询官方api文档发现

有一个nextTick方法，意思是在下次 DOM 更新循环结束之后执行延迟回调。

在修改数据之后立即使用这个方法，获取更新后的 DOM。

使用之后发现，还是不能解决我所需要的效果

4.继续查询api文档发现

watch方法，用于观察Vue实例上的数据变动。

对应一个对象,键是观察表达式,值是对应回调，再次尝试，运行后发现还是不行

5.最终把watch和nextTick组合一起

watch:{    
	showList:function(){        
	this.goPrice(0);    
}}

showList对应表格页面的绑定变量

<tr v-for="(item,index) in showList">

6.运行后发现

已经达到了预期的效果

最后说明下，有时候我们会想到使用setTimeout的方式来实现，使用这种方式需要设置个超时执行时间，由于渲染时间无法确定，有快有慢，就会出现不稳定的现象。

vue渲染完成事件

vue里面本身带有两个回调函数

  • 一个是`Vue.nextTick(callback)`，当数据发生变化，更新后执行回调。
  • 另一个是`Vue.$nextTick(callback)`，当dom发生变化，更新后执行的回调。

栗子：

...
<ul id="demo">
    <li v-for="item in list">{{item}}</div>
</ul>
...
new Vue({
    el:'#demo',
    data:{
        list=[0,1,2,3,4,5,6,7,8,9,10]
    },
    methods:{
        push:function(){
            this.list.push(11);
            this.nextTick(function(){
                alert('数据已经更新')
            });
            this.$nextTick(function(){
                alert('v-for渲染已经完成')
            })
        }
    }
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue在页面数据渲染完成之后的调用方法

    在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度.之前在使用jquery的时候,有ready可以帮助我们实现,但是Vue不存在此类方法,我们需要结合watch和this.$nextTick()来实现. nextTick:在下次 DOM 更新循环结束之后执行延迟回调. watch:用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调. 之前我是这样子使用nex

  • vuejs实现ready函数加载完之后执行某个函数的方法

    vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 我期望vue中tds全都渲染在界面上之后,再调用一个函数(其实这个函数主要作用是给表格中的选择框加监听,如果tds没有渲染,那监听也加不上去). <div class="row" id="app"> <div

  • vue2.0$nextTick监听数据渲染完成之后的回调函数方法

    vue里面本身带有两个回调函数: 一个是`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调. 另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调. 栗子: ... <ul id="demo"> <li v-for="item in list">{{item}}</div> </ul> ... new Vue({ el:'#demo', data:

  • 在vue.js渲染完界面之后如何再调用函数

    在vue.js渲染完界面之后如何再调用函数

    目录 vue.js渲染完界面后调用函数 1.下面开始介绍下 2.运行之后 3.此时查询官方api文档发现 4.继续查询api文档发现 5.最终把watch和nextTick组合一起 6.运行后发现 vue渲染完成事件 vue里面本身带有两个回调函数 vue.js渲染完界面后调用函数 在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不准确. 使用过j

  • vue 每次渲染完页面后div的滚动条保持在最底部的方法

    实例如下: //每次页面渲染完之后滚动条在最底部 updated:function(){ this.$nextTick(function(){ var div = document.getElementById('dialogue_box'); div.scrollTop = div.scrollHeight; }) } //第一次页面渲染完之后滚动条在最底部 methods:function(){ this.$nextTick(function(){ var div = document.ge

  • ajax请求+vue.js渲染+页面加载的示例

    1.导入js <script type="text/javascript" src="<c:url value="/resources/lib/jquery/jquery-1.11.0.min.js" />"></script> <!--标准mui.css--> <link href="<c:url value=" rel="external nofollo

  • 用v-html解决Vue.js渲染中html标签不被解析的问题

    用v-html解决Vue.js渲染中html标签不被解析的问题

    前言 最近在工作中遇到一个问题,在网页中后台传来的json数据中包含html标签,将该json数据绑定到Vue.js中对象中,对该对象进行for循环,发现数据中的html标签不能被解析,而是当作字符显示出来. 问题如下所示: 解决方法: Vue.js中提供了v-html这个指令来解决这个问题,或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象,就可以正常解析了. 代码改动如下: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家都 学习或者工作能带来一定的帮助,如果有疑问大家

  • 使用Vue.js开发微信小程序开源框架mpvue解析

    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮

  • Vue.js每天必学之组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 注册 之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone

  • nginx+vue.js实现前后端分离的示例代码

    1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

  • Vue.js响应式数据的简单实现方法(一看就会)

    Vue.js响应式数据的简单实现方法(一看就会)

    目录 引言 基本概念 副作用函数 响应式数据 响应式数据的基本实现 实现思路 初步实现尝试 完善响应系统 泛化副作用函数名 修复漏洞 总结 引言 在Vue.js之中,Vue会自动跟踪JavaScript状态变化并在状态发生改变时响应式地更新DOM,这就是Vue.js的两大核心功能之一——响应性,是每一个Vue.js框架使用者必须熟练掌握的的功能.而得益于Vue.js自身支持的声明式渲染,Vue.js的学习成本大大降低,就算是一个前端领域的小白,只要能看懂并简单使用基本的HTML.JavaScri

  • vue在html标签{{}}中调用函数的方法总结及对比

    目录 一.问题 1)实现上述需求:有两种方式 2)两种实现方式对比: 二.解决方法(在html渲染时调用函数) 1.定义处理函数 2.引入处理函数,在data中定义函数,在html中使用 3.效果 4.优化 三.总结 一.问题 1.在html中对数据中的某一个标签是根据标签的类型书写的,值写在了{{}}中,希望显示的时候对值做某种细节处理. 例如:我的需求:后端返回姓名.年龄.出生日期.学历等组成的一个数组,出生日期要保存为带有时分秒的,但是显示时不需要时分秒. 1)实现上述需求:有两种方式 a

  • Vue.js搭建移动端购物车界面

    本文介绍了如何使用Vue搭建一个移动端购物车界面,最终实现的功能包括: 1. 选择要最终购买的物品 2. 选择每件物品购买的数量 3.  实时更新所选择物品的总价格 HTML部分 首先给出HTML部分代码和注释,显示了整个界面的结构. <body> <div class="checkout"> <div id="app"> <div class="container"> <div class=

随机推荐