Opinion
What is Vue
Posted: 15/10/2019
Author: Fishtank
Opinion
Posted: 15/10/2019
Author: Fishtank
Our Web Developer Paul, has delved into the development world and summarised JavaScript framework, Vue so you don’t have to. This blog outlines the advantages Vue can bring to creating single page web applications, so read on to find out how you can stay relevant in the digital age by implementing Vue into your digital platform.
Vue is a JavaScript framework; used to build user interfaces much like React and Angular, however, Vue has a number of advantages that helps it stand out from its competitors. It’s USP’s ensure users do not have to go through any build steps to implement in their projects, you can simply include Vue much like you would jQuery. One of the most common cases for using jQuery is to manipulate the DOM (document object model) on click, something which can be done using Vue. One of the advantages for building using Vue, is due to the virtual DOM. Using this virtual representation allows Vue to update the actual DOM in a more efficient way, which in turn increases performance.
Considering that web performance is an important factor when developing a website, the idea of replacing jQuery with Vue is perhaps something to be considered, which is discussed in this article (https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/). It’s an interesting concept and it’s what inspired me to learn more about Vue.
30 Days of Vue is a free tutorial and a great place to start if you want to learn more about Vue (https://www.fullstack.io/30-days-of-vue/). It covers the basics of Vue as well as some of the more advanced stuff like components and routing for creating single page web applications. It also does a great job of explaining best practices because in Vue there is often more than one way to achieve the same thing.
In a typical project, I often need to be able to detect clicks and manipulate HTML attributes. I am now going to look at how to achieve this using Vue directives.
Vue directives are commands that you add directly to your HTML, you can then add inline JavaScript or create methods in JavaScript to do something when an event is triggered. A good example of one of these is the ‘v-on’ directive or the shorthand version ‘@’ this can be implemented by adding it to your HTML like you would an attribute such as an ‘ID’ or a ‘Class’. This particular directive can be used to detect clicks and key presses.
Another useful directive is ‘v-bind’ or the shorthand ‘:’ this can be used to manipulate attributes. Looking at the example below, these directives are used to toggle an active state to the burger menu when clicked.
See the Pen Vue | v-on and v-bind by Fishtank Agency
(
@fishtankagency) on CodePen.
If you are interested in implementing Vue into your projects or creating single page web applications using Vue than we would happily assist with any development requests. Our developers are always on call to look into any requests, get in touch today and we can assist with any queries.