Question

在我的网络应用程序中，我将Vue.js用于网站周围的许多小组件。我将Vue实例存储在他们自己的js文件中，我使用gulp对其进行连接，缩小等。

如果页面上不存在特定Vue实例的目标元素，则控制台中会出现警告，这是一个小问题：

[Vue warn]: Cannot find element: #vueElement

虽然这不会对任何事情造成伤害，但它让我想知道加载我的Vue实例的正确方法是什么。如果目标元素不存在，有没有办法防止它被触发？

Answer 1

var element = document.getElementById('vueElement');

if(element != null)
{
    // your code will be here, an example is shown below
    var app = new Vue(
       el: '#vueElement'
    );
}

我希望这有效！

Answer 2

我没有看到任何内置的方式。

如果在构造函数中提供el选项，则Vue实例将自动编译。

如果您不提供el选项，则可以使用$ mount方法手动编译组件。

所以你可以这样写：

var app = new Vue({}); //don't include the el option here

if(document.getElementById("vueElement")) {
    app.$mount("#vueElement");      
}

Answer 3

就个人而言，为此目的，我使用的函数只有在目标元素存在时才会初始化Vue：

function vueInit(elementId, options) {
    var element = document.getElementById(elementId);
    if (element) {
        options.el = element;
        new Vue(options);
    }
}

用法：

vueInit("app", {
    data: {
        message: "It works!"
    }
});

https://jsfiddle.net/50wL7mdz/14194/

在所有页面上包含Vue js实例，即使元素不存在

3 个答案: