Простое приложение VueJS Hello world не работает

Я новичок в 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!'.
    }
});

javascript html vue.js vuejs3 vuejs2
person Community    schedule 03.10.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Ваш data должен быть функцией.

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

См. документы: https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

person Matt    schedule 03.10.2020

arrow_upward
0
arrow_downward

Вы используете ссылку CDN, которая использует версию Vue 3 с синтаксисом кода, который работает в Vue 2, поскольку вы новичок, вам следует изменить ссылку CDN на vue 2:

   <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>


let app = new Vue({
  el: '#app',
  data: {
    title: 'Hello world!'
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<div id="app">
  <p>{{ title }}</p>
</div>

person Boussadjra Brahim    schedule 03.10.2020
comment
Согласитесь, хотя именно Vue 3 стремится поддерживать этот синтаксис. См. документы Vue 3 здесь: v3.vuejs.org/guide/component-basics.html (за исключением, может быть, части new Vue(, которую я не пробовал) - person Matt; 03.10.2020
comment
В vue 3 нет new Vue, вы должны использовать const app = Vue.createApp({}) для создания нового экземпляра. - person Boussadjra Brahim; 03.10.2020
comment
Хорошо, да, OP, это две проблемы, но похоже, что вам нужен Vue 2 здесь. - person Matt; 03.10.2020
comment
у OP есть одна проблема, связанная с CDN, синтаксис данных data:{...} может работать с vue 2 при использовании vue через CDN - person Boussadjra Brahim; 03.10.2020
comment
Нет, данные должны быть функцией в любой версии. См. документы Vue 2: vuejs.org/v2/guide. /components.html#data-Must-Be-a-Function - person Matt; 03.10.2020