简单的 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>

script.js

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

Answer 1

你的 data 必须是函数。

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

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

Answer 2

您使用的 CDN link 使用 Vue 3 版本，代码语法在 Vue 2 中运行，因为您是初学者，您应该将 CDN link 更改为 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 应用程序不工作

Simple VueJS Hello world application is not working

html

javascript

vue.js

vuejs2

vuejs3