Vue.js

Overview

Resources

Quick setup into existing HTML file

<script src="vue.js"></script>
  • There are

Vue CLI

Vue CLI

npm install -g @vue/cli @vue/cli-service-global
yarn global add @vue/cli @vue/cli-service-global

vue create my-project
  • In this case you work with .vue files, structured as follows:

Refs

<template>
  <div>
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>

</style>

Nuxt.js

  • Similar work environment as with VueCLI, but more customisablity. More information about Nuxt.js.

Vue 3 Setup

<div id="app">
  <h1>{{message}}</h1>
  <the-button @update="changeMessage"></the-button>
</div>

const vueObject = {
  data() {
    return {
      message: "Bye, Vue 2."
    }
  },
  methods: {
    changeMessage() {
      this.message = "Hi, Vue 3!"
    }
  }
}

const vueComponent = {
  template: `<button @click="updateMessage">Update message</button>`,
  emits: ["update"],
  methods: {
    updateMessage() {
      this.$emit("update")
    }
  }
}

const app = Vue.createApp(vueObject)
app.component("the-button", vueComponent)
app.mount("#app")

Composition API

const vueComponent = {
  emits: ["update"],
  setup(props, context) {
    // data
    const message = ref("Hello Composition API!")

    // methods
    function updateMessage() {
      message = "Hello"
    }

    // custom events
    context.emit("update", this.message)
  }
}

Basics

Vue instance

<section id="cv">
  {{title}}
</section>

var vm = new Vue({
	el: "#cv",
	data: {
		title: "CV"
	}
});

Vue Object Properties and Methods:

  • el
  • data Custom Methods
  • methods Watched Properties
  • watch Computed Properties
  • computed Life cycle methods
  • created
  • mounted
  • updated
  • destroyed

Properties of the Vue instance

vm.$data
vm.$el
vm.$watch

Components

using template string

let titleComponent = {
  template: '<div :style="myStyle"><h3>{{title}}</h3></div>',
  data() {
    return {
      title: "CV"
	  }
  },
  props: ['id']
}

using x-template definition

<script type="text/x-template" id="component-id">
  <div :style="myStyle">
    <h3>{{title}}</h3>
  </div>
</script>

let titleComponent = {
  template: '#component-id',
  data() {
    return {
      title: "CV"
    }
  },
  props: ['id']
}

Registering a global component

Vue.component(titleComponent);

Registering local component

var vm = new Vue({
  el: "#cv",
  data: {
    title: "CV"
  },
  components: [
    titleComponent
  ]
});

Data bindings

<h3>{{ ok ? 'YES' : 'NO' }}</h3>
<code>{{ var }}</code>

Directives

  • start with v-
  • can take arguments after the colon :

v-once

v-once

v-if

v-if="seen"

v-for

v-for=""

v-bind

v-bind:id="myVar"
v-bind:href="url"
v-bind:[attributeName]="url"

shorthand
:href="url"

v-model

<input type="text" v-model="title" />

Event Listeners

v-on

v-on:click="doSomething"

shorthand
@click="url"

Modifier

v-on:submit.prevent="onSubmit"

Slots

Custom events

Custom directives

Vue.directive('scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f)
      }
    }
    window.addEventListener('scroll', f)
  }
});

Refs

<template>
  <div>
    <span ref="myref">Hello Refs!</span>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myref.style.color = "red";
  }
}
</script>

VueCLI: Vuex

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},      // initial state (group of data values)
  getters: {},    // group of functions to retrieve the state
  mutations: {},  // group of functions that can change the state
  actions: {}     // cause triggers for mutation to happen asynchronously
});

using Vuex Store

this.$store.getter.myProperty
this.$store.commit("myFunction");

VueCLI

Install

npm install -g @vue/cli

or

yarn global add @vue/cli

Create project

vue create my-project

Start development mode

vue serve

Build project

vue build

VueCLI: Router

this.$router.replace("/");

Push

this.$router.push({
  name: "signin",
  params: { userLoggedOut: true }
});

mounted() {
  const loggedOut = this.$router.params.userLoggedOut;

  if (loggedOut) {
    this.showMessage("User logged out");
  }
}