Welcome to a binding discussion! Now that we know all about this superstar, v-model, which is used to achieve two-way data binding on form elements, let’s visually understand how Vue works magically under the hood by picking the correct way to update a particular HTML element based on whether it is a radio button or a… Continue reading
Posts in "vuejs"
18. Class bindings
Welcome to yet another binding discussion. Today, I will be schooling you on class bindings. In other words, we will be playing around with HTML element’s class attribute by binding data to it using Vue. Why? Because we might be required to often manipulate the class list of an element. Just like any other data binding,… Continue reading
14. Two-way data binding with v-model
Finally, the day has come, to understand the missing piece of the puzzle, data binding. So far, we have seen how to use interpolations, v-bind for attribute binding and v-on to listen to events. The missing piece was v-model which is used for two-way data binding and this is exactly what we will be concentrating… Continue reading
12. Listening to keyboard and mouse events
Ready to listen for some key codes on your keyboard and some mouse buttons using Vue? Let’s dig deep then! Make sure you read up on “Listening to DOM events and Event modifiers” if you haven’t already. Because this is more of a continuation to what we already saw.
13. Let’s use shorthands
Welcome back! Did someone say shorthands? Yes, that is what we will be focusing on today. We have been working with Vue directives for quite some time now. The v- prefix helps in more than one way. It visually represents that we are dealing with Vue related attributes in our code (the most important… Continue reading
11. Listening to DOM events and Event modifiers
We have been kind of on a dry spell on the events front. Let’s learn how to listen to DOM events,click events in specific, today. Take a look at the starting code,
10. Rendering Lists Part 2 (Iterating over objects)
Hope you are already aware of iterating over array elements using v-for directive. In our applications, we deal with objects as much as arrays. So, without further ado let’s understand how to iterate over the various properties of an object. I hear you say, “what about an array of objects then?” I got you. We… Continue reading
9. Rendering Lists Part 1 (Iterating over arrays)
We deal with lists day in and day out. In our applications, we often face situations where we have to display arrays as lists whose items change dynamically. So, hardcoding array items in our HTML is not really an option. It is important that we know how to handle these dynamically changing arrays with Vue… Continue reading
8. Conditional rendering Part 2 (v-if and v-show)
Don’t we already have enough directives to handle conditional rendering? Do we still need v-show? One more thing to trouble our brains with? But what to do? Evan You (creator of Vue) added it for some reason while we were busy binge-watching Netflix. So, let’s see why this directive exists in the first place. Warning:… Continue reading
7. Conditional rendering Part 1 (v-if, v-else, v-else-if)
We don’t always want to render everything to our webpage. Based on a certain condition or the value of a particular expression, we might want to hide/show/attach or detach elements. This is nothing but conditional rendering – render elements based on a condition. This can be achieved using simple if-else statements. But, how are we… Continue reading