Vue.js Tutorial: Data & Event Binding Preview

Learn basics of the progressive JavaScript framework Vue in building simple gambling game app.

Vue is very nice alternative to other popular javascript frameworks like Angular or React. In this first part of tutorial, let’s see in the action how finished app looks like:

You have some money left, exactly 100€, you decided to have a little fun. VUE WIN is the place, where you can play against a bank to win more… or lose everything.

Bank takes the same amount of money as you and gambling can start! You decide, what strategy fits you best, if aggressively put “all in”, or test your prediction ability firstly with smaller bets.

Progress bar indicates if you are close to lose (red background color), have still enought money (blue) or almost win (yellow).

You can bet different sum on each move. Then you guess which range fits generated random number.

The game is over, when one side is out of money. No loans available.

Vue Features In Tutorial

The Vue Instance is used in a very basic way. Variables are stored in a data and business logic in methods.

In this example, you will use string interpolation, set attributes, classes and styles dynamically with Vue.

There is also couple of conditions to render proper boxes at different states of the game.

Finally, you bind to the click event for handling all necessary action buttons.

Methods are used in other methods, data properties change on the fly and some basic JavaScript functions are used to make a real fun.

Let’s dive in by clicking on read more box below!