The vue on directive is what can be used in vue templates to preform event attachment for elements in the template. In line JavaScript can be given, however the typical use of the vue on directive is to call a method in the methods object.

There are a number of event and key modifiers that can be used to help make it so the methods that I write are more about the actual logic of what the method does rather than having additional code that helps with DOM element related quirks. For example I can use a prevent event modifier so that I do not have to call the e.preventDefault method in the body of the event handler that I am calling.

There are a few things to cover when it comes to just using the v-on directive, so I thought I would take a deeper look at a few quick examples of v-on directive in action. In the process of doing so I might also touch base on a whole bunch of other vuejs features in the process of doing so while I am at it.

Read More

There is a vue set global method in vuejs, but it is not what one might think compared to other frameworks. The vue set method is used to set reactive properties to an object, so there is not vue get global method, and no set or get method of any kind when it comes to Vue class instance methods.

What a get method typically does can change from one framework to another, in express.js for example the get method can be used to set up what to do for incoming get requests, or to get an application setting value depending on how the method is used. In other frameworks the get method might be how to go about getting a DOM element reference, or a value in a data object. In vuejs however it is more up to me how I want to go about creating a get method and thus define what it is the the get method does.

So if I want a vue get method I need to add one via a plugin, and maybe this is best actually. One reason why is because a vue get method could be one of many things, the name is vague after all. A vue get method could be an instance method actually that gets an object key in the vue data object, and element in the template, or it cold be a very simple http client that just makes get requests. With that said I might want to make my own vue get method one, or maybe even all of those things depending on the nature of the project.

Read More

Most of the time when a value in the data object of a Vue Class instance changes, the view will render again automatically, but in some cases it will not. For this reason or any other extending circumstance I might want to force Vue to render the vue again. This is where the force update method will come into play as a way to do just that.

If I do find myself using it though I cant help but think that I should not be using it, most of the time the reason why a vue is not updating is because an object added to the vue is not reactive, so maybe a better solution would be to make it reactive in that case. So the force update method should not be a replacement for the Vue.Observable and Vue.set methods. Simply put there is making sure that all nested objects in the data object that should be reactive are in fact reactive first and foremost.

Still there might be some situations now and then where I will just have to use the force update method. So lets look at some examples that make use of the force update method, and some others that do the same thing without the use of the method.

Read More

The vue update life cycle hook is one of several hooks that can be used to define logic that is to be executed at various stages of the vue instance life cycle. The vue update hook will fire after the before update hook when a reactive property data state of the vue instance has changed, or the force update method is called.

So the vue updated hook can be useful for firing some methods or doing anything that needs to be done when a reactive data property changes. In addition there are many other hooks beyond the updated and before update hooks such as the created, and mounted hooks which are the other typical hooks that I find myself using the most often. So lets look at some examples of these kinds of hooks and why they might come in handy when working out a javaScript project with vuejs as a front end framework.

Read More

With canvas moving display objects is one of the first things I started to get up to speed with by just moving by a fixed delta each frame tick. However years later I am now aware of many different ways to go about moving a display object in a canvas project, some of which strike me as a better choice when going about handing movement of objects in a canvas project. I now mostly see about moving objects by way of an amount of time that has passed sense the last tick by having a pixels per second value as a prototype value or as an own property for each display object in an object pool.

The thing to keep in mind is that computers and browsers will differ a lot when it comes to how fast things will move when things are not tied to the system timer. Many old games where often tired to processor clock speed, and as computers got faster the games would speed up also along with them. So it would make sense to have it so that objects move in relationship to the flow of the system time rather than processor speed, and the many other factors at play when it comes to how fast a computer and a browser can get things done.

In addition there are other ways of moving objects that center around a current index or frame value relative to a set number of max frames. This kind of way of moving display objects in canvas can be though of as a very functional way of going about moving objects. Methods can be authored where I pass a frame index, and max frame value, and what is returned is an animation state that will always be the same for the same values that are passed to the method. In other words an animation method that is in line with the rules of what is often called a pure function. This might be the kind of canvas movement I would follow if I am working out some kind of fixed frame by frame animation rather that moving a display object that might be skinned with such an animation.

So In this post I will be touching base on each of these kinds of ways to pull off canvas movement with javaScript and HTML 5 canvas elements.

Read More