Блог

Главная - Вопросы по программированию - Компонент Vue не отображает данные на странице HTML

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

#javascript #html #vue.js

#javascript #HTML #vue.js

Вопрос:

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 не работает?

Ответ №1:

Вы используете синтаксис для двух отдельных версий 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>