The easiest way to try out Vue.js is using it by importing the library from a CDN, in order to do this, we create a simple html document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- importing vue js dev library -->
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>My vue Test</title>
</head>
<body>
<div id="app">
{{ message }}
<br>
{{ sum }}
<br>
{{ array }}
</div>
<script type="text/javascript">
var app = new Vue({ //instantiating the vue instance
el: '#app', //we select where vue is going to work in the DOM
data: {
message: 'Hello Vue!', //this are the data
sum: 2+2,
array: [1,5,6, "Rome", "Italy", "cookies", 10]
}
})
</script>
</body>
</html>
And this is the resultant page:
as we can see, at the end of the body, once all the html code has been loaded, we call our script and instantiate the vue instance. If we did it before, it wouldn't work.
Top comments (3)
Hi 👋
Some improvments :
Hi, this is just an introduction, in further tutorials we are going to use the VUE CLI so we are going to use Vue3 :)
Only this much.
[ That's what she said. ]