Vue computed properties and listeners and filters super detailed introduction

This article brings you relevant knowledge about vue, which mainly introduces detailed introduction to calculated properties, listeners and filters, including the total use of calculated properties in the shopping cart, etc. Let’s take a look at the content below. I hope it will be helpful to everyone.

【Related recommendations: javascript video tutorial, vue.js tutorial】

1 . Calculated properties

1.1 Usage

Overview:

Putting too much logic in a template will make the template overweight and difficult to Maintenance, using calculated properties can make templates concise and easy to maintain. Computed properties are cached based on their responsive dependencies. Computed properties are more suitable for processing multiple variables or objects and returning a result value. That is, if one of the values ​​of multiple variables changes, the value we monitor will be The value will also change.

Computed properties are defined in the Vue object. Functions are defined in the keyword computed property object and return a value. When using calculated properties, they are used in the same way as the data in data.

Usage:

When we do not use calculated properties, we want to calculate the results in the template, and there are several ways to write them:

    
    
{{ n1+n2 }}
    
    
{{ sum() }}
    
{{ sum() }}
    
{{ sum() }}

If you want to calculate a result, you can use vue to provide calculated properties, and the calculated properties also have a caching function. If your dependencies have not changed, it will read the data in the cache when it is called again.

    
{{total}}
    
{{total}}
    
{{total}}

Note:

• When calling a calculated attribute, just write the name directly in the template without parentheses.
• In the calculated attribute, n1 and n2 are called, then n1 and n2 are its dependencies. If one of these two dependencies changes, it will be recalculated. If neither of them exists, If a change occurs, it will be called after the second call to read the data in the cache. This is why the above calculation is performed three times, but the calculation method is only called once, because the dependencies in the calculated attribute have not changed.
• The dependency in the calculated property can be one or N, depending on how many you call in the calculated property.
• Asynchronous cannot be written in the method in the calculated attribute.
• The calculated properties above are abbreviations. Abbreviation is the most commonly used method.
• Computed properties can be called not only in templates, but also in methods.

If the defined calculated property is abbreviated, an error will be reported when assigning a value to the calculated property. Only when written in a standard way, it can perform assignment operations on calculated properties. Let's take a look at what the standard writing method is.

    
{{ sum() }}
    
{{msg}}

Note:

• The abbreviation method only implements the get method in the standard writing method.
• Assignment will only trigger the set method in the standard way, and then you can get the new value and complete some other work.

1.2 Case - Shopping Cart Total Using Calculated Property

    
        
        
        
        
        
        
    

    
        
        

            

                

                    
序号
                    
名称
                    
单价
                    
数量
                    
操作
                
                

                    
{{index+1}}
                    
{{item.name}}
                    
{{item.price}}
                    

                        +++
                        
                        ---
                    
                    

                        删除
                    
                
            
            

            

                合计：
                {{totalPrice}}
            
        

        
        
    

2. Listener

Overview:

Use watch to listen for changes in data in data. The attributes in watch must be data that already exists in data.

When you need to monitor changes in an object, the ordinary watch method cannot monitor the changes in the internal properties of the object. Only the data in data can monitor the changes. At this time, you need the deep attribute to monitor the object in depth. .

Usage:

Standard writing:

    

        
        {{errorUsername}}
    

Note:

1. The listener is used to monitor data configuration Once the data in the data changes, it will be automatically triggered. By default, initialization is not triggered.
2. This object can be obtained in the listener.
3. The listener has only one dependency, one-to-one.
4. Asynchronous (Ajax or setTimeout) can be written in the listener.

Abbreviation:

    

        
        {{errorUsername}}
    

When initializing, enable the listener writing method:

    

        
        {{errorUsername}}
    

注意：这个配置只有在标准写法下才能有。

监听对象中的属性变化：

监听对象变化：

注意：

1. 监听对象，只能使用标准方式来写
2. 监听对象变化，它的前后值是一样的，无法区分

3. 过滤器

概述：

在数据被渲染之前，可以对其进行进一步处理，比如将字符截取或者将小写统一转换为大写等等，过滤器本身就是一个方法。

过滤器的作用就是为了对于界面中显示的数据进行处理操作。

过滤器可以定义全局或局部。

定义全局过滤器：

    
{{ phone | phoneCrypt }}

上面的全局过滤器的回调函数中只有一个参数，我们还可以定义多个参数：

    
    
{{ phone | phoneCrypt('!!!!') }}

定义局部过滤器：

    
{{ phone | phoneCrypt('!!!!') }}

【相关推荐：javascript视频教程、vue.js教程】

The above is the detailed content of Vue computed properties and listeners and filters super detailed introduction. For more information, please follow other related articles on the PHP Chinese website!