Currently, I am delving into the Vue.js framework and experimenting with ways to effectively utilize this powerful JavaScript framework.
Although my example is straightforward, I am facing difficulties in properly showcasing the data {} as outlined in both my .html and .js files.
Here's a glimpse of my .html file:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Test</title>
<script src="test.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id='test'>
<p>{{ text }}</p>
</div>
</body>
</html>Additionally, here is my .js file located within the same directory:
var vm = new Vue ({
el : '#test',
data : {
text : 'This is an initial test using Vue.js'
}
});Despite my efforts, I seem to be encountering an unexpected display issue within my browser:
https://i.sstatic.net/m7XPS.png
Your insights and guidance on this matter would be greatly appreciated. Thank you.