Press "Enter" to skip to content

Vue.js Basics Ep. 07 – Slots | V-Slot Directive



[ Vue Basics Ep. 07 ] [ Vue.js ]
# Slots | V-Slot Directive

Continuing in this series we are looking at Slots and the unified V-Slot syntax in Vue. Slots help to create and increase re-usability by implicitly generating content inside of a specified child component.

## Helpful Links

[ V-Slot in Vue.js ] – https://vuedose.tips/tips/new-v-slot-directive-in-vue-js-2-6-0/

## TIMELINE
====================================
2:37 – Session Start
3:56 – What Are Slots?
6:10 – Slots Basic Example Rundown
9:28 – Blog App Example Using Props
13:12 – Converting Our Blog App To Use Slots
19:00 – Upgrading to the V-Slot Syntax
22:16 – CSS Grid Shout Out!
+++ https://cssgrid.io
22:50 – What Are Named Slots?
26:16 – Writing Our First V-Slot Syntax Slot
30:19 – Writing Another V-Slot for Content
33:33 – V-Slot Shorthand Syntax
40:25 – Summary and Catch Up
41:54 – Code Clean Up
46:30 – Session End

====================================

Project Repo:
https://github.com/rabbitwerks/lcs–vue-basics/tree/ep07–session-start/slots-sandbox

# RabbitWerks.js Discord
https://discord.gg/P882WwD

# HTML All The Things Podcast
Check out the Podcast Here!
https://podcast.htmlallthethings.com/

# Check out DVLFE for all things Developer Clothing!
Save 25% on orders with coupon code RABBITWERKS

Home

## Music from RabbitWerks CodeBeatz Spotify Playlist

Live project work. Coding in JavaScript.
Please feel free to leave a comment or suggestion in the chat!

Thank you and Enjoy!

#vuejs #tutorial #livestream #basics #javascript #beginners #vue

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Derkarol Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Derkarol
Guest
Derkarol

Hi, good to see you back. So basically <slots> allow you to pass not only any data but complete html structures "mini-templates".