Vue listening usage method and filter implementation

Preface

• Today is the fourth day of self-study VUE to organize knowledge points. Today I will sort out the filters and watch monitoring knowledge points.

Filter

• The function of the filter:Add fuel to the data on the page
• There are two types:Local filter Global filter
• Format:
  • 1. Declare filters
  • 2.{{Data|Filter Name}}

Local filter code

Local custom filters:The key is to use the filters attribute, and both the first and second declaration methods can be implemented.

      ('myLi',{
			template:`
			`
		});
               var App={
			data(){
				return{
					price:0,
					msg:'hello filter'
				}
			},
			template:`
			<div>
			 <input type='number' v-model='price'  />
			 <h3>{{price | myCurrentcy}}</h3>
			 <h4>{{msg |myReverse 	 }}</h4>
			</div>
			`,
			filters:{
				// Declare filter				myCurrentcy:function(value){
					return "￥"+value
				}
			}
		};
		
		new Vue({
			el:'#app',
			components:{
				App,
			},
			template:`<App/>`
		})            

Global filter

advantage:Filters are often used in projects to format the data and display it on the page, such as date format conversion, numerical conversion into status text and other filters. If the same filter is copied on each .vue page for use, although it is no problem, if you need to add a new situation judgment or a bug in the filter method, you must modify the filters in each .vue, which is time-consuming and laborious. Therefore, for project maintenance, you can give priority to defining global filters.

Global filter code:

    ('myReverse',function(value){
			return ('').reverse().join('');
			
		});`

Watch monitor

vue provides a listening property watch, which can observe and listen to changes in vue instance response data.

Basic data types:

• Basic data type Simple monitoring
• Complex data types Deep monitoring

Simple monitoring

Through the watch method:There are (new value, old value) in the method to monitor. You can also add conditions. When the new value is equal to one value, other values ​​are output. *

  <input type="text"  v-model="msg">
  	<h3>{{msg}}</h3>
  new Vue({
  		el:'#app',
  		data(){
  			return{
  			msg:'',
  			stus:[{name:'jack'}]
  			}
  		},
  		watch:{
  			msg:function(newV,oldV){
  				(newV,oldV);
  				if(newV ==='sir'){
  					('Sir is here')
  				}
  			}  

Complex monitoring

For complex listening events, use stus for deep listening*

	<button @click="stus[0].name='rose'">Change </button>
			<h4>{{stus[0].name}}</h4>
  new Vue({
				el:'#app',
				data(){
					return{
					msg:'',
					stus:[{name:'jack'}]
					}
				},
	
					 // Listen to complex data types object array deep listening					stus:{
						deep:true,//Deep monitoring						handler:function(newV,oldV){
							(newV[0].name);
						}
					}
				}	

This is the end of this article about the usage methods and filter implementation of Vue monitoring. For more related Vue monitoring content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!