
VueJS cheat sheet - christopher8827
https://medium.com/@christopheragnus/vuejs-cheat-sheet-part-1-b30f772ed72
======
wjossey
Hard to represent certain ideas in a cheat sheet.

One thing I saw was showing how on a button click you can pass an object as an
argument. I’ve personally trended away from that pattern and towards always
avoiding method calls with arguments in template code. This means creating a
sub component which takes in the object in question.

One ends up with a lot more components, but code is really well isolated and
it’s incredibly easy to reason about what’s happening.

~~~
mimischi
I'm having a hard time wrapping my head around the problem. Could you
elaborate with some examples of how it looks before and afterwards? Wondering
whether I'm doing this stuff for my own projects.

~~~
wjossey
I put all the code in a single gist to make it easier to reason. This example
(b/c it's basic) looks like more-code that's just generally unnecessary. In
practice though, I've found those-sub components, even when it's just a
button, tend to benefit from splitting out. You end up doing some styling to
them, having them inherit from a parent button component, etc.

[https://gist.github.com/wjossey/0d7ca1a3c2040e1c376a914941b8...](https://gist.github.com/wjossey/0d7ca1a3c2040e1c376a914941b83ffb)

~~~
mimischi
Thanks, I haven't realized I could pass a method to a child, which acts on the
context of the parent (that's what's happening here, right?).

~~~
wjossey
What I showed you is just a callback chain. Vue recommends all changes flow
UP. So, you can imagine a button is a leaf node that when pressed calls a
function passed to it. That function belongs to the parent component in this
case.

If you ever did traditiona JavaScript programming earlier in this century,
you’ll be familiar with this pattern which is referred to as “callback hell”
by some.

If you ever go to use a third party library like Vuetify, the components you
use in essence follow the same pattern.

------
kozhevnikov
Consider contributing this to
[https://learnxinyminutes.com](https://learnxinyminutes.com)

------
alunchbox
Yikes, stay away from directives if it's possible unless you really need that
functionality. I wouldn't add that as a `cheat sheet` as that should be a rare
use case / component extension.

~~~
max_im
Directives like "v-if" and "v-model" are core to Vue and used regularly in
every Vue project I've seen. What's your reasoning for avoiding them and what
would you use instead?

~~~
alunchbox
Ah, let me clarify. I meant creating new directives. Using the core directives
is needed the best use of Vue directives. Creating new ones should be used
sparsely as it obfuscates your code.

We have 1 directive in our entire application and it's pretty complicated
however the use of it is pretty amazing it allows our app to have a straight
forward approach to permission allowing to hide/disable elements with good
performance.

Honestly I must be super tired since I just re-read it and I see that it's
using existing directives instead of creating new ones...

------
christopher8827
Thanks for the feedback guys! I'm going to write a part 2 of the cheat sheet
of the most common features of VueJs. Hope you guys are enjoying it.

