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
- At first we have to install Node.js
- We need to install vue.js cli with the command
npm install -g @vue/cli
. We will check is it successfully installed or not withvue --version
.
Creating a project
Using vue CLI
- 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 -
- <template>…</template> tag that contains the HTmL of our component.
- <script>…</script> tag. It contains the JavaScript and Vue instance information (within export default{}) of our component.
- <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.