• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

[Vue.js] 8 months into Vue and what I like about it

Modified on: January 1, 2021

Luckily I was injected into a Vue project at the time I had a plan to learn it. So I have been learning from an existing codebase which provides a context where Vue is useful for and how to use it.

This is probably the first time I work with a JS framework. My early learning topic was Angular which was from a couple of years ago and I did not have much practice by then. Generally speaking, Vue.js is quite friendly to start with. The concepts and use cases are quite clear, and it is all about Javascript so I can understand the existing code and build on that.

And, after 8 months of practicing, here are the things I really like about Vue.

The reusable components

Single components can be imported into different views templates. This makes the view templates really clean and thus easy to read.

For example, a view template that shows a users list can be like this:

HTML

So, at the first glance, a front-end developer can understand that the current template has a form to create new users, a bar to search for existing users and finally a users list.

The components above can be imported in some other templates if the mechanism is the same, so the project is easier to maintain and scale at a later time.

The life cycles

Vue provides hooks / life cycles. This is somehow similar to WordPress hooks, that developers can interfere with the current workflows and execute custom functions.

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • deactivated
  • beforeDestroy
  • destroyed
  • errorCaptured

So far I have used created frequently, and destroyed a couple of times.

Once I used updated on a radio selection button to capture the change but then quickly found out that the hook fires on every component’s changes in the view, not just the selection component.

I haven’t had an idea how the other hooks might be useful for the cases, but hopefully I have chances to use them in the future.

Limited DOM access

Learning about the use of v-model or computed variables to get to the elements amazes me. For example in an user input case:

HTML

The name variable is two-way binded. When an user inputs a name, the name in the data section will be updated and reflects already in the field {{ name }}. So the user will see a live update to the name in the p tag as s/he types in the input field.

Not only that, I also can use this variable in the methods object, by addressing as this.name. Very convenient!

The state management

Because there would be many components around in an app, so the flow of data from parent to child components and vice-versa would be like traffic in Hanoi. So the use of VueX as a state management center is very much appreciated.

VueX acts as a data center so that all components can access the constants (states) and methods (actions) from a single source. To mutate the data, it needs to go through commits. VueX is also modular so it is quite maintainable.

Honestly, I think the commits are quite a long way to reach the data.

The Vue directives

The Vue directives (starting with v-) are really helpful to ease some boring tasks. For example, to use v-if / v-show to hide and show error messages, or to perform a loop with v-for:

HTML

The code above prints out each game genre in a line within a selection dropdown, and when user selects any value, it binds the value to selected_genre variable and then can be accessed later in the script section by using this.selected_genre.

Simple, clean and productive!

The scoped CSS

If there are CSS styles that only use in one template, I can include them in the template and mark as scoped so that it won’t apply to elements in other templates. So the components look more compacted.

The Vue Dev Tools

Sadly this does not work properly. Sometimes it disappears from the browser or crashes. But this really is a time-saver when it works.

The Vue dev tools shows the objects of components, including data, computed, methods, etc. in the browser console. Also, the values inside the devtool can be changed and reflected on the components.

Filed Under: Front-end Tagged With: vue

Recent posts

[WordPress] Let’s Make Plugin E01: A Simple View Count Plugin

[WordPress] Create custom post type programmatically

[WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

Reader Interactions

You are here: Home / Front-end / [Vue.js] 8 months into Vue and what I like about it

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Hi! I am a Vietnamese coder living in Oulu, Finland. Currently I am working with PHP, MySQL, HTML, CSS, and JavaScript. This blog is my learning diary, in which I share knowledge from my own experience or research. Hopefully you can find something useful here and don’t hesitate to open a discussion or leave a feedback!

FOLLOW MY BLOG

Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.