Today was a short recap day. Meaning, I didn’t continue with the tutorial but I tried to do the assignment on my own and finish the remaining task of displaying complete and incomplete tasks differently. This is one thing I do, I don’t just follow the tutorials but I also explore further and often pause to figure things out on my own. It makes things… much longer, but I think it’s worth it.
The first part – doing all of this on my own – was rather disappointing, I thought I got more of it than I did. Anyway, here’s what it is:
Inserting a component:
- Create the component (Todos.vue)
- Add it to template via <Todos />
- Import it into script
- Register it as a component
Architecture of a Component consists of:
- A template which contains HTML and vue component insertions (page design stuff). Can have only 1 top element (usually DIV) within template tags
- the script (js / vue stuff)
- style, which contains css. if scoped is added styles apply to this particular component only.
Binding data from the main component to an inserted component:
- add the v-bind: directive followed by the variable name that is passed to the component equaling the actual data name in the data() function
- data() fundtion returns all the required data. Probably from the server. But right now, it’s just hardcoded.
- In the component, add props
Anyway, I wasn’t happy with what I’ve learned, but I did figure out v-if all on my lonesome and added a condition to display completed vs incomplete todos and so back and so forth. That bit was easy, just some documentation surfing.
But this felt a lot harder than I expected, so I decided to add more cats. I went went in and added another resource containing cat pictures I gathered online, thus learning how to have more data resources in a single app. I also added that message back (msg) just ot see how to send more stuff back and forth; eg
< TodosĀ msg="IĀ amĀ StringĀ forĀ theĀ Cat"Ā v-bind:todosList="todos"Ā Ā />.
Then I went ahead and added two new components to display my cat pictures. I found a smarter way to pass props (with type declarations, etc) and just added a v-if to boot. I did this all alone so I had plenty of time to think about what I’m douing, and now I’m quite confident I get this tiny little bit of this thing. So ok, time to move on with the tutorial!
My finished (amazing) product:
