php 与 vue执行顺序,vue项目js导入加载顺序详解

本文探讨了在Vue项目中遇到的js导入加载顺序错误问题,指出当界面未完全加载时执行js可能导致报错。通过利用Vue的mounted生命周期钩子,可以确保js在元素渲染完毕后正确执行。例如,将js代码封装为模块并暴露方法,在Vue组件的mounted阶段调用,可以避免此类错误。
摘要由CSDN通过智能技术生成

.进入vue项目学习后,时常会出现js导入后的加载顺序不当的报错,本文主要和大家分享vue项目js导入加载顺序详解,希望能帮助到大家。

在引入的js中:var block = document.getElementById("block");

// 绑定touchstart事件

block.addEventListener("touchstart", function(e) {});

2.由于界面是由上自下的形式进行解析加载的,此时若不是在界面全部加载完毕后进行加载该js,即会报错,错误如下图所示:

616bbde4d4558714dd6fdba73edfe068.png

3.此时需要利用vue项目中的mounted方法,对该js进行方法暴露

a.vueimport {touchAction} from '../../static/js/touchAction.js';mounted(){ touchAction();

},

b.jsexport let touchAction = function () {

console.log("clientWidth:"+document.body.clientWidth); var block = document.getElementById("block");

block.addEventListener("touchstart", function(e) {})

}

相关推荐:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值