KatieMFritz
commented
8 years ago A brief overview of Vue
bahahahaha your pun. Also "sit back, relax, enjoy the puns" - teehee. And thanks for letting me know the context and how the lesson will go.
Is el actually a CSS selector? A couple minutes of Googling only got me here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector. I think a link to some documentation for that selector would be nice (I'm going to search for it anyway, so save me some time).
ETA: Got it. el is the key, #app is the value. Maybe change the parenthetical part to "(notice we're using CSS syntax to target the element by its ID)"
v-if: only renders an element if something is "truthy" (i.e. exists - things that don't exist, like null or an empty string are "falsy")
add a comma before "are falsy"
Apart from our container element, we didn't have to give anything an id or class just to make it work with JavaScript.
Yeah, but we did have to add new attributes. I don't know if that particular bullet is a big selling point. The other four are much more meaningful to me.
I love the story you're telling with these stock photos! LOL
This way, when we're browsing our HTML, we don't have to look at JavaScript code and figure out what it's doing. We can just read what happens.
Damn, that's hot.
@chrisvfritz
The problem with building interfaces with JavaScript
Nice use of a female stock photo. I prefer to think that she's figuring out how to program a complex application rather than thinking "omg, computers are hard" which I fear is what the photo was intended for... Way to subvert expectations!
These aren't things I've thought - I'm not sure what would cause the page to be out of sync, and I'm still getting used to the concept (or at least the vocabulary) of event delegation. Are there other words we can use maybe? I'm not sure what to do here.
Whoa - I am not used to the javascript rendering stuff in real time (although maybe I should be). I guess that's what
oninputdoes?Having a hard time following the code, even in this example that I'm supposed to be familiar with. Specifically
event.target.value. We discussed this in person. I wasn't getting that stuff got passed through to the function, and I wasn't getting truthy and falsy. This would probably lead me to review previous lessons and ask questions until I felt more comfortable.I got really stuck on this. Be more specific: "While #response-to-name renders and clears as intended, the button doesn't clear the actual input field. But if we just add
input.value = userNameto the beginning of therenderfunction, then..."BTW: While mostly removed from this connotation, "dumb" (like "lame", "crazy, "insane", and others) can be construed as an ableist slur and I propose we avoid that whenever possible. If you find yourself writing it, try substituting "problematic," "suboptimal," "inadequate," "annoying," etc.
Nice photo callback.
Yes! I am ready for the solution.