Book Image

The Majesty Of Vue.js

By : Alex Kyriakidis, Kostas Maniatis
Book Image

The Majesty Of Vue.js

By: Alex Kyriakidis, Kostas Maniatis

Overview of this book

<p>Vue.js is a library to build interactive web interfaces. The aim is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible.</p> <p>This book will teach you how to efficiently implement Vue.js in your projects. It starts with the fundamentals of Vue.js to building large-scale applications. You will find out what components, filters, methods, and computed properties are and how to use them to build robust applications.</p> <p>Further on, you will become familiar with ES6, single file components, module bundlers, and workflow automation. The best way to learn to code is to write it, so there’s an exercise at the end of most of the chapters for you to solve and actually test yourself on what you have learned. You can solve these in order to gain a better understanding of Vue.js.</p> <p>By the end of this book, you will be able to create fast front-end applications and increase the performance of your existing projects with Vue.js integration.</p>
Table of Contents (23 chapters)
The Majesty of Vue.js
Credits
About the Authors
www.PacktPub.com
Preface
2
Getting Started
8
Consuming an API – Preface
12
ECMAScript 6
15
Swapping Components
18
Closing Thoughts

Event handling


HTML events are things that happen to HTML elements. When Vue.js is used in HTML pages, it can react to these events.

In HTML, events can represent everything from basic user interactions to things happening in the rendering model.

These are some examples of HTML events:

  • A web page has finished loading

  • An input field was changed

  • A button was clicked

  • A form was submitted

The point of event handling is that you can do something whenever an event takes place.

In Vue.js, to listen to DOM events you can use the v-on directive.

The v-on directive attaches an event listener to an element. The type of the event is denoted by the argument, for example, v-on:keyup listens to the keyup event.

Note

The keyup event occurs when the user releases a key. You can find a full list of HTML events at http://www.w3schools.com/tags/ref_eventattributes.asp.

Handling events inline

Enough with the talking, let's move on and see event handling in action. In the following code, there is an Upvote button which increases...