# Expressions

```html
<h1>{{ expression }}</h1>
```

# Binding

```html
<img v-bind:src="expression" />
```

### Shorthand

```html
<img :src="expression" />
```

### Some other common bindings

```html
<div :alt></div>
<div :href></div>
<div :title></div>

<div :class></div>
<div :disabled></div>
```

# Events

Some generic events

```html
<button v-on:click="addToCart">Add to Cart</button>
<button @click="addToCart">Add to Cart</button>
<div @mouseover="updateProduct">Color</div>
<form @submit="addToCart">Color</form>
<input @keyup.enter="send">...</input>
```

# Loops

```html
<div v-for="variant in variants"
    :key="variant.variantId"></div>
```

# Class & Style binding

```html
<div :style = { backgroundColor: product.color }
     @mouseover="updateProduct(product.image)"></div>

<button @click="addToCart"
	:disabled="!inStock"
	:class="{ disabledButton: !inStock }">Add to Cart</button>
```

# Computed values

**Computed values are cached**

```js
var app = new Vue({
  el: '#app',
  data: {
    product: 'Socks',
    brand: 'Adidas',
    cart: 0
  },
  methods: {
    addToCart: function() {
      this.cart += 1;
    }
  },
  computed: {
    title() {
      return this.brand + ' ' + this.product;
    }
  }
});
```

# Components

Similar to app object. Should contain one element.

```js
Vue.component('product', {
  props: {
		message: {
			type: String,
			required: true,
			default: 'Hi'
		}
  },
  template: `<h1>{{ message }}</h1>`,
  data() {
  	return {
  	}
  }
});
```

this component produces HTML below:

```html
<product message="hello world!"></product>
```

# Communication events

Add method into a component to $emit event message:

```js
methods: {
  addToCart: function() {
    this.$emit('add-to-cart');
  }
}
```

Then add event attribute to component in template:

```html
<product premium="premium" @add-to-cart="updateCart"></product>
```

And handle event in parent:
```js
methods: {
  updateCart() {
    this.cart += 1;
  }
}
```

# Forms

Two way data binding.

Create new component as below:

```js
Vue.component('product-review', {
  template:`
    <form class="review-form" @submit.prevent="onSubmit">
      <input v-model="name">
      <input v-model="review">
      <select v-model.number="rating">
        <option>5</option>
        <option>4</option>
        <option>3</option>
        <option>2</option>
        <option>1</option>
      </select>
      <button type="submit">Submit</button>
    </form>
  `,
  data() {
  	return {
  	  name: null,
  	  review: null,
  	  rating: null
  	}
  },
  methods: {
    onSubmit() {
      let productReview = {
        name: this.name,
        review: this.review,
        rating: this.rating
      };
      this.$emit('review-submitted', productReview);
      this.name = null;
      this.review = null;
      this.rating = null;
    }
  }
})
```

And add new component to product as shown below:

```html
<product>
  <product-review @review-submitted="addReview"></product-review>
</product>
```