Book Image

Vue.js Quick Start Guide

By : Ajdin Imsirovic
Book Image

Vue.js Quick Start Guide

By: Ajdin Imsirovic

Overview of this book

Vue.js is the latest trending frontend framework. Simplicity, reactivity, and ?exibility are some of the key benefits that Vue offers to developers. This book will help you learn everything you need to know to build stunning reactive web apps with Vue.js 2 quickly and easily. This book will take you through the Vue 2 framework. You will start by learning the different Vue installation options: CDN, NPM, and Vue CLI. Then we will look at the core concepts of Vue: templates and components – ways to modularize Vue code. You will learn how to utilize directives, which are Vue-specific HTML attributes with additional features. Also, you will see how Vue uses a streamlined approach to development, with reusable methods, computed properties, and watchers, and how it controls state with the help of its data option. You will learn about the concepts of reactive programming in Vue, and how to understand communication between parent and child components. We will take a look at props and slots, working with CSS, filters, and mixins. We will also look at ways to add transitions and animations to Vue apps. Then you will extend Vue by building custom directives and your own plugins. Finally, you will learn about Vuex – a Vue plugin that allows us to centralize state, and also introduce Nuxt, which is a framework that builds on top of Vue and solves some issues of single-page applications. After learning about these components, you will be ready to build your own reactive web apps with Vue.js 2.

Related Content you might be interested in

Current Title:

Small book image
Vue.js Quick Start Guide
Ajdin Imsirovic
Oct, 2018 | 186 pages
Small book image
Vue.js 2 Cookbook
Andrea Passaglia
Apr, 2017 | 454 pages
Small book image
Vue.js: Understanding its Tools and Ecosystem
Dave Berning
Nov, 2019 | 194 pages
Small book image
Bootstrap 4 Cookbook
Ajdin Imsirovic
Jun, 2017 | 338 pages
Table of Contents (15 chapters)
Title Page
Title Page
Copyright and Credits
Copyright and Credits
Packt Upsell
Packt Upsell
Contributors
Contributors
Preface
Preface
Free Chapter
1
Introducing Vue
Introducing Vue
What is Vue?
What problems does Vue solve?
Why use Vue?
Summary
2
Basic Concepts of Vue 2
Basic Concepts of Vue 2
Data-driven views in Vue
Computed properties and methods
Understanding components, templates, and props
Watchers in Vue
Lifecycle hooks
Summary
3
Working with Vue-CLI, Components, Props, and Slots
Working with Vue-CLI, Components, Props, and Slots
Vue component hierarchy, and global and local components
Using Vue-CLI
Setting up code editors to use with Vue
The structure of our Vue-cli-based project
Adding basic functionality to a child component
Adding props to our HelloAgain.vue
Introduction to slots
Summary
4
Filters and Mixins
Filters and Mixins
Using filters
Working with mixins
Summary
5
Making Your Own Directives and Plugins
Making Your Own Directives and Plugins
Making our own directives
Working with Vue plugins
Summary
6
Transitions and Animations
Transitions and Animations
Transitions and animations in CSS
The transition element in Vue
Custom transition classes
Combining transition modes, duration, keys, and v-if
Binding CSS styles in Vue
Working with transition groups
JavaScript animation hooks
Summary
7
Using Vuex
Using Vuex
What is state?
State management, data stores, and one-way data flows
Building a fruit counter app with Vuex
Using the Vue DevTools plugin to track our Vuex state
Improving our fruit counter app
Summary
8
Using Nuxt.js and Vue-Router
Using Nuxt.js and Vue-Router
Single-page applications and server-side rendering
Installing Nuxt.js and previewing the default project
Nuxt pages as routes
Adding navigation to Nuxt apps via the components folder
Adding content to our Nuxt app's pages
Adding page transitions to our Nuxt.js app
Summary
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think
Index
Index

Data-driven views in Vue

Data-driven views in Vue are achieved with the help of reactivity.

What is reactivity?

To grasp the concept better, let's look at an example code in which there is no reactivity. We will use an example that is very similar to the one we had in the previous chapter, when we were comparing Vue and vanilla JS. In the original example, using JavaScript, we created an unordered list and three list items inside of it. The values of the three list items were added from an array we declared, and the unordered list was populated with these list items using a for loop.

This time, we will do something slightly different. To see the example as a pen, visit https://codepen.io/AjdinImsirovic/pen/JZOZdR. 

In this non-reactive example, we are predefining the members of the array as variables. Then we populate the array with those variables and print them to the screen as list items of an unordered list that gets appended to the document:

var a = 1;
var b = a + 1;
var c = b + 2;
var arr1...
Previous Section
End of Section 2
Next Section