Detailed explanation of vue project js import loading sequence

. After entering the vue project to study, errors often occur about the improper loading order after js import. This article mainly shares with you the detailed explanation of the js import and loading order in the vue project. I hope it can help everyone.

In the imported js:

 var block = document.getElementById("block");    
 // 绑定touchstart事件
block.addEventListener("touchstart", function(e) {});

2. Since the interface is parsed and loaded from top to bottom, if the js is not loaded after all the interface is loaded, An error will be reported, as shown below:

3. At this time, you need to use the mounted method in the vue project to expose the js method

a.vue

import {touchAction} from '../../static/js/touchAction.js';

 mounted(){   touchAction();
  },

<img src="../../static/pic/btn-control.png" alt="" class="control-derection" id="block">

b.js

export let touchAction = function () {
    console.log("clientWidth:"+document.body.clientWidth);    var block = document.getElementById("block");
    block.addEventListener("touchstart", function(e) {})
}

Related recommendations:

Vue loading order example discussion

Detailed explanation of the loading order and execution principle of high-performance javascript

The loading order and execution of html, css and js files

The above is the detailed content of Detailed explanation of vue project js import loading sequence. For more information, please follow other related articles on the PHP Chinese website!