Vue.js 标记为无效 HTML答案

【问题标题】：Vue.js tag as invalid HTMLVue.js 标记为无效 HTML
【发布时间】：2018-04-26 09:31:05
【问题描述】：

我的 Vue 变量被定义为无效的 HTML 标记。如何防止这种情况以及如何使用我的 Vue.js 变量？

我收到此错误：此处不允许使用属性 v-bind，检查会将未知的 HTML 标记属性高亮显示为无效，并让此类属性标记为自定义以避免将它们高亮显示为无效

我使用 Intellij

<script  src="../../static/js/vue.js"></script>

<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>

<script>
var app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'You loaded this page on ' + new Date().toLocaleString()
    }
})
</script>

【问题讨论】：

错误消息似乎在告诉您如何处理它："...将此类属性标记为自定义以避免将它们高亮为无效。"（但它是很难分辨，因为您没有正确标记错误消息，因此很难区分错误消息与您自己的文本的哪一部分）。

标签： javascript html intellij-idea vue.js vuejs2

【解决方案1】：

您的代码有效（参见 sn-p）。只要确保 Vue 定义明确。

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'You loaded this page on ' + new Date().toLocaleString()
    }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app-2">
  <span v-bind:title="message">
      Hover your mouse over me for a few seconds to see my dynamically bound title!
  </span>
</div>

【讨论】：

【解决方案2】：

您可以在其前面添加data- 前缀，使其成为有效的 html 属性。

<span data-v-bind:title="message">

【讨论】：

然后我得到错误：命名空间数据-v-绑定未绑定，此检查检查 xml 中未绑定的命名空间前缀
然后声明命名空间。

【解决方案3】：

问题似乎是冒号。你可以这样写：

<span v-bind="{title: message}">

这将在 IntelliJ 中工作。

【讨论】：

【解决方案4】：

帮助我解决错误的原因是改变 <html> 到 <!DOCTYPE html>

【讨论】：