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, ...