Learn the basics of VueJS (Part 2)

Tram Ho

Preamble:

In the previous part, I showed you how to install Vuejs and the lifecycle of an object in Vuejs. Now let’s go to learn more about Computed property and watcherBinding by class and styleRender by condition and by list.

Computed property and watcher:

1. Computed property:

Computed property can be understood as a “computed property”. It is represented as a method or an object  containing the  setter  and  getter methods. Usually when we calculate simple processing operations in the template, we will write the function directly in the template by placing the function inside the {{ }} syntax. But this with complex processing operations put into the template, it will look very confusing and more difficult to maintain, then we need to use the Computed property.

How to declare use Computed property:

Here’s a simple example of how to handle it directly on the template and handle it via Computed property :

And this is the result:

According to my example, you must be wondering why we don’t use it methods but have to use computed? Because functions do not need to pass such parameters when using computed performance will be maximized due to the cache mechanism that when rendered without change, it will always take the value in cache.

2. Watcher:

Watcher in Vuejs Used to track and monitor data changes and take action accordingly. To declare watcher in Vuejs , you need to adhere to the following 2 principles:

  • The name of the watcher must match the name of the data to be monitored.
  • The watcher must be placed in the watch scope.

Syntax example:

3. Perform computed comparisons, watch and methods:

Computedwatchmethods
Done when?Dependent properties changeAttribute change monitoringre-render the page
ParametersNoYesYes
Use when?When manipulating data without wanting to recalculateWhen the data is large and constantly changingWhen you need a regular function or a function with parameter rights

Binding for classes and styles:

During the development of your project there may come a time when you want to add a class or a style attribute to an HTML tag with a certain condition occurring. Since both class and style are attributes, we can use v-bind to handle them. Vue provides some support when v-bind is used with classes and  styles. Not only strings, these expressions can handle both arrays and objects.

1. Binding class in HTML:

  1. Using object: We can consider the following example of what bind class and many classes would look like:

    Pass the data in as follows:

    Now let’s style the classes we just created:

    So, here we declare the default value for the variable isActive and isBold. When clicking on the button declared buttons above, the values for the corresponding variables will be changed.

    And Vue also allows you to pass 1 Object to the bind class as follows:

    Data transmission:

  2. Using arrays: Similar to using Object, using arrays will be declared as follows: <div v-bind:class="[activeClass, boldClass]"></div> Data transmission:

2. Binding for inline style:

Binding for inline style in usage is quite similar to Binding class in HTML, very simple syntax – looks like CSS normally, only it is a object JavaScript.

The basic example is as follows:

<div v-bind:style="{ color: Color, fontSize: fontSize + 'px' }">Hello world</div>

Data transmission:

Usually we should bind to a style-specific Object to make your code look cleaner. Examples are as follows:

<div v-bind:style="styleObject"></div>

Data transmission:

If you use the css multiple-valued attribute,  Vue has also supported you by:

<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

In this case,  Vue will automatically select the appropriate attribute for the browser you are using.

Conditional Render:

In a large or small project, you’ve certainly had to do with conditional statements. Similarly, Vue provides us with directives to consider conditions and usage quite similar to other programming languages that you have ever learned. Let’s go through it together.

1. v-if:

v-if is 1 directive must be used on a single element eg <div> ….. help us manage rendering.

According to the example above, we can check the display condition of an element that you want and you can also see that the usage is not different from other languages you learn.

2. v-else:

Similar to v-ifdirectivev-else This acts as a block “else” by v-if and v-else must be right behind directivev-if or v-else-if.

3. v-else-if:

Similar to v-elsedirective v-else-if acts as a block “else-if” by v-if and they can be used repeatedly.

4. v-show:

Directive v-show is also an option for render according to the same condition and usage as v-if.

Let’s take a look and see if it returns something similar to v-if when click button.

So why have these 2 directives when the results are similar?

Because directive v-show will always be rendering in the DOM and only be visible using the CSS properties. Still v-if then it depends on the test condition to render DOM.

Render by list (v-for):

Directive v-for we use to render a list based on an array, in projects we will use it often.

Let’s go into an example so you can understand better.

We can v-for 1 object as follows:

Please notice that v-for the sort order of the parameters will be (value, key, index) with index is the sequence number of the attribute. We can v-for with a sequence of numbers:

And you can also v-for directly with the component as a normal element:

<my-component v-for="item in items" :key="item.id"></my-component>

In order for Vue to be able to recognize each node and thereby reuse and arrange elements, you need to provide an attribute key with a unique value for each item.

Vue recommended to use the key whenever you use v-for, unless the DOM content being traversed is too simple or you are intentionally using the default behavior of Vue to speed up the application.

v-for and v-if:

When v-for and v-if are used on the same node, v-for will have higher precedence than v-if and v-if executes on each loop of v-for, reducing the speed. handle. These two directives should only be used when you want to render some items according to your desired conditions.

The above example will only render students under 20 years old.

Please note that From version 2.2.0 onwards, the key attribute is required when using v-for with a component.

Summary:

So in this article, I introduced you to Computed property and watcherBinding by class and styleRender by condition and by list in Vuejs to help you understand the basics of Vue. I look forward to receiving your comments. Thank you for listening to my sharing. Good luck!

References:

https://vi.vuejs.org/v2/guide/

Share the news now