# Vue.js Cheatsheet

# Table of Contents

Initialization
Directives
Event Handling
Computed Properties
Watchers
Class and Style Bindings
Conditional Rendering
List Rendering
Forms
Lifecycle Hooks
Components
Vue Router
Vuex
Mixins
Slots
Custom Directives
Vue CLI
Vue 3 Composition API

# Initialization

// Initializing a Vue instance
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

1
2
3
4
5
6
7

# Directives

<!-- v-bind: Bind an attribute -->
<img v-bind:src="imageSrc">

<!-- Shorthand -->
<img :src="imageSrc">

<!-- v-if: Conditional rendering -->
<p v-if="seen">Now you see me</p>

<!-- v-show: Toggle visibility -->
<p v-show="seen">Now you see me</p>

<!-- v-for: List rendering -->
<li v-for="item in items" :key="item.id">{{ item.text }}</li>

<!-- v-model: Two-way binding -->
<input v-model="message">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Event Handling

# Computed Properties

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13

# Watchers

new Vue({
  el: '#app',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...';
      this.getAnswer();
    }
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Class and Style Bindings

<!-- Object Syntax -->
<div :class="{ active: isActive }"></div>

<!-- Array Syntax -->
<div :class="[activeClass, errorClass]"></div>

<!-- Inline Styles -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

1
2
3
4
5
6
7
8
9

# Conditional Rendering

<!-- v-if -->
<h1 v-if="awesome">Vue is awesome!</h1>

<!-- v-else -->
<h1 v-else>Oh no 😢</h1>

<!-- v-else-if -->
<h1 v-else-if="soSo">Vue is okay...</h1>

<!-- v-show -->
<h1 v-show="awesome">Vue is awesome!</h1>

1
2
3
4
5
6
7
8
9
10
11
12

# List Rendering

<!-- v-for -->
<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.text }}
  </li>
</ul>

1
2
3
4
5
6
7

# Forms

<!-- Text input -->
<input v-model="message">

<!-- Checkbox -->
<input type="checkbox" v-model="checked">

<!-- Radio -->
<input type="radio" v-model="picked" value="One">
<input type="radio" v-model="picked" value="Two">

<!-- Select -->
<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<!-- Textarea -->
<textarea v-model="message"></textarea>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Lifecycle Hooks

new Vue({
  data() {
    return { count: 0 }
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# Components

Vue.component('my-component', {
  props: ['message'],
  template: '<p>{{ message }}</p>'
});

new Vue({
  el: '#app'
});

1
2
3
4
5
6
7
8
9

<my-component message="Hello, World!"></my-component>

# Vue Router

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

new Vue({
  router
}).$mount('#app');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<p>
  <router-link to="/home">Go to Home</router-link>
  <router-link to="/about">Go to About</router-link>
</p>
<router-view></router-view>

1
2
3
4
5
6

# Vuex

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
});

new Vue({
  el: '#app',
  store,
  computed: {
    count () {
      return this.$store.state.count;
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment');
    }
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# Mixins

const myMixin = {
  created: function () {
    this.hello();
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!');
    }
  }
};

new Vue({
  mixins: [myMixin],
  created: function () {
    console.log('hello from component!');
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Slots

<slot></slot>

<slot name="header"></slot>
<slot name="default"></slot>
<slot name="footer"></slot>

1
2
3
4

<my-component>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</my-component>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Custom Directives

Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
});

new Vue({
  el: '#app'
});

1
2
3
4
5
6
7
8
9
10

<input v-focus>

1
2

# Vue CLI

# Install Vue CLI
npm install -g @vue/cli

# Create a new project
vue create my-project

# Run the development server
npm run serve

1
2
3
4
5
6
7
8

# Vue 3 Composition API

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    
    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      count,
      increment
    };
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div>{{ count }}</div>
<button @click="increment">Increment</button>

1
2
3