In vuejs there is the vue created lifecycle hook method that can be used to define some logic that should run after the vue instance is created, but before the vue is mounted to a mount point in html via the vue el option or the mount instance method.

This created option of life cycle hook if you prefer is one of many hook methods that can be used when creating a vue instance to define some logic that will happen at the various stages of the vue instance lifecycle. There is another hook that can be used to do something before even the data object is there to work with, and there is also a mounted hook that can be used to define something to do once that data object is there to work with, and the the vue instance is mounted to the hard coded html. There is also an before updated, and updated hooks that will fire each time a change is made to an observable property of the data object.

In this post I will be focusing mostly on just the created hook, but I will also be touching base on life cycle hooks in general actually.

Read More

In vuejs there is the vue next tick global api method that can come into play now and then when something needs to be done after a view is updated because of a change to the model. So far I can not say that this is a method that I find myself using that often, but it is still something that I should be aware of when it comes to creating a project with vuejs as a client side framework.

Vue updates the DOM in a very async kind of way, and there might come a time now and then that something might need to happen with the post updated DOM state of the view. For this there is the vue next tick global API method as well as the $nextTick instance methods. These methods can be used to set a callback that will fire when a view has finished updating. There are also a number of other vuejs features that one should be aware of when it comes to life cycle hooks that can also often be used as a way to define logic that is to fire before and after the dom is updated to a current state of the data object.

Read More

The vue if or v-if directive in vuejs can be used when making templates to make an element display or not based on a given condition. It can come in handy when working out a template that contains elements that do not need to be displayed all the time, or only under certain conditions such as a menu system of some kind. However there are other options as well when it comes to built in directives that provide this kind of function such as v-show directive, and there are other related directives to v-if such as v-else, and v-else-if.

Also there is yet another option to considered when starting to use lots of directives with a static template, there is the idea of dropping templates all together in favor of render methods. When it comes to using render methods an actual javaScript if statement can be used as a way to define a condition to display and element or not, and render methods are generally more powered in general actually because javaScript can be used in a full unchained kind of way. Never the less this will be a quick post on the vue if directive, and some alternative options, and examples that related to the use of vue-if when working on a project that makes use of vuejs as a client side framework.

Read More

The vue for built in directive can be used to generate a collection of elements from an collection of items in the data object in vuejs in the form of an array or plain object in the form of named key value pairs. The directive is often used when I have to do something for each item in a collection in a static template. However there is also using render functions in some cases in place of a template and when doing so there is no need to bother with the v-for directive.

In this post I will be looking at some examples that I put together when it comes to using the v-for directive as a way to generate a list. In addition I will be getting to a whole bunch of other little issues that come up that might be related to this kind of task in the process of doing so.

Read More

In vuejs there is the vue methods option of a vue class constructor that can be used to define event handers for a vuejs project, but they can also be general methods that can be used within the vue instance. It is also possible to share a set of methods across more than one vue instance by way of the mixin option of vue instances. In addition it is also possible to make a set of methods global by making use of the Vue.mixin static method.

In native client side javaScript events can be attached to DOM elements with addEventListener, or some similar method. These event handlers are a way to define what needs to happen when a user clicks on something with a mouse, or preforms one of many other such actions. There are also a number of events that have to do with something that is not a user action such as the on load event. When it comes to working out a vuejs project though I end up having a lot of these kinds of methods as part of the methods object of a main vue instance, or a component.

However the methods in the methods option do not have to just be event handlers, the methods can be used in other methods, as well as in other functions such as life cycle hooks. In vuejs the methods option is one of many options that can be used to define what a Vue call instance of constructor is, keeping everything neat, tidy, and well structured. So in this post I will be going over some quick examples of using the vue methods option.

Read More