VueExamples
Introduction to Vue
Vue Basics ExplainedThev-bind Directive
Bind a
v-bind Explained<div> element to a classBind an<img> element to an image fileChange the font sizeChange the font size in a different wayChange the font size in yet a different wayChange the background colorUsev-bind and a JavaScript condition to change the background colorBind a<div> element to a classBind a<div> element to a class, conditionallyBind a<div> element to a class, conditionally, with a data propertyUse thev-bind short handChange opacity to reveal an image using an input range elementAssign a class when images created withv-for are clickedWe see that CSS rules set withclass andv-bind:class are mergedMore than one class can be set withv-bind:class, with comma separationCSS rules are defined withv-bind:style, using both camel case and kebab case notationClasses are assigned with array syntaxThev-if Directive
Display text conditionally, based on a data propertyDisplay text conditionally, based on a comparisonDisplay text conditionally, with
v-if Explainedv-if,v-else-if andv-elseDisplay 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'Thev-show Directive
v-show ExplainedThev-for Directive
Render a list based on an arrayRender images based on an arrayRender images and text based on an arrayGet the index when rendering text based on an arrayGet the index when rendering text based on objects in an array
v-for ExplainedThev-on Directive
Click a button to increment a counterClick a button to switch a light on and offA counter increments every time a text input event is registeredA random background color is generated every time a mouse pointer movement event is registeredClick event is set up with
v-on Explainedv-on:click for elements generated withv-forThev-on shorthand@ is usedMethods
A method writes "Hello World!"A method gets the mouse pointer position from the event objectA method changes background color based on the mouse pointer positionA method writes text from an input field onto an image of a notebook pageA method is called with different argument values when different buttons are clickedA method is called with both a text and the event object as argumentsMany buttons call the same method with different arguments
Methods ExplainedEvent Modifiers
The
Event Modifiers Explained.once modifier makes the alert only appear once when a button is clickedThekeydown keyboard event calls a method that writes the key to the screenThe.s modifier triggers an alert when the 'S' key is pressedThe.s and.ctrl modifiers trigger an alert when the 'S' and 'ctrl' keys are pressed simultaneouslyThe background color changes when the<div> element is right clickedThe background color changes when the<div> element is right clicked as the 'ctrl' key is pressedThe right click drop down menu is prevented with the.prevent modifierThe left click changes image when the 'shift' key is pressedThev-model Directive
New shopping items can be added to the shopping list using
v-model Explainedv-modelExplore the two-way binding feature provided byv-modelA checkbox changes a boolean data propertyA shopping listA shopping list where items can be marked as foundA dynamic restaurant order formChoose 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 statusThe current checkbox status text is 'yes' or 'no'
Computed Properties ExplainedWatchers
A watcher is used so that values between 20 and 60 are not possible to chooseA watcher takes the new and old values as input argumentsNew and old values are used to confirm correct e-mail address
Watchers ExplainedTemplates
Templates ExplainedSFC Pages
SFC Pages ExplainedComponents
A component is used three timesEvery component has its own counterComponents with props are created with
Components Explainedv-forComponents with props are created withv-for and thekey attributeThis faulty example demonstrates that thekey attribute is neededThis example demonstrates that thekey attribute can fix problemsProps
Props are defined in the component, as an arrayTwo prop attributes are defined in the componentA boolean prop is used to define whether a food is a favorite or notThe props configuration option is defined as an objectThe 'foodIsFavorite' data property can be toggled with a button
Props ExplainedEmit
The component emits the boolean favorite statusThe emitted boolean favorite status is received by App.vueThe emitted boolean favorite status is received and updated in App.vue
Emit ExplainedFallthrough Attributes
The
Fallthrough Attributes Explainedstyle attribute falls through to the componentThestyle attribute falls through to the component, and is merged with the inline stylingThe$attrs object is used to define where the fallthrough attributes belongScoped Styling
The style defined is global unless defined otherwiseThe style is defined to be local, with the
Scoped Styling Explainedscoped attributeLocal Components
Components defined in main.js are globally availableComponents can be defined inside another component to be only locally available
Local Components ExplainedSlots
"Hello World!" is received inside a components' slotA components' slot is used to create a card-like wrappingA components' slot is used to create another card-like wrappingA slot is used with fallback contentTwo slots are used in the same componentSlots are named to direct content to the right placeIf a slot has no name, that will be the default slotA slot is explicitly defined to be the default slotThe
Slots Explainedv-slot directive is used to direct content to a specific slotThev-slot shorthand is#Receive data from a scoped slotScoped slots created withv-for send data to its parentScoped slots created from an array of object send data to its parentA text is sent from a scoped slot without thev-binddirectiveScoped slots are namedNamed scoped slots send different data to App.vue.Dynamic Components
App.vue switches between which component to showWithout the
Dynamic Components Explained<KeepAlive> component the components are not cachedThe<KeepAlive> component caches the componentsOnly the specified component is cached with the<KeepAlive include="CompOne"> codeThe specified component is NOT cached with the<KeepAlive exclude="CompOne"> codeTwo components are specified to be cached with the<KeepAlive> componentThe last two visited components are specified to be cached with the<KeepAlive> componentTeleport
A
Teleport Explained<div> element is moved to the root of the<body> element in the DOMScoped styling and script still works for teleported<div> elementHTTP Requests
A GET request is sent for a text file, and a promise object is receivedA GET request is sent for a text file, and a response object is receivedA GET request is sent for a text file, and the actual file is receivedA GET request is sent for a JSON file, and information about big land mammals is receivedA GET request is sent for a JSON file, and a random big land mammals is shownA random user is fetched from the random-data-api.com APIA random user is fetched from the random-data-api.com API, and displayed with title, name and imageA random user is fetched from the random-data-api.com API, using the axios library
HTTP Requests ExplainedTemplate Refs
The
Template Refs Explained$refs object is used to replace text in a<p> elementThe$refs object is used to replace text from one<p> element into anotherThe$refs object is used to put the value from an<input> element into a<p> element<li> elements with the ref attribute, created withv-for, are collected in the$refs object as an arrayLifecycle Hooks
The
Lifecycle Hooks ExplainedbeforeCreate lifecycle hookThecreated lifecycle hookThebeforeMount lifecycle hookThemounted lifecycle hookThemounted lifecycle hook is used to put the cursor inside an<input> elementThebeforeUpdate lifecycle hookTheupdated lifecycle hookTheupdated lifecycle hook generates an infinite loopThebeforeUnmount lifecycle hookTheunmounted lifecycle hookTheerrorCaptured lifecycle hookTheerrorCaptured lifecycle hook retrieves information about the errorTherenderTracked lifecycle hookTheactivated lifecycle hookTheactivated,deactivated, and other lifecycle hooksProvide/Inject
Provide/Inject ExplainedRouting
Components are switched between using a dynamic componentComponents are switched between using routing
Routing ExplainedAnimations
A
Animations Explained<div> element is rotated with the CSStransition propertyA circular<div> element bounces left-to-right with the CSS@keyframes propertyA<p> element is toggled with a buttonA<p> element inside the<Transition> component fades out when it is removedA<p> element slides in and out when it is toggledA<p> element has separate background colors during 'enter' and 'leave'<p> elements are animated differently, using thename prop to differentiate the<Transition> componentsTheafter-enter event triggers a<div> element to be displayedA toggle button triggers theenter-cancelled eventTheappear prop starts the<p> element animation right after the page is loadedFlip through images with animation on 'enter' and 'leave'. A new image is added before the old image is removedFlip through images with animation on 'enter' and 'leave'. Themode="out-in" prevents new images to be added until the old image is removedSwitching between components is animatedAnimations withv-for
New list items are added to a list rendered with
Animations with v-for Explainedv-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 buttonWritten with Options API: The storage count of typewriters can be reduced by clicking a button
Composition API Explained
