I am really struggling to understand Vue's structure. I initially learned from a video tutorial on the freeCodeCamp YouTube channel.
Later, I decided to delve deeper by reading a book called
by Brett Nelson.Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch
The issue I encountered was that while the tutorial on YouTube used unpkg, the book recommended using jsdelivr. When I tried to run the same code with both methods, it only worked with one and not the other.
I'm feeling lost because the tutorials from these two different sources are so vastly different.
This is the code I used for unpkg:
<!DOCTYPE html>
<html>
<head>
<title>Vue 3</title>
</head>
<body>
<div id="app">
{{ propertyName }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
let app=Vue.createApp({
data: function(){
return {
propertyName: 'Hello from Getting to Know Vue.js!'
}
}
})
app.mount('#app')
</script>
</body>
</html>
And this is the code I used for jsdelivr (it works but doesn't work with the previous script):
<!DOCTYPE html>
<html>
<head>
<title>Vue 3</title>
</head>
<body>
<div id="app">
{{ propertyName }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
propertyName: 'Hello from Getting to Know Vue.js!'
}
});
</script>
</body>
</html>