This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Filters" Lesson
[00:00:00]
>> Sarah Drasner: We got through a lot so far today. I know we're just like pummeling you with information, and there's just tons and tons of stuff. That's also partially why I put so many resources inside the repo and make sure that everything is linked up so that you can refer to it and go back to it later if you need to access any of those materials and you missed something, or you just wanna revisit that subject.
[00:00:25] So we're gonna talk now about filters, mixins, and custom directives. These are things that are slightly more wider spread of Vue. You could actually be a Vue application developer for a while without encountering these or needing them necessarily, but it's also one of those, you don't reach for what you don't know kind of situations.
[00:00:47] Because they are really useful. But each one of them doesn't take up an entire course, so we're gonna go three things that are not related to each other. They're just three different things that are nice and kind of smaller that you should be aware of when working with Vue.
[00:01:03] I think they're really great. So we'll talk about filters first. Filters, despite their name, are not good for filtering content like we did with a computed value. You know, like, you have an input where you're writing something, don't use a filter for that. Use a computed value for that.
[00:01:20] Filters, the first thing to understand about them is that they don't alter the data, and they're not a replacement for methods. Filters don't transform the data, they just transform the output that the user sees. So it's just for making small tweaks to the way that something looks in some sort of layout form, so I'll give you an example.
[00:01:42] Well, actually, first, let's talk about how we're gonna register a new filter. So if we're going to globally create a filter so that we can use it anywhere, we would say Vue.filter, and this would be in our main.js file right before the Vue instance. We'd say Vue.filter, filterName, function(value), and return.
[00:02:01] I'll go over what we're going to use this, like, with demos, in just a second. We can also register them locally on the component itself just the way that you do like methods or computed values and say, filters, passing the filterName, use the filterName, and then passing a value, and in return, you have to return it.
[00:02:22] So the way that we use it is like this. Usually, in these mustache templates, we're just writing data. We're writing whatever that is. We'd create a pipe, and then we'd say the filter. So an example of that would be something like text and capitalize. So capitalize is an example of when you'd use a filter.
[00:02:40] You're not transforming the data, you're leaving the data how it is, but you're just making sure that everything is formatted correctly, and everything that shows up is gonna be capitalized. I made a really simple tip calculator. So we have a customer1total, and that's some value that came from somewhere.
[00:03:00] And we have filters here. We have tip15, so 15%, we're passing in the value and returning the value times .15 toFixed(2). And then, in our HTML, 15 is going to be customer1total pipe tip15. So it would look like that. So if we look at the demo [INAUDIBLE] here, we've got a tip calculator, this is outputting that first one.
[00:03:28] And then, we've got a few different filters. We've got tip15, tip20, tip25, it's repetitive. We'd usually probably use a method and then bring that into the filter or something like that, but for the purposes of demo, we just have a bunch of filters here that we're using again and again and we've got customer1total.
[00:03:47] So we're not actually changing anything about that customer total. We're just changing it a little bit so that we can output it so that the user can see a different view of that. So it's a little, you know, that's kind of similar to computed values, but computed values do something totally different.
[00:04:02] This is just presentational.
>> Speaker 2: Could you use this for formatting dates and stuff like that?
>> Sarah Drasner: Yeah, absolutely, that's a perfect example. Formatting dates, we're gonna do an exercise later where you make first, second, third, fourth, you create the, you know, based on the number. So we can also chain filters.
[00:04:24] So if we have something like this, this data, we're gonna say, it's going to say the data, and then it's gonna be filter A and filter B, then the first one will be applied first, and the second one will be applied after. So that kind of is important when you get into something like this, where we've got the original number, plus5 is 7, times2 is 4, and then plus5 then times2 is 14, but times2 plus5 is 9.
[00:04:53] So the order of operations there kind of matters. You can pass arguments as well, if you need to. So we are always gonna pass the value in because we're gonna change that value, so what will end up happening is, we'll say filters, filterName, the value, arg1, and then arg2.
[00:05:15] Filter sounds like it would be good. Like I said before, it would be good to filter a lot of data, but filters are re-run on every single update, so it's better to use computed properties for logic where you're filtering down a certain amount of things. The only thing that's filtering about filters is the name, [LAUGH] so don't get confused there.
[00:05:35] All right, that's all about filters. That's it. That's all we've got. So if you were just gonna create a localization site, for instance, and you needed to change currency across the site, you might need to do some calculations to change that number, and then also make euro or [INAUDIBLE] prepend dollar sign, or something like that.
[00:05:54] Filters would be really good for that.