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>