Implementation of observer mode in vue

There are three ways to implement the observer mode in vue:

1. V-On Method

Exp:

<Div id = 'test'>

<Button V-on: event = 'functionname'> buttonname </button>

</Div>

VaR Vm = new vue ({

El: '# test ',

Method :{

Functionname: function (){};

}

}

V-on can bind events in the doc to the corresponding function. when an event occurs, the bound function will be called!

2. compute attributes

<Div id = 'test'>

<P >{{ fullname }}</P>

</Div>

VaR Vm = new vue ({

El: '# test ',

Data :{

Firstname =''

Lastname =''

}

Compute :{

Fullname: function (){

Return firstname + lastname;

}

}

}

Every time firstname and lastname are updated, fullname will be called. In fact, VM. fullname. getter () is called ().

3. Use the watch attribute

<Div id = 'test'>

<P >{{ fullname }}</P>

</Div>

VaR Vm = new vue ({

El: '# test ',

Data :{

Firstname = '',

Lastname = '',

Fullname =''

}

Watch :{

Firstname: function (){

Fullname = firstname + lastname;

Return;

},

Lastname: function (){

Fullname = firstname + lastname;

Return;

}

}

}

Whenever the observed value in watch changes, the corresponding function will be called.

Implementation of observer mode in vue