Vue Examples
Introduction to Vue
Vue Basics ExplainedThe v-bind Directive
Bind a
v-bind Explained
<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
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 Explained
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
v-show Explained
<div> element based on a data property
Explore the differences between v-show and v-if
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 Explained
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
Event Modifiers Explained
.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
The v-model Directive
New shopping items can be added to the shopping list using
v-model Explained
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>
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
Templates ExplainedSFC Pages
SFC Pages ExplainedComponents
A component is used three times
Every component has its own counter
Components with props are created with
Components Explained
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
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
Emit Explained
Fallthrough Attributes
The
Fallthrough Attributes Explained
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
Scoped Styling
The style defined is global unless defined otherwise
The style is defined to be local, with the
Scoped Styling Explained
scoped attribute
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
Slots Explained
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.
Dynamic Components
App.vue switches between which component to show
Without the
Dynamic Components Explained
<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
Teleport
A
Teleport Explained
<div> element is moved to the root of the<body> element in the DOM
Scoped styling and script still works for teleported<div> element
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
Template Refs Explained
$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
Lifecycle Hooks
The
Lifecycle Hooks Explained
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
Provide/Inject
Provide/Inject ExplainedRouting
Components are switched between using a dynamic component
Components are switched between using routing
Routing Explained
Animations
A
Animations Explained
<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 with v-for
New list items are added to a list rendered with
Animations with v-for Explained
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>
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