Vue - The Complete Guide (w/ Router, Vuex, Composition API)

Vue - The Complete Guide (w/ Router, Vuex, Composition API)

Created by Maximilian Schwarzmüller .Vue - The Complete Guide (w/ Router, Vuex, Composition API)

Vue - The Complete Guide (w/ Router, Vuex, Composition API)

Created by Maximilian Schwarzmüller

View advantages

  • Not reinventing the wheel
  • Faster rendering e.g. shadowDOM and less page re-renders
  • Easier working in a team due to best practices and common features

Alternatives view

  • React
  • Angular
  • Svelte

Vue Basic Setup

Create App

Vue.createApp();

Add data

Vue.createApp({
  data() {
    return {
      enteredValue: "",
      courseGoals: ["Finish the course and learn Vue!"],
      vueLink: "https://vuejs.org/",
    };
  },
});

Add methods and mount component on HTML element

const app = Vue.createApp({
  data() {
    return {
      enteredValue: "",
      courseGoals: ["Finish the course and learn Vue!"],
      vueLink: "https://vuejs.org/",
    };
  },
// To reference variables in createApp use the this keyword!
  methods: {
    addGoal() {
      this.goals.push(this.enteredValue);
      this.enteredValue = "";
    }
  },
}).mount("#app");

Vue Data Binding

v-on:click (e listener) and v-for (for in loop) HTML VUE bindings

<div id="app">
  <div>
    <label for="goal">Goal</label>
    <input type="text" id="goal" v-model="enteredValue"/>
    <button v-on:click="addGoal">Add Goal</button>
  </div>
  <ul>
    <li v-for="goal in goals">{{ goal }}</li>
  </ul>
</div>

Render Values between HTML tags

<li v-for="goal in goals">{{ goal }}</li>

Render attributes in HTML

All values not between HTML tags must have a v-for: tag added

<a v-bind:href="vueLink">about Vue</a>

Render HTML in variables

  • To prevent cross-side scripting attacks HTML tags are ignored in variables
  • To circumvent this use the v-html="" directive
const HTMLtags = "<h2>Heading</h2>"
<p v-html="vueLink">{{ HTMLtags }}</p>

Vue event listeners and directives

  • To use an event listener on a HTML tag, add the v-on:event as an attribute
<button v-on:click="addGoal">Add Goal</button>
  • Directives can be added to further specify behaviour
<!-- Only when middle mouse button is clicked -->
<button v-on:click.middle="reduce(5)">Add 5</button>
<!-- Only when ENTER is keydown -->
<button v-on:keydown.enter="addGoal">Add Goal</button>
<!-- Other Vue key codes: .enter .tab .tab .delete .esc .space .up .down .left .right -->
  • Event modifiers can modify the way events are executed, like prevent default or stop propagation.
<form v-on:submit.prevent="submitForm">
<form v-on:submit.stop="submitForm">

Two way data binding

  • The v-model shorthand can establish two way binding (both listening and writing on the value)
<!-- longhand -->
<input type="text" v-bind:value="variableValue" v-on:input="inputVariableEvent">
<!-- shorthand -->
<input type="text" v-model="variableName">

Computed and watch methods

Computed Methods

  • Executing methods in the HTML code results in reloading everything on every event, because Vue cannot tell its dependencies.
<p>Your Name: {{fullname()}}</p>
  • To prevent this use computed methods in the createApp object.
  computed: {
    fullname() {
      return this.name !== "" ? this.name + " " + "Boet" : "";
    },
  },
  • Don't use () when calling these computed methods

Watchers

  • To have even more control over the variables used in these methods. Use watch methods.
  watch: {
    // Value in data object to watch. It's value (this.name) is given as an argument.
    name(value) {
      // variables to change when value is changed
      this.fullname = value + " Gates"
    }
  },
  • An new Value and old Value can also be given as two arguments
watch: {
    data(newValue, oldValue) {

    }
  },
  • Watchers exceed in watching for certain conditions(hence the name)
watch: {
  counter(value) {
  if (value >= 50|| value <=-50) {
    this.counter = 0;
  }
},
  • Examples like sending HTTP request and setting timers are great methods that can be triggered by watchers.

Methods vs Computed vs Watch

  • Methods are great for data binding or event binding, they are re-rendered every cycle
  • Computed method are great if you want to calculate some output value dynamically. Data based on depended data that needs to be re-executed when the dependant data changes.
  • Watchers are great when code needs to be executed, because a property changes and you want to specify this change precisely.

Shorthand for v-on and v-bind

  • v-on: can be replaced with @
<button v-on:click="clickAdd(5)">Add 5</button>
<button @click="clickAdd(5)">Add 5</button>
  • v-bind can be replaced with :
<div v-bind:class="{ active: isActive }"></div>
<div :class="{ active: isActive }"></div>

Class and Style Bindings

Inline Styling

  • You can use :style="{camelCasedProperty: value}" directive to add inline styles. They overwrite all other styles therefore usually bad practice.

:class directive

  • To add regular classes add an object (inline HTML, ternary, array or computed) to the :class directive.
<!-- Inline -->
<div :class="{ className: true/false, 'text-danger': hasError }"></div>
<!-- Ternary -->
<div v-bind:class="isActive ? activeClass : '', errorClass"></div>
<!-- Array -->
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
// Computed
computed: {
  paraClasses() {
    return {
      visible: this.paragraphIsVisible,
      hidden: !this.paragraphIsVisible,
    };
  }
},

Conditional Rendering & Lists

Conditionals using v-if/v-show, v-else-if and v-else directive

  • Use v-if directive, to conditionally rendered HTML.
<p v-if="goals.length === 0">Please add some goals!</p>
  • Use v-else directive, to render the else condition. (must be used directly after v-if condition)
<ul v-else>
  <li>{{goal}}</li>
</ul>
  • Without the else condition v-show can be used which doesn't remove the HTML conditionally, but hides it, using "display: none" css selector.
  • Best used when visibility status changes a lot, like a toggle visibility button. (better performance)
<p v-show="goals.length === 0">Please add some goals!</p>

Loop over Lists

  • Use v-for directive to loop over lists.
  • We only have access to the looped variable inside the HTML element.
  • Using "(variable, index) in variables" we can access the index.
<ul>
  <li v-for="(goal, index) in goals">{{ goal }} - {{ index }}</li>
</ul>
  • We can also loop through objects.
  • Using "(value, key) in object" we can access the key name.
person = {name: 'Bill', age: 65}
<ul>
  <li v-for="(value, key, index) in person">{{ key }}: {{ person }}</li>
</ul>
  • We can also loop through a range of numbers with v-for
<ul>
  <li v-for="num in 100">{{ num }}</li>
</ul>

Remove items from Lists

  • We can add an @click method to every v-for iterations.
  • Every iteration can receive an index from the v-for loop.
<ul>
  <li v-for="(goal, index) in goals" @click="removeGoal(index)">{{ goal }}</li>
</ul>

Lists and keys

  • To add an unique identifier to every item in the for loop bind the :key directive to the HTML.
  • This is considered good practice and prevent bugs with changing indexes.
<ul>
  <li v-for="(goal, index) in goals" :key="index">{{ goal }}</li>
</ul>

Download Details:

Author: thijsBoet

Source Code: https://github.com/thijsBoet/vue-the-complete-guide

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.