Vue.js for Beginners

What is Vue.js?

Vue.js is a JavaScript framework for building user interfaces. It is mainly used for front-end development. The core library is focused on the view layer only and it is easy to integrate with other libraries or existing projects.

Why Vue.js?

• Simplicity
• Performance
• Documentation
• Faster development
• Easy upgrades
• Combines best of React and Angular

Environment Setup

1. At first we have to install Node.js
2. We need to install vue.js cli with the command npm install -g @vue/cli . We will check is it successfully installed or not with vue --version .

Creating a project

Using vue CLI

1. Using CLI command vue create hello-world

Then we will see -

2. Use the arrow key to highlight default and press enter

3. To enter our project, use cd hello-world

4. To run the project in locally, use the command npm run serve

After that, we will see in command line/cmd:

Now go to the browser (http://localhost:8080/) and see -

Using GUI

I think, best way to generate a project using with vue ui command as for this we can run script with additional features. If we run this command we will see

Now if we go to the browser and visit “http://localhost:8000” we will see -

— public/index.html

Now go to VS code and open the project. If we open the index.html file under the public folder, we will see -

This is the file where our Vue.js app will render.

— src/main.js

If we open main.js file under the src folder, then we will see -

This is that file where our root Vue instance is declared and also configured.

— src/App.vue

This file contains our root Vue component. Here is three section we can see -

1. <template>…</template> tag that contains the HTmL of our component.
2. <script>…</script> tag. It contains the JavaScript and Vue instance information (within export default{}) of our component.
3. <style>…</style> tag. It is optional and contains specific CSS of our component.

— src/components

In this folder we will create all of our Vue components. Every component has the three sections that we have mentioned above. (<template>…</template>; <script>…</script> and <style>…</style>)

Example of conditional rendering

HTML part:

<div id="app-3">
   <span v-if="seen">This is conditional rendering.</span>
</div>

JavaScript part:

var app3 = new Vue({
   el: '#app-3',
   data: {
     seen: true
   }
 }
)

Now we see the output in the browser is “This is conditional rendering”.

Thats all for today…

Thank you.