VueJS Essential CheatSheet

VueJS Essenstial

dribbble_shot_hd_-_1.png

EXPRESSIONS

  • {{}} are expressions evalauted everytime
<div id="app">
  <p>I have a {{ product }}</p>
  <p>{{ product + 's' }}</p>
  <p>{{ isWorking ? 'YES' : 'NO' }}</p>
  <p>{{ product.getSalePrice() }}</p>
</div>

Dynamic {{Binding}}

  • v-bind helps Binding attributes(src='',href='') to vue instance
  • shorthand :href=" ", :class
<div class="product-image">
  <!-- !Vue Dynamic Binding: v-bind 
        v-bind: binds attribute -`src=` to expression - `image` -->
  <img v-bind:src="image" />
  <!-- Below v-bind shorthand -->
  <!-- <img :src="image" /> -->
</div>

2.True or false will add or remove attribute:

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

3.If isActive is truthy, the class ‘active’ will appear:

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

4.Style color set to value of activeColor:

<div :style="{ color: activeColor }"></div>
<div :style="{backgroundColor:green}"></div>

Conditional logic

<!-- !Conditional logic -->
<p v-if="inventory > 10">In Stock</p>
<p v-else-if="inventory <= 10 && inventory > 0">Few Product left!</p>
<p v-else>Out of Stock</p>
<!-- <p v-show="inStock">inStock:True</p> -->

1.Toggles the display: none CSS property:

<p v-show="showProductDetails">...</p>

List Rendering

<!-- !List Rendering -->
<ul>
  <li v-for="detail in details">{{detail}}</li>
</ul>

1.`: key` is used for making each interactor unique

<div v-for="variant in variants" :key="variant.variantId">
  <p>
    {{variant.variantColor}}
  </p>
</div>

2.To access the position in the array:

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

3.To iterate through objects:

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

4.Using v-for with a component:

<cart-product
  v-for="item in products"
  :product="item"
  :key="item.id"
></cart-product>

Actions/Events

1.Click @click is shorthand for v-on:click=""

<button v-on:click="AddToCart">Add to Cart</button>

2.MoouseOver @mouseover here @ is shorthand for v-on:mouseover=""

<div v-for="variant in variants" :key="variant.variantId">
  <p @mouseover="updateColor(variant.variantImage)">
    {{variant.variantColor}}
  </p>
</div>

3.Submit

<form @submit="addCart">..</form>

4.keyup.enter

<input @keyup.enter="send" />

5.Call onCopy when control-c is pressed:

<input @keyup.ctrl.c="onCopy" />

6.Key modifiers:

.tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta;

7.Mouse modifiers:

.left .right .middle;

8.Only trigger once:

<img @mouseover.once="showImage" />...

Style Binding

1.Style color set to value of activeColor:

<div :style="{ color: activeColor }"></div>
<div :style="{backgroundColor:green}"></div>

2.For object Binding

<span :style="styleObject">..</span>
data:{
  styleObject:{
    color:"red",
    size:"13px"
  }
}
2.1.For multiple objects
    - we use array format
<p :style="[styleObject,styleObject2]">..</p>
data:{
  styleObject:{
    color:"red",
    size:"12px"
  },
  styleObject2{
    margin:"5px",
    padding:"20px"
  }
}

Class Binding

1.Adding new class

  • adding active class to existing class color-box on {active:true}.
  • note:errorClass is not added as it's false.
<div class="color-box" :class="{active:activeClass,'text-danger':errorClass}">
  ....
</div>

this gives a calculated result ->solution as active:true

<div class="color-box active">
  ....
</div>
data: {
  (activeClass = true), (errorClass = false);
}

2.Binding object of classes form .js

<div :class="classObject">
  ....
</div>

this gives a calculated result ->solution as active:true

<div class="active">
  ....
</div>
data: {
  classObject:{
    active:true,
    'text-danger':false
  }
}

3.Array of classes

<div :class="[activeClassName, errorClassName]">..</div>

this gives a calculated result ->solution as

<div class="active text-danger">..</div>
data:{
  activeClassName:"active",
  errorClassName:"text-danger"
}

4.Conditional logic - Ternary Operator

  • To add class based on condition
<div :class="[isActive ? activeClassname='']">..</div>

this gives a calculated result ->solution as isActive:true

<div :class="active">..</div>
data:{
    isActive:true,
    activeClassname:"active"
}

Comments (2)

Vadim Skidanov's photo

Good catch. Do you have a plan to continue?

Punitkumar Y Harsoor's photo

yup work in progress