VueJS Essenstial

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"
}