In the Vue version, we’re storing the state- we keep track of one property we want to update and change, and track the element we want to change by a thing called a directive. If the structure of the HTML elements were to change, we’d have to adapt our code to correspond to those changes. This ties us to the way that the DOM is currently set up, and forces us to think about how to traverse it. You can also see that in the jQuery version, the DOM is in control- we’re fetching things out of the DOM, listening to it, and responding to it. You can see how, as we’re updating what we’re typing, it changes instantly- there’s no delay.
Vue is reactive, which makes it particularly capable of responding to changes. I use this example because it reveals a few of Vue’s strengths. Name: '' //this stores data values for ‘name’ See the Pen jQuery capture information from a form input by Sarah Drasner ( on CodePen.
To capture information as a user types, here’s how we would do this in jQuery and Vue - side by side: We won’t actually incorporate the full form yet in the interest of simplicity and clarity, but we’ll work up to it by the end. Capturing User InputsĪ really common use case for needing JavaScript on a site is capturing user input from a form, so let’s start there. Let’s cover some common use cases in jQuery and how we’d switch them over to Vue, and why we’d even want to do so. In terms of size, they’re pretty comparable as well- to use them as is from a CDN, minified, Vue version 2.5.3 is 86KB. The best part is, you might think the code will get more complicated, but you might find in reading through this article and seeing the examples, that Vue is extremely simple, legible, and easy to maintain and adapt. You can replace the tags and leave the markup as is. So, if your current page structure looks like this: Vue is flexible in the sense that we can use it directly in the HTML. What some people might not know is, you can incorporate Vue into your project the same way that you would incorporate jQuery, no build step necessary. Perhaps you don’t want to write all of your HTML in JavaScript. Perhaps moving a project over to a build system and thus, different deployment method would mean a lot of extra time and effort that you might not be able to bill to a client. Perhaps you don’t want to set up an entire build system for some small abstractions you could feasibly do without. It’s been impossible to ignore all of the hype surrounding JavaScript frameworks lately, but they might not be the right fit for your projects. Did you know that you can incorporate Vue into your project the same way that you would incorporate jQuery - with no build step necessary? Let’s cover some common use cases in jQuery and how we can switch them over to Vue, and why we’d even want to do so.
0 kommentar(er)
