IntelliJ中Vue.js标签及v-bind属性被标为无效HTML的解决方法

嘿，我之前也碰到过IntelliJ对Vue语法不友好的情况，咱们一步步搞定这些问题：

一、让IntelliJ正确识别Vue语法 #

首先得确保IDE能“看懂”Vue的指令和变量，最关键的是装对插件：

• 打开IntelliJ，去 File → Settings → Plugins（Mac上是 IntelliJ IDEA → Settings → Plugins）
• 在搜索框输入Vue.js，找到官方插件后点击安装，重启IDE
  装完插件后，IDE应该自动识别v-bind这类指令，还有Vue的变量绑定，不会再乱标红了。

如果装了插件还是有个别属性被标红，咱们手动配置忽略规则：

• 去 File → Settings → Editor → Inspections → HTML
• 找到Unknown HTML tag attribute，点击它
• 在右侧的Ignored attributes里添加v-*（这样所有以v-开头的Vue指令都会被忽略检查）
• 要是你有自定义组件标签被标成无效，就去同目录下的Unknown HTML tag，在Ignored tags里添加你的组件名就行。

二、正确使用Vue变量和v-bind指令 #

从你的代码片段来看，差了最关键的Vue实例初始化部分！咱们补全它：

<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 dynamic title!
  </span>
</div>
<script>
// 必须创建Vue实例，绑定到页面上的#app-2元素
var app2 = new Vue({
  el: '#app-2', // 关联DOM元素
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString() // 定义你要绑定的变量
  }
})
</script>

这里要注意几个点：

• el: '#app-2'必须和页面上的DOM元素id对应，不然Vue找不到要挂载的地方
• 你要绑定的变量（比如message）必须放在Vue实例的data对象里，这样才能在模板中通过v-bind或者插值语法{{ }}访问
• v-bind:title="message"是Vue的属性绑定语法，它会把data里的message值实时同步到span的title属性上。你也可以用简写:title="message"，效果是一样的。

三、额外小提示 #

如果你是用Vue CLI创建的单文件组件（.vue文件），IntelliJ的Vue插件会自动识别里面的template、script、style部分，不需要额外配置。但像你这样用CDN引入的方式，只要确保Vue实例在DOM元素之后加载（或者用DOM加载完成的事件包裹），就不会出现变量无法访问的问题。

内容的提问来源于stack exchange，提问作者Axel