Компонент Vue не отображает данные на HTML-странице


Компонент Vue не отображает данные на HTML-странице

31.10.2020 04:30:27 Просмотров 63 Источник

index.html:

<body>
    <div id="app">
        {{ message }}
    </div>

    <div id="counter">
        {{ counter }}
    </div>
      
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>

index.js:

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

const Counter = {
    data() {
        return {
            counter: 0
        }
    }
}
  
Vue.createApp(Counter).mount('#counter')

и выход есть:

Hello Vue!
{{ counter }}

Почему мой код для counter не работает?

javascript html vue.js
У вопроса есть решение - Посмотреть?

Ответы - Компонент Vue не отображает данные на HTML-странице / Vue component not displaying data in HTML page

Является ответом!
Daniel_Knights

31.10.2020 04:44:00

Вы используете синтаксис для двух отдельных версий Vue.

new Vue - это v2, Vue.createApp-это v3.

Чтобы ваш код работал с v2:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

const Counter = new Vue({
  el: '#counter',
  data() {
    return {
      counter: 0
    }
  }
})
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  {{ message }}
</div>

<div id="counter">
  {{ counter }}
</div>

Чтобы ваш код работал с v3:

var app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})

const Counter = Vue.createApp({
  data() {
    return {
      counter: 0
    }
  }
})

app.mount('#app');
Counter.mount('#counter');
<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  {{ message }}
</div>

<div id="counter">
  {{ counter }}
</div>

Источник
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X