Vue.js 2 Design Patterns and Best Practices

Style bindings

We may want to add various styles to our heading, so instead, we could use v-bind:style. We can see this in action by creating a new object named headingStyles inside of our data object:

data () { return {  headingStyles: {   color: 'blue',   fontSize: '20px',   textAlign: 'center'  } }}

Anytime we're adding CSS classes that would otherwise be kebab-case (for example, text-align) they now become camel-case (textAlign) inside of our JavaScript.

Let's add the style to our heading inside of the template:

<h1 v-bind:style="headingStyles">Vue Bindings</h1>

Every time the compiler sees a v-bind or : the content inside of " is treated as JavaScript with an implicit this.

We could also split this to add layoutStyles as a separate object, for ...