I find for many simple applications a framework like Vue or React is overkill, all I want to do is open a modal window, toggle a menu or some visibility. For such occasions I wrote a simple declarative class handler, which allows me to write all of my functionality without leaving my html (or php / blade etc) file.
The code may look something like this:
In the above example our button performs 2 actions, it will remove the class
from the target
and it will toggle the class
on the target
There are 4 options available to us:
-> target: required-> classes: required-> toggle-all: not required, defaults to true - acceptable values: true || false -> function: not required, defaults to "toggle" - acceptable values: "toggle" || "add" || "remove"
You may have noticed the key ‘classes’ not ‘class’, this is because we can add, remove or toggle multiple classes by separating them with a comma, for example:
'classes': 'is-active, is-large'
])">Open the large modal</button>
I find the class handler to be very useful for small applications and mock ups.
The source file can be found here (Please note this is es6): https://github.com/wearethreebears/vanilla-class-handler/blob/master/src/vanilla-class-handler.js