If you are someone like me who is struggling to type Vue and ends up typing View, don’t worry, you are in good company.
Getting started with Vue.js involves two simple things:
- Install Node.js from https://nodejs.org/en/
- That’s it.
In this first tutorial, we will see how to work with the Vue instance. Vue instance is nothing but creating an object for Vue which will then be able to take full advantage of all the functionality available in vue.
To get started, create a project folder for ex: vue-app. Inside this folder, create an index.html or any .html file with the following code. Do read the comments to understand why I wrote what I wrote.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<html> <head> <!-- just any other regular html tag --> <title>Vue Demo App</title> <!-- Fetch vue.js from the following library --> <!-- Other alternatives are to download the original library from https://vuejs.org/ --> <script src="https://unpkg.com/vue"></script> <style> /* Some styling to make Hello World look better. */ #app { font-family: 'Montserrat', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin: 20px; font-size:26px; } </style> </head> <body> <!-- Element to play around using vue. "app" is used in the javascript written below to add text and perform relevant actions. --> <div id="app"> {{text}} </div> <script> //app is assigned to the Vue instance. //Vue accepts el and data to target the div. var app = new Vue({ el: "#app", data: { text: "Hello World!" } }); </script> </body> </html> |
The above codes leads to the following output:
