What 01 Vue.js that?

Vue.js official document is introduced to it.

Simple compact core, progressive technology stack, enough to handle applications of any size.

Simply means that only a small 17KB after vue.js compression. The so-called progressive, that is, you can step by step, there are stages to use Vue.js, you do not have to start out with everything. With the constant introduction itself, you will feel it deeply, which is one of the main developers Vue.js of love.

Use Vue.js can make Web development easier, but also to subvert the traditional front-end development mode. It provides a modern Web development common advanced features, such as:

1 Decoupling view data

Reusable component 2

3 front-end routing

4 state management

5 virtual DOM

MVVM pattern (Model-View-View-Model mode)

Vue.js What is the difference?

If you've used jQuery, then it must operate on DOM, JavaScript native ability to bind these events are very familiar with, for example, we insert an element specified in the DOM, and give it to bind a click event.

if(showBth){
  var btn=$('<button>Click me</button>');       
  btn.on('click',function(){
    console.log('Clicked');   
  });
  $('#app').append(btn);   
}

This code is not difficult to understand the content of the operation is not complicated, but this let us view code and business logic tightly coupled together with the features have been added directly manipulate DOM can make code more difficult to maintain.

MVVM Vue.js by the mode data is split into two portions and views, and separated. Therefore, you only need to care about your data, DOM things Vue will seal the deal, such as the example above with Vue.js can be rewritten as:

<body>
  <div id="app">
    <button v-if="showBtn" v-on:click="handleClick">Click me</button>
  </div>
</body>

<script>
  new Vue({
    el:"#app",
    data:{
      showBtn:true
    },
    methods:{
      handleClick:function(){
       console.log("Clicked");     
     }
    }
  })
</script>

What 01 Vue.js that?

Guess you like