目录

Vue Examples

❮ Previous Next ❯

Introduction to Vue

Create a simple "Hello World" program Create a program with text interpolation

Vue Basics Explained

The `v-bind` Directive

Bind a <div> element to a class Bind an <img> element to an image file Change the font size Change the font size in a different way Change the font size in yet a different way Change the background color Use v-bind and a JavaScript condition to change the background color Bind a <div> element to a class Bind a <div> element to a class, conditionally Bind a <div> element to a class, conditionally, with a data property Use the v-bind short hand Change opacity to reveal an image using an input range element Assign a class when images created with v-for are clicked We see that CSS rules set with class and v-bind:class are merged More than one class can be set with v-bind:class, with comma separation CSS rules are defined with v-bind:style, using both camel case and kebab case notation Classes are assigned with array syntax

v-bind Explained

The `v-if` Directive

Display text conditionally, based on a data property Display text conditionally, based on a comparison Display text conditionally, with v-if, v-else-if and v-else Display a message if a certain text contains the word 'pizza' Display a message and an image if a certain text contains the word 'pizza' Display different messages and images if a certain text contains the word 'pizza' or 'burrito'

The `v-show` Directive

Show or hide a <div> element based on a data property Explore the differences between v-show and v-if

v-show Explained

The `v-for` Directive

Render a list based on an array Render images based on an array Render images and text based on an array Get the index when rendering text based on an array Get the index when rendering text based on objects in an array

v-for Explained

The `v-on` Directive

Click a button to increment a counter Click a button to switch a light on and off A counter increments every time a text input event is registered A random background color is generated every time a mouse pointer movement event is registered Click event is set up with v-on:click for elements generated with v-for The v-on shorthand @ is used

Methods

A method writes "Hello World!" A method gets the mouse pointer position from the event object A method changes background color based on the mouse pointer position A method writes text from an input field onto an image of a notebook page A method is called with different argument values when different buttons are clicked A method is called with both a text and the event object as arguments Many buttons call the same method with different arguments

Methods Explained

Event Modifiers

The .once modifier makes the alert only appear once when a button is clicked The keydown keyboard event calls a method that writes the key to the screen The .s modifier triggers an alert when the 'S' key is pressed The .s and .ctrl modifiers trigger an alert when the 'S' and 'ctrl' keys are pressed simultaneously The background color changes when the <div> element is right clicked The background color changes when the <div> element is right clicked as the 'ctrl' key is pressed The right click drop down menu is prevented with the .prevent modifier The left click changes image when the 'shift' key is pressed

Event Modifiers Explained

The `v-model` Directive

New shopping items can be added to the shopping list using v-model Explore the two-way binding feature provided by v-model A checkbox changes a boolean data property A shopping list A shopping list where items can be marked as found A dynamic restaurant order form Choose a favorite animal with radio buttons, <input type="radio"> Choose food you like with checkboxes, <input type="checkbox"> Choose a car from a drop-down list, <select> Select multiple cars, <select multiple> Read only form input, <input type="file"> Register height, <input type="range"> Choose a color, <input type="color"> Write a product review, <textarea>

v-model Explained

Computed Properties

An checkbox is made dynamic so that the text reflects the current status The current checkbox status text is 'yes' or 'no'

Computed Properties Explained

Watchers

A watcher is used so that values between 20 and 60 are not possible to choose A watcher takes the new and old values as input arguments New and old values are used to confirm correct e-mail address

Watchers Explained

Templates

"Hello World!" is displayed using the template configuration option

Templates Explained

SFC Pages

A very basic SFC page

SFC Pages Explained

Components

A component is used three times Every component has its own counter Components with props are created with v-for Components with props are created with v-for and the key attribute This faulty example demonstrates that the key attribute is needed This example demonstrates that the key attribute can fix problems

Components Explained

Props

Props are defined in the component, as an array Two prop attributes are defined in the component A boolean prop is used to define whether a food is a favorite or not The props configuration option is defined as an object The 'foodIsFavorite' data property can be toggled with a button

Props Explained

Emit

The component emits the boolean favorite status The emitted boolean favorite status is received by App.vue The emitted boolean favorite status is received and updated in App.vue

Fallthrough Attributes

The style attribute falls through to the component The style attribute falls through to the component, and is merged with the inline styling The $attrs object is used to define where the fallthrough attributes belong

