简单的 VueJS Hello world 应用程序不工作

Question

我是 VueJS 的初学者，这是我的第一个应用程序。 这是一个 Hello world 应用程序，但代码不起作用；( HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning VueJS</title>
</head>
<body>
    <div id="app">
        <p>{{ title }}</p>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.cjs.js"></script>
    <script src="script.js"></script>
</body>

脚本.js

new Vue({
    el: '#app',
    data: {
        title: 'Hello world!'.
    }
});

Answer 1

您的data必须是函数。

new Vue({
    el: '#app',
    data()
      return {
          title: 'Hello world!',
      };
    }
});

请参阅文档： https ://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

Answer 2

您使用的 CDN 链接使用 Vue 3 版本，代码语法在 Vue 2 中运行，因为您是初学者，您应该将 CDN 链接更改为 vue 2 ：

   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

 let app = new Vue({ el: '#app', data: { title: 'Hello world!' } });

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <div id="app"> <p>{{ title }}</p> </div>

简单的 VueJS Hello world 应用程序不工作

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-10-03 14:29:30

解决方案2
0 2020-10-03 14:29:59

简单的 VueJS Hello world 应用程序不工作

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-10-03 14:29:30

解决方案2 0 2020-10-03 14:29:59

解决方案1
0 已采纳 2020-10-03 14:29:30

解决方案2
0 2020-10-03 14:29:59