#3 Learning the Vue basics

We all have to start somewhere. I usually read the official documentation and watch a few videos on youtube first.

Here are some of the resources I have used

Vue in 100 seconds

Small introductory video about Vue in about 100 seconds.

The official Vue documentation (Vue 3)

Great official documentation from the Vue.js team itself.

Intro to Vue (a small and free online course)

Simple and slow explanation, the video’s use small visual graphics to make things clearer, and the instructor uses real-life metaphors to explain some Vue code & concepts.

The complete Vue Udemy guide by Maximilian Schwarzmüller

A full and detailed course by Maximillian Schwarzmuller. I heard great things about this course, so I decided to try it out. He updated it to cover Vue 3. It's a big and detailed course, with one cohesive vision. You don't really get that if you watch some small (1 to 3 hours) courses by lots of different people.

Beware the german accent, thankfully Udemy has subtitles 😊.

The very basics

Because these are the very basics, I will inform you about the general code instead of the specific problems I have encountered.

In your js file:

• Start by creating a Vue app

• Mount that app

• Select which part of the HTML you want to connect with Vue

• In your createApp, pass an object with a Data() function.

• Return your js dynamic values that you want to use inside that Data() function.

const app = Vue.createApp({
 data() {
  return {
   vueText: "Finish the course and learn Vue!",
   vueLink: "https://vuejs.org/",
  }; //return in data always returns an OBJECT
 }
});

app.mount("#htmlElementSelectorName"); // mount the app, pass string with the html element you want to control

{{ }} (interpolation syntax)

HTML

<p>{{ vueText }}</p> {{name of your object key inside Data()}}

Use the {{ }} interpolation syntax where you want your dynamic value rendered.

You can also directly put simple JS expressions inside, for example: {{ 1 + 2 }} (this will render the number 3).

v-bind

{{ name of your object key inside Data() }} only really works for simple text though. If you want to dynamically set an attribute (like the image src or a href, you will need a Vue directive (an extra instruction in the html code) called v-bind.

HTML

<p>{{vueText}}</p> dynamic string text value

THIS WON'T WORK // just using {{ value }} won’t work
<p>Learn <a href="{{vueLink}}">about Vue</a></p> 

THIS WILL WORK // use v-bind:attribute
<p>Learn <a v-bind:href="vueLink">about Vue</a></p>

Methods

Besides data() {...} in our Vue.createApp(), we also have a methods option. Vue methods allow you to define functions that should execute when something happens (when you call them or on a user event (like a button click).

JS

const app = Vue.createApp({
 data() {
  return {
   vueText: "Finish the course and learn Vue!",
   vueLink: "https://vuejs.org/",
  }; //return in data always returns an OBJECT
 },
 methods: {
  methodFunctionName() {
   const randomNumber = Math.random();
   if (randomNumber < 0.5 ) {
    return "Learn Vue!"
    } else {
    return "Master Vue!"
    }
   }
 }
});
 
app.mount("#htmlElementSelectorName"); // mount the app, pass string with the html element you want to control

v-html

Useful if you want to pass HTML tags.

JS

data() {
 return {
  outputWithHtmlTag: "<h2>Title in h2</h2>"
};

HTML

<div v-html="outputWithHtmlTag"></div>

v-on (event listeners in Vue)

You can add event listeners to your HTML with v-on:event

(v-on:click , v-on:mouseover, v-on:mouseleave, ...)

JS

data() {
 return {
   counter: 0, //default value
 };
},

HTML

<button v-on:click="counter++">Add</button>
<button v-on:click="counter--">Remove</button>
<p>Result: {{ counter }}</p>

This is a simple counter, for more complex event handlers, pass a method name that comes from your Vue instead of running the javascript directly in your HTML.

That's all for now! The next articles about learning Vue will be less about the general code and more about the specific problems I have encountered.