Vue.js开发时mustache双大括号语法无法正常生效应如何解决？

• DOM加载顺序错误：Vue实例初始化代码放置在<head>标签中，代码执行时页面<body>内的DOM节点尚未完成渲染，无法找到指定的挂载目标，导致Vue实例挂载失败。
• 元素id属性格式错误：CSS选择器中#用于标识id类型选择器，但DOM元素的id属性本身不需要额外添加#前缀。代码中目标div写为<div id="#app">，与Vue实例配置的el: '#app'无法匹配。

按照如下规则修改代码即可让mustache语法正常渲染：

1. 移除div的id属性值中的#前缀，改为<div id="app">
2. 将Vue实例初始化代码移动到<body>标签末尾，保证执行代码时DOM已经完成加载。

修改后完整代码如下：

<!DOCTYPE html>
<html>
<head>   
    <title>index</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
    <div id="app">
        <h5>{{message}}</h5>
    </div>
    <script>
        const app = new Vue({
          el: '#app',
          data: {
              message: "hello",
          },
        })
    </script> 
</body>
</html>

如果不希望移动代码位置，也可以用DOM加载完成事件包裹Vue初始化逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const app = new Vue({
    el: '#app',
    data: {
        message: "hello",
    },
  })
})

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