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.
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 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.
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.
At the end, app checks if play can go on, or one side is out of money.
“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.
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:
- Tutorial preview
- HTML structure of the app
- Data, Styles & attribute binding, conditions
- Event binding (where you are)
Is anything unclear? Feel free to let me know in discussion below.