Hey there DEV.to community!
True or false will add or remove attribute
If isActive is truthy, the class ‘active’ will appear
Style color set to value of activeColor
First of all, before going into the cheat sheet, I want to wish everyone a happy Nowruz as it indicates the beginning of a new year (being 1400 in the Shamsi (Jalali) calendar right now) and/or the beginning of the spring season to whomever in whichever country celebrate this event.
Element inserted/removed based on truthiness
Toggles the display: none CSS property
Two-way data binding
|Syncs input after change event|
|Always returns a number|
So happy new year and happy Nowruz.
Calls addToCart method on component
Arguments can be passed
To prevent default behavior (e.g. page reload)
Only trigger once
|Stop all event propagation|
|Only trigger if event.target is element itself|
Keyboard entry example
Call onCopy when control-c is pressed
As I am writing this post it is the 5th of Farvardin, 1400 which is 5 days past the new year :).
:key is always recommended
To access the position in the array
To iterate through objects
v-for with a component
As you might know, if you are an ambitious Vue developer, Vue has released its version 3 not so long ago.
This version had some major changes and some minor ones.
|After the instance has been initialized #|
|After the instance is created #|
|Before the first render #|
|After the instance has been mounted #|
|When data changes, before the DOM is patched #|
|After a data change #|
|Before the instance is destroyed #|
|After a Vue instance has been destroyed #|
Here I am listing them as a cheat sheet so you can to them whenever you want just as I might refer to my own post anytime XD.
Set listener on component, within its parent
Inside parent component
Inside button-counter template
And this post will be just a little bit more than a cheat sheet since some features require more describing.
Some code examples are from Vue's official documentation.
Single file components
I believe Vue 3 has made a huge step forward into making Vue a way better solution for large-scale, enterprise application development than it was before.
Composition API. Previously, what we used to do was to instantiate a new Vue instance, and mount it in an element (usually being the #app) as below:.
Using a single slot
Use of component with data for slot
Now what we have to do is to call the createApp method from 'vue' to create a new app and then mount it in an element:.
Use of component with data for slots
In Vue 3, instead of configuring the Vue global object directly, for adding plugins and etc, you can configure your object instance instead.
- As much as it sounds really dangerous when you read this feature's name, it is a super simple and very useful feature.
- This feature lets you split your component into smaller pieces, simply put.
- This allows you to use repeatable parts of your components without needing to code them again.
- Given that you have to components, named Fruits and Countries and in them, you have a list and an input to search in the list to see if the user's input exists or not.
- This is a very simple example so you don't get frustrated :D.