vue进入页面时函数调用,vue渲染函数的使用场景

　　本文主要介绍了vue.js渲染界面后如何调用函数的实现方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

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

　　使用vue.js框架时，有时希望在页面渲染完成后，执行function方法来处理初始化相关的操作。如果只处理页面位置、宽度或高度，那么必须在页面完全渲染后进行，在页面加载前得到的宽度和高度是不准确的。

　　用过jquery的人都知道有现成的方法可以用，但是vue.js需要结合watch和nextTick方法使用。

1.下面开始介绍下

　　在页面上加载数据列表后，页面会自动滚动到中间的列表元素。渲染完列表数据后，计算列表的高度，然后控制定位到指定行。

　　首先介绍下一次尝试不生效的方案，这也是大家最容易出错的地方。vue.js提供的mounted函数表示挂接在实例上后被调用。

2.运行之后

　　发现执行mounted时，得到的高度值是错误的。也可以通过制作断点来找到它。此时，页面没有呈现，列表块仍然是空白的。

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

　　有一个nextTick方法，意思是在下一个DOM更新周期结束后执行一个延迟的回调。

　　使用此方法可以在修改数据后立即获取更新的DOM。

　　用了之后发现还是解决不了我需要的效果。

4.继续查询api文档发现

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

　　对应一个对象，键是观察表达式，值是对应的回调。再试一次，运行后还是失败。

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

　　观察：{

　　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=演示

　　列表“{item}}/div中的li v-for=item

　　/ul

　　新Vue({

　　埃尔： #演示，

　　数据：{

　　list=[0，1，2，3，4，5，6，7，8，9，10]

　　方法：{

　　push:function(){

　　this . list . push(11)；

　　this.nextTick(function(){

　　警报(“数据已更新”)

　　});

　　这个。$nextTick(function(){

　　Alert(v-for渲染已完成)

　　})

　　}

　　})

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。