©2020-2024 ioDraw All rights reserved
<>Vue.js
Vue.js This is how it is described in the official document of ： Simple and compact core , Progressive technology stack , Enough for any scale of application .
Simple and small means Vue.js After compression, only 17KB. The so-called progressive （Progressive）, We can do it step by step , Use it periodically Vue.js, You don't have to use everything in the first place .
use Vue.js Can let Web Development becomes simple , At the same time, it also subverts the traditional front-end development mode . It provides modern information Web Common advanced functions in development ：
* Decoupling views and data
* Reusable components
* Front end routing
* State management
* fictitious DOM（Virtual DOM）
<>MVVM pattern
Well known front end framework Angular,Ember And so on ,Vue.js It is also used in design MVVM（Model-View-View Model） pattern .
MVVM Pattern is made up of classic software architecture MVC Derived from . When View（ View layer ） Time of change , It will be updated automatically ViewModel（ View model ）, vice versa .View and ViewModel Through two-way binding （data-binding） Make a connection .
<>Vue.js And JavaScript and jQuery What's the difference
In our use JavaScript or jQuery Time , The most important thing to do is to operate DOM, Binding events and so on . For example, in the formulation of DOM Insert an element in , And bind it with a click event ：
if(showBtn){ var btn = $('<button>Click me</button>'); btn.on('click',function(
){ console.log('Clicked!'); }); $('#app').append(btn); }
Such operations make our view code and business logic tightly coupled , With the increase of functions , Direct operation DOM It makes the code more and more difficult to maintain .
and Vue.js adopt MVVM The pattern of is divided into two parts: view and data , And separate it . therefore , We just need to care about the data part ,DOM What happened Vue It'll do it for us automatically , For example, the above example can be used Vue.js Rewrite as ：
<body> <div id="myApp"> <button v-if="showBtn" v-on:click="handleClick">Click
me</button> </div> <script> new Vue({ el: '#myApp', data: { showBtn: true },
methods: { handleClick: function(){ console.log('Clicked!'); } } }); </script>
</body>
Technology