Vue

Vue is a front-end Javascript framework that operates similar to React but operates with a much leaner profile. Often is used with Express and/or Node and a database to create full-stack apps.

Components

A Vue component is made up of three parts:

HTML
Javascript (or some other flavor, like Typescript)
CSS (or some other flavor, like Sass)

Unlike React, these all occur in the same file and are not necessarily using JSX component.

An example file looks like this:

<template>
  <header>
    <h1 v-bind:title="title">{{title}}</h1>
  </header>
</template>

<script>
export default {
  props: {
    title: String,
  },
}
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>

State

The contents of your app.js may look like this, containing state within the data() function.

const app = Vue.createApp({
  data() {
    return {
      firstName: 'Jane',
      lastName: 'Doe',
      imageURL: 'example.com',
    }
  }
});

State can be brought in to the templating engine using double curly braces.

As tag content, it can be brought in directly. In the data return object, we have a title property that is then addressed within the template tag. e.g. <h1>{{title}}</h1>.

As properties of the tag itself, we need to use something called the v-bind: directive. To do this, preface whatever property name you want to use a prop in with v-bind:, and set the value in double quotes, as if it were a Javascript string. e.g. <img v-bind:src="imageURL" v-bind:alt="`A man whose name is ${firstName} ${lastName}`"/>.

While v-bind: is the explicit prefix for bound properties, you can also just use : in it's place. e.g. <img :src="imageURL" :alt="`A man whose name is ${firstName} ${lastName}`"/>.

Methods and Event Handlers

The contents of your app.js may look like this, containing methods within the methods object.

const app = Vue.createApp({
  data() {
    return {
      firstName: 'Bob',
    };
  },
  methods: {
    getUser() {
      this.firstName = 'Jane'
    },
  },
});

Methods can be added to event listeners in the DOM by using v-on:{event}, where {event} is click, etc. e.g. <button v-on:click="getUser()">Click Here</button>.

While v-on: is the explicit prefix for bound handlers, you can also just use @ in it's place. e.g. <button @click="getUser()">Click Here</button>[5].

Props

Props can be sent in to existing components just like in React, using properties on a JSX component. e.g. <HelloWorld msg="Hello world!" names="['Bob', 'John']" />. These props can be accessed inside the component file like so:

<template>
  <p :title="names">{{msg}}</p>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    names: String,
  },
}
</script>

<style scoped>
p {
  text-align: center;
}
</style>

Notice that the props must be registered inside of the export. Props can be registered a few different ways.

// As an array of props
export default {
  props: ['id', 'msg', 'name'],
}

// As an object with typing
export default {
  props: {
    id: Number,
    msg: String,
    name: [ String, Number ],
    metadata: null, // can be `any` type
  },
}

// Using `default` and `required`
export default {
  props: {
    id: {
      type: Number,
      default: 0,
      required: true,
    },
  },
  // etc.
}

In general, if a prop is not required, it should have a default value.

Type Checking[4]

Using the validator property in your props object, you can validate your incoming data.

const userInformationIsValid = ({
  name,
  age,
  catchPhrases,
  pocketContents
}) => {
  return (
    typeof name === 'string' &&
    typeof age === 'number' &&
    Array.isArray(catchPhrases) &&
    catchPhrases.length === 3 &&
    catchPhrases.every(item => typeof item === 'number') &&
    typeof pocketContents === 'object' &&
    !Array.isArray(pocketContents) &&
    pocketContents.wallet === true
  )
};

export default {
  props: {
    userInformation: {
      type: Object,
      default: 0,
      required: true,
      validator: userInformationIsValid,
    },
  },
}

Iteration

If you have an array-like object you want to iterate through, you can use v-for="item in array", using the Javascript for ... in syntax. Like React, we need to have a unique key for each item in the iteration.

<template>
  <div :key="task.id" v-for="task in tasks">
    <h1>{{ task.id }}</h1>
  </div>
</template>

Lifecycle Methods

These methods pertain to the lifecycle of the component, like mounting, updating, and unmounting. These go in the top level of the export.

export default {
  props: {
    userId: String,
  },
  created() {
    console.log('Created!');
  },
};

This will run the created function when the component is created.

For all the lifecycle methods, look at their site[6-7], or at this diagram.

Getting Started

Using the Vue CLI[3] is the easiest way to get started. Similar to Create React App, it handles a lot of the nitty gritty setup and puts it all together with whatever specifics you want to use in your project.

References

Incoming Links

Last modified: 202401040446