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

【问题标题】：Including Vue js instances on all pages, even when element doesn't exist在所有页面上包含 Vue js 实例，即使元素不存在
【发布时间】：2015-10-19 00:24:53
【问题描述】：

在我的网络应用程序中，我使用 Vue.js 来构建网站周围的一些小组件。我将 Vue 实例存储在他们自己的 js 文件中，我使用 gulp 连接、缩小等。

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

[Vue warn]: Cannot find element: #vueElement

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

【问题讨论】：

这个答案解释了更多stackoverflow.com/a/37902612/580651

标签： javascript vue.js

【解决方案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'
    );
}

我希望这有效！

【讨论】：

你可以做if (element)

【解决方案2】：

我没有看到任何内置方式这样做。

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

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

所以你可以这样写：

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

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

【讨论】：

【解决方案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/

【讨论】：

这样，你必须有 jQuery 或其他查询选择器框架或库来处理$(selector)，我个人建议你使用原生/香草方式 (document.getElementById)因为你不需要一个完整的图书馆来达到这个目的。 =) 检查@Needpoule 的答案。
jQuery 并不是我回答的重点......我还是把它删除了。我的观点是创建一个可重用的函数。你可以在里面使用你想要的选择器，它没有任何区别。
不过，我还是更喜欢@Needpoule 的回答。