Question

例如，我具有香草JS功能：

if (window.devicePixelRatio >= 2) {
            document.querySelectorAll('img.retina').forEach(function (e) {

     let parts = e.src.split('.');
     let ext = parts.pop();

     if (parts.join('.').indexOf('@2x') == -1) e.src =  parts.join('.') + '@2x.' + ext;

  });

}

如果js检测到视网膜显示，则只需更改图像的src。如何在使用vue.js的应用程序中使用它（在何处放置此函数）？

如果我将其装入机架，将无法正常工作。如果我使用路由器在SPA页面中导航，则只能在首页加载时工作：

new Vue({
el: "#app",
router,
    render: h => h(App),
    mounted() {
        retinaFunction();
    },
})

视网膜功能并不重要，我主要是问vue.js应用程序中的香草JS在哪里以及如何使用自定义功能。

Answer 1

我希望它可以在mounted中工作，您是否要对this.$el....或其他内容进行修改？

请注意文档https://vuejs.org/v2/api/#mounted

中的警告

请注意，安装并不能保证所有子组件都具有也已安装。如果您想等到整个视图渲染后，您可以在已安装的内部使用vm。$ nextTick：

您有子组件吗？也许您需要将其捆绑：

mounted(){
  this.$nextTick(() => {
    this.$el....;
  }
}

如何添加香草javascript函数vue.js应用？

1 个答案: