loader
Test specifications
Author:
Sabbir Hossain
Available Language(s):

English

English

English

English

English

English

Questions:

24 questions

Suggested timelimit:

27 minutes

Chapters

Vue Introduction & Lifecycle

Component

Model & Bindings

Directives

Methods & Events

Conditionals & Loop

Vue.JS is a popular JavaScript front-end framework which has gained immense popularity in recent years as a result of the vast list of features, rapid development and adoption and highly adaptive structure.

Given the popularity of Vue.JS, the test is one of the most requested and used on Kandio, even if it was launched later than many of our other tests.

Which use cases can customers have for this test?

This test is perfect for recruiters, hiring managers, CTO’s and HR professionals who are hiring Vue.JS developers to develop or maintain complex repositories.

Which areas (chapters) will be covered in the test, and why was it chosen that way?

Vue Introduction & Lifecycle
Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. It’s important for candidates to have knowledge about the background and history of Vue.JS to understand and follow the road ahead when acquiring new knowledge around the framework.

Component
Components are one of the most powerful features of Vue.js. They help you extend basic HTML elements to encapsulate reusable code. At a high level, Components are custom elements that Vue.js’ compiler would attach specified behavior to. In some cases, they may also appear as a native HTML element extended with the special is attribute. It’s important to pay specific and dedicated attention to this area, as any candidate who fails to demonstrate knowledge with Vue.JS’ components, will have a difficult time operating the overall framework.

Model & Bindings
Vue-model is a Javascript plugin for Vue.js that gives you the ability to transform your plain data into rich models with built-in and customizable HTTP actions, computed properties, and methods. In Vue, v-bind lets you bind an HTML attribute to a JavaScript expression. There are two broad use cases for this one-way data binding: - Binding to built-in attributes, like href or class.  - Passing props to a child component. Our test covers all of these things, so you can get early signals about your candidates’ capabilities in this crucial area.

Directives
Directives are tiny commands that you can attach to DOM elements. They are prefixed with v- to let the library know you’re using a special bit of markup and to keep syntax consistent. They are typically useful if you need low-level access to an HTML element to control a bit of behavior. This is important, as it also demonstrates the ability to work cross-language and framework.

Methods & Events
Vue.JS can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. As this is one of the main building blocks of Vue.JS, we chose to include it in this test. The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the v-on attribute isn’t feasible. That’s why v-on can also accept the name of a method you’d like to call. 

Conditionals & Loop
In Vue.js, conditional rendering is achieved by using a set of directives on elements in the template. There are 3 overall conditions, and our test includes test material on all of them. v-if - Element displays normally when condition is true. When the condition is false, only partial compilation occurs and the element isn't rendered into the DOM until the condition becomes true. v-else - Does not accept a condition, but rather renders the element if the previous element's v-if condition is false. Can only be used after an element with the v-if directive. v-show - Behaves similarly to v-if, however, the element will always be rendered into the DOM, even when the condition is false. If the condition is false, this directive will simply set the element's display style to none. Conditions and Loops are believed to be general knowledge, and should be solved to a large extent by any candidate working with the framework without issues. We hope this test will bring as much value to your projects as it does to our other client's projects. We spend many hours authoring the questions and shortlisting and discarding content that did not qualify to go into this test.

Made by one of the leading experts

Sabbir Hossain