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.
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
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.
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.
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.