Компонент Vue не отображает данные на HTML-странице
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
не работает?
У вопроса есть решение - Посмотреть?
Ответы - Компонент Vue не отображает данные на HTML-странице / Vue component not displaying data in HTML page
Является ответом!

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>
Помочь в развитии проекта: