The vuejs framework is a great framework for creating simple single page applications, and reusable compartmentalized components for such applications. I started writing a collection of content on this framework a few years ago now, but I have now come around to editing some of that content and expanding with some new posts on the subject in the process.

Whenever I have an extensive collection of content on a subject I often write at least one post that serves as a major central location type post from which I branch off into all the other posts on the subject from. I have not yet got around to writing such a post for vuejs, that is until now. There is a lot to take in when it comes to learning vuejs for the first time, there are static templates, render functions, data objects, props objects, mixins, and so forth that make up a single vuejs instance. There is then getting into making components where data from a parent vue instance can be passed to one or more components by way of properties and then mutated forms of those values can be passed from a child components back to a parent by way of events. Then of course there are all the little vuejs built in directives such as v-bind, v-on, and v-for just to name a few on top of making ones own directives.

So it would make sense to have a lengthly main post on vuejs in which I just briefly touch base on all of these little topics, and then link to posts in which I get into that topic in greater detail.

1 - Getting started with vuejs, and Hello World Type examples

It would make sense to start off a post such as this with the usual getting started with vuejs type stuff, as well as what to know before hand before getting started with vuejs. It should go without saying that it is required that a solid understanding of html, css, and javaScript should be obtained before hand before getting into using vuejs, or any javaScript framework for that matter. However once that is out of the way then it is just a question of knowing how to set up a project folder, making a late version of vuejs part of the client side stack, and then just working out a few simple hello world type examples just for the sake of getting started.

1.1 - My First getting started post on vuejs

In my first post on getting started with vuejs I outline how to go about staring a new nodejs project folder, and start to work out a very basic hello world type example. Nodejs does not need to be used as a way to have a simple back end system for a vuejs project, but it is a good idea to have some kind of system fro doing so. In any case you want to have the vuejs library, and all additional assets serve up by way of the http or https protocols rather than opening up an index html file in the browser and viewing it by way of the file protocol. This is something that one should get in the habit of doing not just with vuejs, but javaScript in general.

2 - Vuejs Options

When making a vuejs instance, component, or mixin there are a number of options that can be used when creating such things. There are options like the methods option that can be used to define a collection of methods that can eb used in a single instance, a collection of instances, or made into a global set of methods depending on how the method option is used. So it is a good idea to go about getting a solid understanding of each of these options, and also how and where to use such options when it comes to starting to work on a real project of some kind.

2.1 - The vue data option

The vue data option is how to go about creating a state object for a single vuejs instance. This data object contains values that are to be used with just a single instance to which the data object belongs.

The vue data option is not to be confused with the props option which is a way to pass read one values from one vue instance to another, and then events can be used to pass a mutated value back to the parent instance. That however might be a more complex topic though when it comes to getting into components, but there is starting out by focusing on just the data object alone.

2.2 - The el option

The vue el option is how to go about setting a mount point for a vue instance. In other words it is the hard coded element in the html that will be the location as to where the vuejs instance is to render the html of the vue instance via a template or render function. This is the option that I find myself using the most when it comes to this task, but it is also worth mentioning that the mount instance method if a vue instance is how to go about mounting a vue instance to html manually.

2.2 - method

The method option is how I go about adding methods for a vuejs instance, these methods can eb used as event handlers, or helpers that can be called from other methods, life cycle hooks, render functions, and so forth. A collection of methods can be made global for all vuejs instances by using passing an object of such methods to the Vue.mixin static method.

2.2 - props

The props option is how I can go about defining some attributes for a custom component.

2.2 - render

The render option is a more advanced replacement for a simple static template that can be made with the template option. In most cases it would be best to stick with simple static templates when working out a vue instance, or component, however in some cases a render function must be used. The function that is set to the value of the render option os passed a create element function as an argument to the render function, and this create element function is then how to go about creating elements, and components that are to be rendered for the vue instance. When doing so the full power of javaScript can be used to do whatever it is that I need to do, but the process often ends up being far more complicated compared to a nice simple static template, but that of course is the trade off.

2.3 - The vue template option

The template option is the simple yet often effective alternative to the more powerful render option. Templates can just be a string value, and a wide range of directives can be used in the template to preform all kinds of actions on elements, and components that may be used in the template. A template does have its draw backs now and then, which is why I sometimes find myself using render functions in place of one, but I generally start with a template when working out a component, or main parent vue instance.

3 - Vuejs Directives

Another major part of the vuejs framework is making use of something called a directive. Simply put a directive is a way to tell vuejs to preform a certain kind of action with a given element. There a whole bunch of built in directives such as the bind directive that can be used to bind a value in the vue data object as the value for an element attribute. There are then a wide range of other directives for preforming all kinds of other actions an elements, so in this section I will be briefly mentioning each directive that I have wrote a post on thus far, and link to that post in the header of course.

3.1 - The v-bind directive

The v-bind directive is what I would use if I want to bind the value of a property in the vue data object as a value for an attribute of an element or component in a template.

3.2 - The v-for directive

Often I might be in a situation in which I have an array or named collection of values, and I want to create a template of html for each item in that collection. The v-for directive is the way that I would go about doing just that when working out a simple static template.

4 - Conclusion

In this post I am focusing on just going over the vuejs framework by itself, but just working out simple little hello world type examples for each little feature of the framework. There is a whole lot to do when it just comes to learning the basics of the framework that are required in order to move on to making some real projects with vuejs. However once one gets the hang of the basic of vuejs the only thing left to do at that point is to move on to working on some actual real vuejs examples that are games, apps, and features that can be used in such things.

I get around to editing my content on vuejs every once in a while, and when I do so I should also get around to editing and expansing this post when doing so. I did not get to every little detail that should be covered in a post such as this, but much of my content on vuejs needs to be updated and expanded, and I have a lot of other content that needs attention also.