Are you thinking of diving into the world of Vue? Do you have a background in any other JavaScript frontend framework, especially React? If your answer to either question is yes, then this article is for you. Coming from a React/Redux background, I’ve always wanted to explore the Vue.JS framework just to embrace its beauty and uniqueness. Although I know that there’ll be some similarities to the React library (like a reactive webpage, virtual DOM, etc). Yet, I need to see for myself the Vue way of implementing these features. Having written a bit of Vue code, I will be discussing in this Article my first five(5) takeaways from my first few days writing Vue. I will not be digging deep, but I will try to be explanatory as much as possible. Let's dive in! 1. Atomic Component System: One of the most important concepts in Vue is the . It’s a very behavior that allows large-scale applications to be decomposed into small re-usable components. component system Let's say we have a webpage with the component where the , , and components are nested. The and sub-components can also have child components nested in them. This is the same as the component system in React. root header main aside section aside 2. It’s mostly about binding with directives: Vue generally links (or ) data and conditions to DOM elements (or attributes) using what is known as . Directives are special attributes provided by Vue, that apply special reactive behavior to the rendered DOM. There are lots of directives in Vue, all prefixed with . Common directives include , , , , etc. bind directives v- v-if v-bind v-on v-for <button @click= > <span v- >Show Books< button> "toggleBook" Hide Books < = > span v-if "showBooks" </ > span else /span> </ The snippet above shows directives in action. The attribute is a short form of the directive that fires the method when the is clicked. Also, if the variable is true, the first renders, else, the second one. @click v-on:click toggleBook button showBooks span The directive concept is a big deal in Vue, as it can is used for Conditionals & Loops, handling user inputs, declarative rendering, etc. 3. The ‘emit’ feature This is a relatively new (added in Vue 3) feature that allows a component to send an action (with or without data) to its parent. It’s more or less like a child sending a message to his parents when an event occurs. It can be compared similarly to the way components use lifting to pass the data to the parent component in React. Let's say we have two components (say A & B): <template> <script> B ; { : , : { B }, : { handleEnd(data) { .log( , data) }, } < // Component A < @ = /> B end "handleEnd" </ > template import from "./components/B.vue" export default name "A" components methods console "Emit data: " /script> <template> < // Component B Click to Emit < @ = > button click "$emit('end', 100)" </ > button /template> From the snippets above, is nested in . When the is clicked, it emits and send a message named to component . The message is catched in with the attribute. gets this message and fires the method, which logs the emitted data. B A button end A A @end="handleEnd" A handleEnd You really want to watch out for this, I find it super cool! 4. Awesome Keyboard and other events modifiers This is another feature I found to be amazing in Vue. Apart from the fact that I can listen for keyboard events using Event listener directives ( , , , etc), Vue also permits chaining modifiers to the events. keyup click dblclick For instance, the default behavior of a form submit button (i.e. page reload) can be prevented by simply chaining the ‘.prevent’ modifier to the event listener: <form action= @submit.prevent= > ... < "" "handleSubmit" /form> <template> <div @click.self= > < button> // fires handleClick event only when the div is clicked, and not the paragraphs. "handleClick" Hello world < > p </ > p /div> / / fires the toggleModal action only when the user holds the 'alt' key and click simultaneously <button @click.alt="toggleModal">Open Modal (alt + click)</ </ > template Other event modifiers are: .stop, .prevent, .capture, .self, .once, .passive 5. Props still rock! Yes, that’s right. In Vue, values can be passed down to the child components using a concept called ‘props’ (it’s no big deal though, just a short term for ‘properties’). This is important for the dynamic rendering of data and also helps in the reusability of components. The behavior is the same for React, the only difference is that the Vue component must register the list of props it accepts using the ‘props’ option. I personally find Vue.JS easy to learn and understand compared to some libraries. Also, Vue has a very large community and great documentation. Overall, it's a joy to learn. In conclusion, If you've made it this far, you're a rock star! Please share your view about some of these points and others, as I'm willing to learn from your comments and suggestions. Let's connect! on GitHub @teekaytech on LinkedIn Taofeek Olalere on Twitter @ola_lere Portfolio Happy hacking! Resources: https://v3.vuejs.org/guide/ https://images.app.goo.gl/HJk4bQiczPvVBof38