Fallthrough Attributes Explained

Scoped Styling

The style defined is global unless defined otherwise The style is defined to be local, with the scoped attribute

Scoped Styling Explained

Local Components

Components defined in main.js are globally available Components can be defined inside another component to be only locally available

Local Components Explained

Slots

"Hello World!" is received inside a components' slot A components' slot is used to create a card-like wrapping A components' slot is used to create another card-like wrapping A slot is used with fallback content Two slots are used in the same component Slots are named to direct content to the right place If a slot has no name, that will be the default slot A slot is explicitly defined to be the default slot The v-slot directive is used to direct content to a specific slot The v-slot shorthand is # Receive data from a scoped slot Scoped slots created with v-for send data to its parent Scoped slots created from an array of object send data to its parent A text is sent from a scoped slot without thev-binddirective Scoped slots are named Named scoped slots send different data to App.vue.

Slots Explained

Dynamic Components

App.vue switches between which component to show Without the<KeepAlive> component the components are not cached The<KeepAlive> component caches the components Only the specified component is cached with the<KeepAlive include="CompOne"> code The specified component is NOT cached with the<KeepAlive exclude="CompOne"> code Two components are specified to be cached with the<KeepAlive> component The last two visited components are specified to be cached with the<KeepAlive> component

Dynamic Components Explained

Teleport

A<div> element is moved to the root of the<body> element in the DOM Scoped styling and script still works for teleported<div> element

Teleport Explained

HTTP Requests

A GET request is sent for a text file, and a promise object is received A GET request is sent for a text file, and a response object is received A GET request is sent for a text file, and the actual file is received A GET request is sent for a JSON file, and information about big land mammals is received A GET request is sent for a JSON file, and a random big land mammals is shown A random user is fetched from the random-data-api.com API A random user is fetched from the random-data-api.com API, and displayed with title, name and image A random user is fetched from the random-data-api.com API, using the axios library

HTTP Requests Explained

Template Refs

The $refs object is used to replace text in a <p> element The $refs object is used to replace text from one <p> element into another The $refs object is used to put the value from an <input> element into a <p> element <li> elements with the ref attribute, created with v-for, are collected in the $refs object as an array

Template Refs Explained

Lifecycle Hooks

The beforeCreate lifecycle hook The created lifecycle hook The beforeMount lifecycle hook The mounted lifecycle hook The mounted lifecycle hook is used to put the cursor inside an<input> element The beforeUpdate lifecycle hook The updated lifecycle hook The updated lifecycle hook generates an infinite loop The beforeUnmount lifecycle hook The unmounted lifecycle hook The errorCaptured lifecycle hook The errorCaptured lifecycle hook retrieves information about the error The renderTracked lifecycle hook The activated lifecycle hook The activated, deactivated, and other lifecycle hooks

Lifecycle Hooks Explained

Provide/Inject

Information provided in App.vue is injected and displayed in a component

Provide/Inject Explained

Routing

Components are switched between using a dynamic component Components are switched between using routing

Routing Explained

Animations

A <div> element is rotated with the CSS transition property A circular <div> element bounces left-to-right with the CSS @keyframes property A <p> element is toggled with a button A <p> element inside the <Transition> component fades out when it is removed A <p> element slides in and out when it is toggled A <p> element has separate background colors during 'enter' and 'leave' <p> elements are animated differently, using the name prop to differentiate the <Transition> components The after-enter event triggers a <div> element to be displayed A toggle button triggers the enter-cancelled event The appear prop starts the <p> element animation right after the page is loaded Flip through images with animation on 'enter' and 'leave'. A new image is added before the old image is removed Flip through images with animation on 'enter' and 'leave'. The mode="out-in" prevents new images to be added until the old image is removed Switching between components is animated

Animations Explained

Animations with `v-for`

New list items are added to a list rendered with v-for, using <TransitionGroup> Dice can be added or removed, added dice are animated using <TransitionGroup> Dice can be added or removed, both added and removed dice are animated using <TransitionGroup> Dice can be added, removed shuffled or sorted, all animated using <TransitionGroup>

Animations with v-for Explained

The Composition API

Written with Composition API: The storage count of typewriters can be reduced by clicking a button Written with Options API: The storage count of typewriters can be reduced by clicking a button

Composition API Explained

❮ Previous Next ❯