Reputation: 23
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')
and the output is:
Hello Vue!
{{ counter }}
Why is my code for counter
not working?
Upvotes: 0
Views: 334
Reputation: 8378
You're using the syntax for two separate versions of Vue.
new Vue
is v2, Vue.createApp
is v3.
For your code to work with 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>
For your code to work with 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>
Upvotes: 1