Press "Enter" to skip to content

Vue.js Basics Ep. 09 – Filters | Mixins | Refs Attribute



[ Vue Basics Ep. 09 ] [ Vue.js ]
# Filters | Mixins | Refs Attribute

In today’s sessions we are focusing on Filters, Mixins, and the Ref attribute. All three of these are secondary features of Vue simply there to make our jobs easier.

## Filters
Filters provide us with the ability to massage data being interpolated into our templates, as well as data passed to an attribute via v-bind.

## Mixins
Mixins are reusable pieces of the Vue instance that we can apply to other specified Vue instances, or globally where the mixin will be combined with EVERY Vue instance rendered.

## Ref Attribute / $refs
The Ref attribute and Vue instance counter-part $refs, allows us to easily target DOM elements and access them link we would do using a vanilla DOM selector method.

## Helpful Links
[ Vue.js Filters Docs ] – https://vuejs.org/v2/guide/filters.html

[ Mixins In Action ] – https://blog.bitsrc.io/understanding-mixins-in-vue-js-bdcf9e02a7c1

[ DJ Encounter ] – https://soundcloud.com/dj-encounter

[ HATT Web News Guest ] – https://www.youtube.com/watch?v=AId8IX2lT1k

## TIMELINE
====================================
3:38 – Session Start
4:42 – Overview of Filters
9:46 – Registering our Filters Locally or Globally
11:01 – Writing our First Filter – Slots Sandbox
18:19 – Extracting our Filter from Local to Global
28:58 – Overview of Mixins
31:24 – Using Mixins Responsibly
32:18 – A Proper Use of Vue Mixins
41:32 – Mixins Going Away in Vue 3
43:40 – Overview of the Ref Attribute
44:39 – Demonstrating Refs
47:00 – Tricky Refs Gotcha!
48:34 – Session Wrap Up
52:56 – Session End
====================================

# Project Repo:
https://github.com/rabbitwerks/lcs–vue-basics/tree/ep09–session-start

# 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
Norwall Music Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Norwall Music
Guest
Norwall Music

Nice job on the video! 💗 Keep it up. 👍