So here, I'm using the getElementById method of the document object to select a certain element and set its innerText. If I right-click the tab up here, and select Reveal in Explorer, I can then open this in Chrome, and we can see that, it does in fact do a fine job of accessing the inner text property of that element and setting its value.
But, the really explicit and imperative nature of this code can lead to having to write a lot of it in a real application where dozens or even hundreds of elements need to be updated. Let's comment this line out now with Control + slash and look at the jQuery method of doing this. Right on the home page of the jsDelivr content delivery network, we can find a url for the jQuery library that we can use in our webpage without having to download any files.
I'll always be a fan of libraries like jQuery because they once made my work so much easier. But these days, even for the simplest bits of dynamic behavior, I'm more likely to reach for Vue. So next, let's see what our example page would look like using Vue's reactivity system.
- Adding Vue to a webpage
- Thinking declaratively with data binding
- Methods and event handling
- Adding dynamic style and class attributes
- Using CSS transitions and animations
- Using Vue components
- Vue CLI