Vue- first met vue

What are the mainstream frameworks commonly used in the front-end?

Angular: Google 71.2K in 2009

React: 2013年 Facebook 165k

Vue: 2014 Youyu Creek 180k

Introduction to Vue

Vue.js is a progressive (some features can be used), a gradually adoptable JavaScript framework for building UI on the Web and supporting two-way data binding

The progressive framework I understand is: development can be carried out without mastering all its grammatical rules

Official website: https://cn.vuejs.org/

Features

Simple, easy to use, quick to get started (HTML+CSS+JS)
Flexible (complete ecology)
High efficiency (30k)
personal project

MVVM development model

M:model – data

V: view – Html UI interface

VM:viewModel – an example of Vue

The Vue mode is the mv-vm mode, which uses modelView as the middle layer (ie, an instance of vm) to bind and change two-way data.

The data in the model is changed and reflected in the view at the same time,

The data in the view is updated, and the data in the model also changes synchronously.
Realization principle

By establishing a virtual dom tree document.createDocumentFragment(), the method creates a virtual dom tree.
Once the monitored data changes, it will be intercepted by the data defined by Object.defineProperty to intercept the data changes.
The intercepted data changes, through the subscription-publisher mode, trigger Watcher (observer), thereby changing the specific data in the virtual dom.
Finally, by updating the element value of the virtual dom, the value of the last rendered dom tree is changed to complete the two-way binding.

Create a simple Vue program

Introduce vuejs

<script src="js/vue.js" charset="utf-8"></script>

Create a div and set the class or id

<body>
    <div id="app">
        <input v-model="message" /><br/>
        // this就是vue实例
        <p>{
   
   {this.message}}</p>
    </div>
</body>

Instantiate the vue instance under the body tag and bind it to the div object

<script>
    // vue的内部维护了一个虚拟的DOM对象。
    var vm = new Vue({
     
     
        el:"#app", // vue实例绑定了id为app的标签 有class属性也可以用.
        data:{
     
     message:"Hi Vue",count:0}
    })
</script>

Guess you like