如何使用JavaScript编写Vue应用并在HTML中正常运行？

以下是导致插值表达式原样展示的全部问题及修复方案：

• Vue3的data配置项必须为函数，不能直接使用对象，你当前代码里直接写data: {}是Vue2的写法，Vue3不支持，会导致实例初始化失败，模板无法编译。
• HTML缺少Vue挂载所需的DOM容器，且JS引入位置错误，执行JS时id为content的DOM还未加载，mount('#content')执行失败。
• 方法内变量名和data中定义的变量不匹配，addNewFormEvent方法中使用的this.titles、this.formtext在data中没有对应定义，会触发运行时错误。
• 模板插值的变量名错误，你写的{{ content.title }}和data中定义的数组contents不匹配，需要遍历contents数组后再取对应项的title属性。

修复后的HTML代码 #

<!-- 先写挂载容器，再引入JS -->
<div id="content">
  <!-- 示例插值，遍历contents数组 -->
  <div v-for="(item, index) in contents" :key="index">
    {{ item.title }}
    <ul>
      <li v-for="(cont, i) in item.contents" :key="i">{{ cont }}</li>
    </ul>
  </div>
  <input v-model="newFormtext" type="text">
  <button @click="addNewFormEvent">添加</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="assets/actions.js" type="text/javascript"></script>

修复后的assets/actions.js代码 #

const AppNotes = Vue.createApp({
    // data改为函数返回对象
    data() {
        return {
            newFormtext: "",
            contents: [
                {title: "First Title", contents: ["content1", "content2", "content3"]}
            ],
            // 补充方法中用到的titles数组
            titles: []
        }
    },
    methods: {
        addNewFormEvent() {
            // 变量名匹配data中的定义
            this.titles.push(this.newFormtext)
            // 清空输入框
            this.newFormtext = ""
        }
    }
})

AppNotes.mount('#content') 

内容的提问来源于stack exchange，提问作者Josef Michalík