VueJS is a leading frontend technology used to code interactive user interfaces powered by
Thanks for reading! Topics covered:
- 👉 What is
Short introductionto JS
- 👉 JS
Variables, Data Types, Functions, Arrays
const keywords. If you want the value cannot be changed, use
const but if the value of the variable can change use
The function is a set of statements that performs a task or calculates a value and can repeat to run many times.
The array is a special variable that can be enabled to store a collection of multiple items under a single variable name.
✨ JS Concepts used in VueJS
Before using VueJS, is recommended to study and understand in deep a few JS concepts widely used in VueJS. Let's mention a few JS concepts that help developers to be proficient while coding VueJs projects.
In VueJs, there will be many conditions to conditionally show or hide elements or text using an
if...else statement that looks less concise. The
ternary operator works exactly the same as the if statement, but is shorter and more beautiful declarative.
This is for defining an object whose keys have the same name as the variables passed in as properties, you can use the shorthand. It makes your code shorter.
Destructuring is a mechanism that allows extracting array or object values with ease.
The three dots
... syntax can be thought of as a kind of a
collection syntax where it operates on a collection of values or an iterable.
Source File Sample - That
exports the information
Import File Sample - That reuse exported data
The Array enables storing a collection of multiple items in a single variable name and I probably use this method the most frequently like:
- map() - creates a new array populated with the results of calling a provided function on every element in the calling array.
- filter() - creates a new array with all elements that pass the test implemented by the provided function.
- reduce() - executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element.
- find() - returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function,
- includes() - determines whether an array includes a certain value among its entries, returning
✨ VueJS - Short Introduction
The next sections will present a few basic concepts that might improve developers' proficiency while coding VueJS apps.
👉 VueJs Text Interpolation
The basic form of data binding in VueJs is text interpolation using the
Mustache syntax (double curly braces). It's will be replaced and updated whenever the value changes.
👉 VueJs Conditional Render
We can render items on the screen by using the
V-if directives are Vue codes that we can apply to make an element do something example like show or hide the element.
👉 Accept Input with V-model
In VueJs can take inputs via the
v-model directive. It's called
two-way binding on a form input element or a component. With
V-model we can get and sets data to an element.
👉 Event Handling in VueJS
v-on directive that can be replaced with
@. For example,
v-on:click is the same as with
@click. Here is some example the other
v-on directives like
Those that patiently follow up on the content, can play with a few open-source VueJs Starters and Templates mention in the next section.
Vue Soft UI Dashboard is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.
This Free Bootstrap 5 & VueJS 3 Dashboard is coming with prebuilt design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done.
Vue Material Dashboard is a free Admin Template based on Vue3 & Bootstrap5. If you’re a developer looking to create an admin dashboard that is developer-friendly, rich with features, and highly customizable, here is your match.
This innovative Vue3 & Bootstrap5 dashboard comes with a beautiful design inspired by Google's Material Design and it will help you create stunning websites & web apps to delight your clients.