<> summary

With the arrival of the era of big front end , From jquery reach react,vue Transformation of equal framework , In fact, it's the transformation from event driven to data-driven thinking mode

<> event driven

event : The user clicks the button is an event
Build page : Design DOM => generate DOM => Binding event
Listening events : operation UI => Trigger event => Response processing => to update UI

<> Data driven

data : That's what data means ( It's the same as I didn't say )
Build page : Design data structure => Event binding logic => generate DOM
Listening events : operation UI => Trigger event => Response processing => Update data => to update UI

<> difference

In fact, the biggest change is , Previously, components were considered DOM, Put the event / Logical processing as Javascript, Think of style as CSS. And when you change your way of thinking , assembly , event , Logical processing , Style is a piece of data , We just need to design the state and transformation of the data , The rest of the implementation is done in a specific way ( template engine , Event mechanism, etc ) To achieve .
After switching to data driven thinking , We are in the process of programming , More about data maintenance and processing , Without too much consideration UI Monitoring of changes and events .

<> give an example
<!--1. event driven --> <input type="text" id="input" /> <p id="p"></p> <script> $(
'#input').on('click', e => { const val = e.target.value; $('#p').text(val); })
</script> <!--2. Data driven + vue--> <input type="text" v-model="inputValue" /> <p>{{
inputValue }}</p> <!--1). event driven --> <ul id="ul"></ul> <script> const dom = $('#ul'
); list.forEach(item => { dom.append(`<li data-id="${item.id}"><span>${item.name
}</span>: <a href="${item.href}">${item.href}</a></li>`) }); </script> <!--2).
Data driven + vue--> <ul> <li v-for="item in list" :key="item.id"><span>{{item.name}}</
span><a :href="item.href">{{item.href}}</a></li> </ul>

Technology
©2019-2020 Toolsou All rights reserved,
JAVA Detailed explanation of anomalies MySQL An interview is a must ! How to use it quickly html and css Write static page R Language cluster analysis case Dialogue between apple and Nissan suspended ,Apple Car How's it going ?java Realize the function of grabbing red packets SpringBoot practice ( five ):mybatis-plus In BaseMapper,Iservice and ServiceImpl Google says home office affects work efficiency !2021 Return to offline office in 2010 about keras use fit_generator Encountered in StopIteration Programmer Tanabata Valentine's Day confession code