Vue instance properties

by

What are Vue instance properties?

When defining a new Vue instance, the constructor function accepts an object as a parameter through which all Vue instance options are defined. Within that object, Vue.js already provides predefined properties each with its own characteristics, which enable the operation of the Vue application. The following list represents the basic properties of each Vue instance and are accessed outside the instance with the $ sign.

Next to them, three very important properties are mentioned: computed, methods and watch which act as proxies (read more about this in the article “Accessing Vue instance properties”).

“$el”

As of version 3.0 $el can be used to access the underlying DOM element, mostly with components that use fragments. However, it is recommended that starting with version 3.0, the reliance on $el should be avoided, but instead the template references $refs should be used as direct access to DOM elements.

Within the 2.0 version with the property “el” we define the HTML element that will be “managed” by the Vue application:

HTML

JavaScript

Read more

Installing Vue.js

by

Integration into an existing project

Among other things, Vue.js is popular among developers, because it has the ability to be easily integrated into an existing project, it is enough to insert a skip at the bottom of the body section, which is located on the CDN:



When we have the Vue.js library available within the project after this script tag, it is enough to open a new script tag within which the instance will be created.

In the case of version 3.0, the syntax has been slightly changed (see what caused these changes on the official site), so instantiating a Vue object looks like this:

In this version, after instantiation, it is still necessary to perform “mounting” ie. binding the instance to the HTML element.

So the whole code would look like this:

Example (3.0 ver):

See the Pen
Untitled by Web Programming (@chos)
on CodePen.


Every Vue application must have an instance created based on the Vue() constructor function. The data necessary to create a new instance is passed to the constructor function through the so-called “options object”. To create a new instance, it is enough to call the constructor function with the keyword new.

If we need to access the properties of the Vue instance outside the instance itself, then it is necessary to assign the created instance to a variable:

Multiple Vue instantiations are allowedinstances, but each of the instances must “control” different parts of the HTML, because it is not allowed to bind one instance to multiple different HTML parts. However, there is often a need to embed multiple identical or similar repeating HTML elements (such as a product) into a web application, yet still be linked to Vue.js instances. Since it is not allowed to bind one instance to several different HTML parts, in that case you should create a Vue.js component and embed it multiple times.

Read more

Linux basics for web developers

by

Introduction Every web developer at some point finds himself in the position of hosting his application on a VPS that is based on the Linux operating system and needs basic knowledge of Linux server administration. To facilitate the administration of linux servers, specialized applications such as “Control panel”, “Plesk” are often used… However, these applications … Read more

Hybrid mobile applications

by

What are hybrid mobile apps? Mobile applications are more than ordinary web applications, because unlike browsers, mobile devices have sensors and specific functionalities (camera, gyroscope, vibration, etc.). It is the ability to access these functionalities that separates mobile applications from an ordinary responsive website. Emergence of hybrid mobile applications To develop “native mobile apps” on … Read more

Exponential operator **

by

Operator syntax Until the ES2016 standard, there was no exponential operator in JavaScript, but the method Math.pow was used. Now the “**” operator returns the result of scaling the base (first operand) with the exponent (second operand): <strong>x<sup>y</sup></strong> = Math.pow(x, y) = <strong>x**y</strong> Example

Example In addition to this standard operator, we can use it with the operator “=”: … Read more

Iterators & Generators

by

Iterable protocol

Protocol characteristics

The

“Iterable protocol” is an agreed-upon APi at the level of JavaScript as a language, for creating objects that can be used to iterate over a collection of data. The key characteristic of this protocol is “sequentiality” ie. property that when iterating, it returns the value of the iterable structure one by one. Data types that satisfy the iterable protocol are called “iterable collections”. Respecting the iterable protocol, it is necessary that the function returns an object containing a special method “next()”.

next()

When called, the next() method returns a member of the collection temporarily “wrapped” (eng. wrapped”) with an object that has two properties: value and done. As long as there are members for iteration, the method returns the value of the “done” property as “false”, and only when the iteration “comes” to the end, the “done” property is defined as “true”.

Example

Through the following example, the concept of the protocol:

is described

Which data types are iterable?

It should be emphasized that ordinary javascript objects are not iterable, but the following data types satisfy the iterable protocol:

  • String
  • Array
  • Array-like arguments or NodeList object
  • TypedArray
  • Map
  • Set

Which mechanisms in JavaScript require an iterable collection?

Mechanisms for the use of which “iterable” collections are necessary are:

  • Destructuring
  • for..of loop
  • Array.from()
  • Spread operator (…)
  • Maps & Sets
  • Promise.all(), Promise.race()
  • yield*
Example

Iterable collections can use mechanisms that require iterable collections such as iteration with a “for..of” loop:

or when destructing:

Read more

Destructuring in JavaScript

by

Introduction

destruction array

The term “destruction” means “extracting” data from a data structure (object or array) and creating new smaller structures that are assigned values based on the “extracted” data.
Before ES2015, it was necessary to write code that would perform destructuring, but luckily with the new JavaScript standard came a syntax that allows the JavaScript compiler to automatically perform this work for us. This syntax is called “destructuring assignment”, and it does exactly what the name says, it assigns values from a structure to new variables.

Example
“Manual” destructuring

New ES6 syntax

NOTE: [a,b,c] from the previous example new syntax NOT AN ARRAY ! ! !
When square brackets (or curly braces) are to the left of the equals sign, it indicates a variable assignment pattern. They allow us to define to the JavaScript compiler how and under which variable name to store destructured values.

Read more

New data types Map, Set & Symbol

by

Symbol

Features

Symbol is a new data type that came with the ES2015 standard. Symbol represents a unique token. A symbol is created using the function Symbol().

A symbol can also be created with a label, which is passed to it as a string. That label does not affect the value of the symbol, but is useful for debugging and can be displayed using the toString() method on the symbol.

Purpose: Object property key

Mostly “symbol” is used as the key of an object property, when we want to protect that property. When using “symbol” as the key of an object’s property, it is necessary to use square brackets to access the property (the so-called “bracket notation”). Such properties have the following characteristics:

  • Unique Property
  • The property cannot be enumerated through a “for…in” loop
  • The property is ignored by the methods: Object.keys(), Object.getOwnPropertyNames() and JSON.stringify()

It should be noted that the privacy of this property is not 100%, because there is still a way to access the property via the methods “.getOwnPropertySymbols()” and .ownKeys():

Read more

New String Features

by

Strings are iterable collections

String data type became an iterable collection of data from the ES2015 standard. “iterables”. Strings are now accessible by all mechanisms that require the collection to have the “iterable protocol” implemented. So now we can use “for..of” over strings:

or even use the spread operator which also requires an iterable collection to create an array:

See more about this in “Iterators and the Iterable Protocol”

Template literals

template literals

Template literals (eng. “template literals”) are character strings (so-called strings) with built-in expressions. They are marked with backtick.
“Template literal” represents a new improved way of string concatenation, which is more transparent and easier to work with. Expressions are allowed to be embedded in the template literal, if they are marked with a dollar sign and curly brackets. The template includes the so-called ” “preset format” while “literal” represents a value that is written exactly as it is intended to be interpreted. Therefore, every newline, extra space (tab) becomes part of that string
Template literals combine the following characteristics:

  • String interpolation
  • Multi-line string literals so called. “preset format”, ie. how it is written in the code is how it is interpreted at the output.
Example

Example done with ES5 and string concatenation:

New approach with template literals:

Read more

Spread & Rest operator

by

Spread operator

With the new ES2015 standard came a new operator “…” which can split an array into a list and vice versa to group a list into an array. Depending on the function it performs, this parameter has the name “spread” or “rest”. If the operator is in front of the iterable object and “spreads” the iterator (eg array) into individual values ​​creating a list, then it is called “spread”.

Transform a string to a list of arguments

This operator is a replacement for a frequently used problem when it is necessary to cast a string into a list of arguments. And the best example is “expanding” a string in a function’s argument list. This operator is used when calling the function:

Declarations of an array containing another array

Used within an array declaration that contains another array:

Cloning an object

With the new standard, it is allowed to use the spread operator within the object literal. This convenience allows us to easily clone objects using the spread operator, without using the Object.assign() method:

Merging two objects

Using the spread operator makes it easy to join two objects without duplicating properties:

Read more