Vue.js has a simple, compact core, and a progressive stack that can handle applications of any size. By progressive, I mean that vue.js can be used step by step and in stages.

It provides advanced features common in modern Web development, such as:

  • Decouple views from data
  • Reusable components
  • The front-end routing
  • State management
  • Virtual DOM

1 the MVVM pattern

MVVM (model-view-viewModel) mode. The MVVM pattern is a derivative of the classic MVC pattern. When the View changes, it is automatically updated to the ViewModel, and vice versa, and there is a data-building connection between the View and the ViewModel.

Therefore, developers only care about the data, leaving DOM maintenance to Vue.

2 The first line of Vue code

We can use the CDN method to load vue.js to achieve a quick experience. Currently the following CDN addresses are available:

  • BootCDN: cdn.bootcss.com/vue/2.2.2/v…

  • Unpkg:unpkg.com/vue/dist/vu… , will be consistent with the latest version released by NPM.

  • CDNJS: cdnjs.cloudflare.com/ajax/libs/v…

WebStorm is recommended for developing Vue projects.

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title> My buddy list </title> </head> <body> <div id="app">
        <ul>
            <li v-for="friend in friends">{{friend.name}}</li>
        </ul>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                friends:[
                    {name:'Jack'},
                    {name:'Lucy'}

                ]
            }
        })
    </script>

</body>
</html>
Copy the code

Use CTRL + Shift +F10 in WebStorm to run in the browser.

Effect: