# VueJS Essential CheatSheet

# VueJS Essenstial


![dribbble_shot_hd_-_1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1596643784756/avLYkN8Sz.png)

## EXPRESSIONS

- {{}} are expressions evalauted everytime

```html
<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`

```html
<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:

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

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

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

4.Style color set to value of activeColor:

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

## Conditional logic

```html
<!-- !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:

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

---

## List Rendering

```html
<!-- !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:

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

3.To iterate through objects:

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

4.Using v-for with a component:

```html
<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=""

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

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

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

3.Submit

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

4.keyup.enter

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

5.Call onCopy when control-c is pressed:

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

6.Key modifiers:

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

7.Mouse modifiers:

```css
.left .right .middle;
```

8.Only trigger once:

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

## Style Binding

1.Style color set to value of activeColor:

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

2.For object Binding

```html
<span :style="styleObject">..</span>
```

```js
data:{
  styleObject:{
    color:"red",
    size:"13px"
  }
}
```

    2.1.For multiple objects
        - we use array format

```html
<p :style="[styleObject,styleObject2]">..</p>
```

```js
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.

```html
<div class="color-box" :class="{active:activeClass,'text-danger':errorClass}">
  ....
</div>
```

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

```html
<div class="color-box active">
  ....
</div>
```

```js
data: {
  (activeClass = true), (errorClass = false);
}
```

2.Binding object of classes form .js

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

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

```html
<div class="active">
  ....
</div>
```

```js
data: {
  classObject:{
    active:true,
    'text-danger':false
  }
}
```

3.Array of classes

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

this gives a calculated result ->solution as

```html
<div class="active text-danger">..</div>
```

```js
data:{
  activeClassName:"active",
  errorClassName:"text-danger"
}
```

4.Conditional logic - Ternary Operator

- To add class based on condition

```html
<div :class="[isActive ? activeClassname='']">..</div>
```

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

```html
<div :class="active">..</div>
```

```js
data:{
    isActive:true,
    activeClassname:"active"
}
```