[ 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 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 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
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:
# RabbitWerks.js Discord
# HTML All The Things Podcast
Check out the Podcast Here!
# Check out DVLFE for all things Developer Clothing!
Save 25% on orders with coupon code RABBITWERKS
## Music from RabbitWerks CodeBeatz Spotify Playlist
Please feel free to leave a comment or suggestion in the chat!
Thank you and Enjoy!