There are so many JavaScript frameworks out there these days that it can be difficult to keep track of them all, and it’s certainly unlikely that anyone will fully master them. For most of us, this means that we must carefully choose in which development frameworks we will invest time in learning.
In this article, we’ll take a quick look at Vue.js so you can decide for yourself if the type of projects you tend to work on are right for you and if it’s right for you.
What is Vue.js?
Although it is not usually capitalised, “Vue” is actually an acronym for Visual Understanding Environment. Its main goal is to simplify web application development services reducing code complexity. It has a lot in common with React.js, but the current version of Vue renders faster than React and seems more efficient.
Is View difficult to learn?
If you’re already an experienced programmer, you’ll have no problem getting started with Vue, but it would be wrong to describe it as a language for beginners. You should have some experience with HTML, CSS and JavaScript to create anything practical with it.
The learning curve with Vue is slightly less steep than with React, and much less steep than with Angular. So, it can be said for sure that Vue is relatively easy to learn compared to other popular development environments.
How does Vue help you achieve your goals?
This varies a bit depending on what your goal actually is, but in general you associate blocks of code with HTML elements. This methodology makes it easier to implement interactivity and dynamic content than using regular HTML, CSS, and JavaScript.
On the other hand, you can’t do much more in Vue than the usual ways. Using Vue is just a matter of making things easier during the web app development company phase, but it doesn’t have much of an impact on the end result other than a slight performance hit due to platform code loading.
Another benefit of Vue is that it allows for modularity, meaning you can reuse components that you develop across multiple projects.
Does Vue.js have any cool tricks up its sleeve?
Of course you do, and the best one is the built-in transition effects that allow you to control what would otherwise be very rich CSS and JavaScript structures using just one or two lines of code. This saves you time and effort when creating applications.
Another useful feature is native rendering for certain device types, such as Android and iOS, so you can fine-tune your apps for the devices they run on without a lot of extra work.
Begin!
As stated earlier, Vue is easy to learn, but it is not a language for beginners. You still need to understand the code block.
The problem is that, like most frameworks, the documentation is very lazy and mostly devoted to convincing you to use it. Much less emphasis in documentation is placed on explaining how things work or why you do things a certain way. Almost every official example of a framework that has ever been created is missing vital aspects of the formation that you have to poke around for hours to discover. This flaw is also present in the Vue documentation and examples.
To make it easier to understand what you actually need to do to re-create this project, you need to follow these steps:
1. Add a script that references vue.js
To optimise speed, it’s best to include this after all page content but before the closing body tag in the HTML source. Other page resources can also be loaded in this section, and the loading priority order determines in what order each resource should be inserted.
Here’s an example of including vue.js from a CDN:
And here’s an example of including vue.js from a directory on your own server:
Without this reference to vue.js nothing can be related to Vue.
2. Add Vue Components to Your HTML Body
Here’s what happens with this code:
It doesn’t make a lot of sense at this point, but the Vue part is an empty “demo grid” element, plus adding a “v-directive” to the request input (in this case it’s “v-model” which is used to bind the Vue code to generate input data).
3. If your project requires a component template, add it to the HTML body
This section of code is unusual because it looks like regular HTML inside a script tag, which can confuse most HTML editing programs (note that the indicator colours are incorrect in some places).
4. Add a Vue Instance
This should be one of the last things to appear on the page because it is doing the dynamic rendering task. This provides some optimization benefits over adding it earlier on the page.
- Line 46 specifies that the browser should look for a component on the page called “demo-grid” and line 47 specifies that “#grid-template” should be used as the template for the component (this is the template code added in step 3 from line 9 to line 30).
- The block from line 48 to line 52 defines the properties of the component.
- Lines 53-62 define a function to sort the data in the table.
- Lines 63 to 85 define a function to filter the data (from the results in the search query).
- Lines 86-90 define a function for the headwords in the data set.
- Lines 91-97 define the data sorting method.
5. Add launch code before the closing script tag
If you follow steps 1 to 4 and open the file in the browser, all you will see is a search box and nothing else. This is because everything needed to build the table has been defined, but not created. So in step 5 we add code that actually creates the table that was defined by all the previous steps.
- Line 100 creates a new Vue object.
- Line 101 specifies which element to bind the action to.
- Lines 102 to 111 provide the object data that will be associated with the element.
Testing
Having defined and created the required object, you are ready to test the result. Prepare to be underwhelmed, because this is what you should see in the browser:
What’s the matter? Why is this so boring? This is because there is no style applied there. If we use the default style from the JSFiddle example, the table will look like this:
When you enter anything into the search field (case insensitive), the results will be filtered accordingly:
Clicking a column header allows you to change the display order. For example, clicking the Power column header will change the results, which will be displayed in order of power level.
Improvement and adaptation
Another problem with framework examples is that they usually don’t include much information to help someone who is not familiar with the codebase understand how to apply in the field what they see in an example. Vue does a great job compared to Bootstrap (which is a notoriously underrated formative) but still leaves a lot of questions unanswered.
Here are a few changes we could make to this application to change how it looks and what it does:
- Style the table as Bootstrap striped table
- Change the number of columns
- Change the data to something completely different
- Add Bootstrap
- Wrapping an Element in a Bootstrap Table
- Setting the root element to use the Bootstrap layout model
- Restyling of arrows
- Change data
- testing
- Unfiltered and unsorted
- Sort by directive (ascending)
- Sort by Used for (ascending)
- Filtered by “conditional”
- Filtered by condition and sorted by directives (ascending)
Results
Hopefully from these examples it’s clear that we’ve created two applications with very different looks and content from a common piece of code. With Vue, it’s very easy to reuse your code across multiple projects and potentially save time.
We’ll help you design and build a web application that meets your needs.contact us: web application development services