vue set for setting reactive properties in vuejs

The vue set global api method in vuejs can be used to set a property of a reactive object. In other words it is a way to add a property to an object in the data of a Vue constructor instance, and have the view update when a change happens to that property. Many times this should happen automatically, but in some cases it might not when it comes to nested objects.

The thing about this is that many frameworks have a method like this, because sometimes you can not just simply add a property to an object, or doing so is not a good idea at times. Sometimes some additional things need to happen on top of just simply setting a properly of an object, such as setting up something to watch that property of changes, and then do something when a change occurs.

Read More

vue template option for defining templates in vuejs

In vuejs the vue template option is one of the options for creating HTML that will be used for a vue instance, the other option being a render function. Templates are easy to make, at least compared to render functions at least, and I also find them easier to read and maintain when compared to render functions. However the one draw back from render functions is that they are less powerful when it comes to making full use of javaScript. Still the general rule that I am following is to start out with a template for a vue instance or component, and only switch to using a render function if I am in a situation in which it appears that I have to.

The html that will be generated with a template can end up being injected into a mount point in the hard coded html of a web page by using the vue el option, or the mount vue instance method. When it comes to component design a template will end up being the html that composes an instance of the use of that component.

There are a few options when it comes to defining a template, but in this post I will just be writing about the string and X-Template options for templates in vuejs.

Read More

vue el option for selecting a vuejs DOM mount point

The vue el option for a vuejs instance is what can be used to select a mount point for a vuejs project. A mount point is an element in a html structure in which all elements that are nested from that element will be subject to the vuejs instance in which the vue el option is being used. Alternatively the element can have no nested content at all actually when it comes to hard coded html, and all the content will be generated by way of templates and or render functions used by the main vuejs instance that is mounted to such an element.

A mount point that is selected with the el option can be obtained by a query string that allows for selection by id, class and so forth. In addition an actual reference to the element of interest can be done as well if there is a need to do so for whatever the reason. There might be some things to be concerned about at this point when it comes to selection by class, and having more than one vue instance on a page as well.

Read More

vue start with setup and some basic examples

So this week I think I will be starting a new collection of posts on vuejs and as such when I learn something new I like to start writing some posts on the topic while I am at it. As such whenever I start a new collection of content I often start out with a getting started post on that collection because that is just what needs to happen first naturally. Getting started with vuejs requires al least some background with javaScript, html, and css. In addition to front end experience it is also a good idea to gain at least a little experience working with back end systems also when it comes to using nodejs, and express.js for example.

So this will be a post on getting started with vuejs, and just a few basic hello world type examples of things. However I will also in this post be outlining how to set up a quick project that involves using node.js and express to serve up the first of what should be at least a few examples on vuejs. This might not always be necessary, but one way or another what you are working on should be served up via the http protocol rather than that of the file protocol, in some examples you will run into errors that can happen relating to that. You do not have to do this the way that I am doing it here, but it is still a good idea to learn how to lost something you are working on locally anyway.

Read More

Express JSON receiving parsing and sending

In express json can be sent from the server to a client with response methods like res.json, it can also be received from clients by making post requests from a client system, and then parsing the incoming body with the body parser middleware. In late versions of express such as 4.17+ there is now an express.json method that can be used as a kind of short hand for the body parser middleware to quickly parse a json body of an incoming post request.

In this post I will be coving some basics and more about expressjs and json when it comes to both sending it and receiving it to and from a client system.

Read More