Vue.js Tutorial: Data & Event Binding, Bind Methods

It's time to write all necessary methods to manipulate app dynamically. This is the last part of Vue.js tutorial with ready-made gambling game!

In the previous part of the Vue.js Tutorial I prepared all necessary data. Let’s breathe life into them!

Click event is the one used for all the interaction between gambler and the app.

Some basic JavaScript helps me, e.g. to generate random number, to hold a player in a tension while raffling with setTimeout function or alert player if game is over.

Finally, because working with setTimeout might be a little tricky when you need to pass “this” to the function, ES6 arrow function feature fits perfectly for the job.

Finished Vue.js App

Methods Binding

Methods binding is as simple as data binding, but you bind a function instead of string, number or boolean.

“StartNewGame” is only a reset of money, random number and initialize a game. Check HTML code, how it is bound to the button.

Then random number is generated with pure JavaScript, but this method will be used in another one, that’s make it interesting.

You can use any method in some other method in almost the same way as data, the only difference are parentheses at the end, which means you call a function.

Next method “gambling” is the core of the game. It accepts the parameter – interval, range player chose to bet.

Firstly, random number is generated, then raffling is stopped. Evalution of a bet is done with JavaScript switch statement, where you find other methods used, too.

At the end, app checks if play can go on, or one side is out of money.

Input Validation

“GambleBet” is a method bound to the buttons, not “gambling”, here validation logic is presented via simple “if” condition.

Another important functionality is to hold a player for a second, shake random number generator, and only then gamble really starts.

Summary

This is the end of the Vue.js tutorial, focused on basic data and event bindings. Have you read all previous parts?

Here you are:

Is anything unclear? Feel free to let me know in discussion below.