Vue.Js Recap

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: 

  1. Create the component (Todos.vue)
  2. Add it to template via <Todos />
  3. Import it into script
  4. Register it as a component 

Architecture of a Component consists of: 

  1. A template which contains HTML and vue component insertions (page design stuff). Can have only 1 top element (usually DIV) within template tags
  2. the script (js / vue stuff)
  3. 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: 

  1. 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
  2. data() fundtion returns all the required data. Probably from the server.  But right now, it’s just hardcoded.
  3. 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.

So here are my Vue Cats in their litter box.

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

 &lt; 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:

Leave a Reply

Your email address will not be published. Required fields are marked *