Table of Contents for

Vue.js in Action

 

Cheat sheet

Expressions

<div  id="app">
   <p>I have a {{  widget  }}</p>
   <p>{{  widget +  's'  }}</p>
   <p>{{  isWorking  ?  'YES'  :  'NO'  }}</p>
   <p>{{  widget.getSalePrice()  }}</p>
</div>

Directives

Element inserted/removed based on truthiness:

<p  v-if="inStock">{{  widget  }}</p>
<p  v-else-if="onOrder">. . .</p>
<h1  v-else>. . .</h1>

Uses element’s display CSS property:

<h1  v-show="ok">Hello World!</h1>

Two-way data binding:

<input  v-model="firstName"  />

v-model.lazy=". . ."      Syncs input after change
v-model.number=". . ."    Always returns a number
v-model.trim=". . ."      Removes whitespace

List rendering

To access the position in the array:

<li  v-for="(item,  index)  in items">. . .

To iterate through objects:

<li  v-for="(value,  key)  in object">. . .

Using v-for with a component:

<my-item  v-for="item in products"
    :products="item"  :key="item.id">

Binding

True or false will add or remove attribute:

<button  :disabled="isButtonDisabled">...

If isActive is truthy, the class active will appear:

<div  :class="{  active:  isActive  }">. . .

Style color set to value of activeColor:

<div  :style="{  color:  activeColor  }">

Actions/events

Calls add method on component after click:

Arguments can be passed.

<button  @click="add (widget)">. . .

To prevent page reload . . .

<form  @submit.prevent="add">. . .

. . . Only trigger once:

<img  @mouseover.once="show">. . .

.stop        Stop all event propagation

.self        Only trigger if event.target is element itself.

Keyboard entry example:

<input  @keyup.enter="submit">