Vue.js Tutorial: Data & Event Binding, HTML Template Example

Firstly, I prepare complete HTML structure with some nice CSS to have everything ready before coding Vue example.

As you might guess from the HTML code below, Boostrap grid system is used. I have included CSS, version 4, but example contains also some custom styling.

Check CSS tab in the JSFiddle:

How Will Example Work?

Container has a unique id “vue-app”. This attribute will be used in the Vue instance to target HTML element, which I want to manipulate with JavaScript.

This name is completely up to you, it can be also a class, but keep it mind, to not use it on multiple elements.

Progress bars have set width with inline CSS. This is important, while I want to change width dynamically, so this is the way, how I can bind styles.

I will also change background color of progress bar, depending on the width, but this is controlled with help of predefined Bootstrap classes.

There is a little shaking animation of random number box. This is done via keyframes defined in custom CSS part.

Below the input is a validation message, which I forced to be displayed by inline styles. By default it is hidden, it will be shown only if your bet would be illegal.

Go Ahead

Be careful, not only HTML and JavaScript sections change in next parts of example, but there are also tiny changes in custom CSS.

This is everything you need to know before writing first lines of Vue code.