How to start a basic Vue.js page
Vue.js, Web Design
If you want to dive into Vue.js and don’t want to mess around with Node.js and other installs this post is for you. To start using Vue.js in a webpage, all you need to do is set up a CDN (content delivery network) link just like you would with jQuery. You would start with a typical HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Basic Vue.js Page</title>
</head>
<body>
</body>
</html>
Then in the head tag, add the Vue.js CDN link which came from here:
<head>
<meta charset=”utf-8″>
<title>Basic Vue.js Page</title>
<script src=”https://cdn.jsdelivr.net/npm/vue”></script>
</head>
Once you’ve done that, you’re golden, and you’re able to use Vue.js syntax. Now, all you have to do now is add a div like this to the body tag:
<div id=”app”>
{{ message }}
</div>
This div containes Vue.js syntax called double mustaches {{ }} to insert a value of an object property we will define later down in the code. Let’s put that in now, underneath the div tag, in script tags add this:
<script>
var app = new Vue({
el: ‘#app’,
data:{
message: ‘This is a great message!’
}
})
</script>
The variable “app” stores a new instance of the Vue object inside. “el” stands for element and it defines what element, or tag, the Vue app will be contained in. “data” is an object that contains a property (or key) called “message” which has a value of “This is a great message”.
Vue uses this format to create objects, keys, values, and other dynamic items that can be used inside a HTML page. Then, using the double mustache syntax, you can call the value of message by typing “{{ message}}” in the div above the script tags like we already saw above. When all is said and done your HTML file will look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Basic Vue.js Page</title>
<script src=”https://cdn.jsdelivr.net/npm/vue”></script>
</head><body>
<div id=”app”>
{{ message }}
</div>
<script>
var app = new Vue({
el: ‘#app’,
data:{
message: ‘This is a great message!’
}
})
</script>
</body>
</html>
Now you can start to learn more about Vue.js and all the cool stuff it can do. If you want to learn more about Vue.js be sure to check out our training for it here. Have an amazing day!