Data binding of Vue Foundation

When we learn a new language or framework, the first thing is to say Hello to the world.

Create a Vue application

Let's start with the code, let's feel the core functions of Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        <h1>{{message}}</h1> // Output mode of {message} template
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app', // app is the hung object of the Vue instance
            data: {
                message: "Hello world" // Literal
            }
        })
    </script>
</body>
</html>

When modifying the content of input box, the content of h1 tag will be changed accordingly. Although the code is very simple, the essence of bidirectional binding can be realized.

Two way binding (interview and examination site)

  1. Create a Vue instance new Vue() through the constructor, and the app is equivalent to new Vue;
  2. Passing in El, El is essential in Vue object. You need to mount el on the existing DOM (DOM element or CSS selector) of the page;

     var app = new Vue({
         el: '#App ', / / or document.getElementById('app')
     })
  3. There is a v-model instruction on the input tag. Its value corresponds to the message in the data of the Vue instance. Input can modify the value of message, and when the message changes, it can also be reflected in the view;

Life cycle (must be understood when developing)

Before each Vue instance is created, it must go through a series of initialization processes, which is the life cycle of Vue. Here are some hook functions of Vue:

beforeCreate: function () {
    console.group('beforeCreate Status before creation===============>');
    console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
    console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
    console.log("%c%s", "color:red","message: " + this.message)  
},
created: function () {
    console.group('created Creation completed status===============>');
    console.log("%c%s", "color:red","el     : " + this.$el); //undefined
    console.log("%c%s", "color:red","data   : " + this.$data); //Initialized 
    console.log("%c%s", "color:red","message: " + this.message); //Initialized
},
beforeMount: function () {
    console.group('beforeMount Status before mounting===============>');
    console.log("%c%s", "color:red","el     : " + (this.$el)); //Initialized
    console.log(this.$el);
    console.log("%c%s", "color:red","data   : " + this.$data); //Initialized  
    console.log("%c%s", "color:red","message: " + this.message); //Initialized  
},
mounted: function () {
    Vue.this = app // Debugging in browser
    console.group('mounted Mount end status===============>');
    console.log("%c%s", "color:red","el     : " + this.$el); //Initialized
    console.log(this.$el);    
    console.log("%c%s", "color:red","data   : " + this.$data); //Initialized
    console.log("%c%s", "color:red","message: " + this.message); //Initialized 
},
beforeUpdate: function () {
    console.group('beforeUpdate Status before update===============>');
    console.log("%c%s", "color:red","el     : " + this.$el);
    console.log(this.$el);   
    console.log("%c%s", "color:red","data   : " + this.$data); 
    console.log("%c%s", "color:red","message: " + this.message); 
},
updated: function () {
    console.group('updated Update completion status===============>');
    console.log("%c%s", "color:red","el     : " + this.$el);
    console.log(this.$el); 
    console.log("%c%s", "color:red","data   : " + this.$data); 
    console.log("%c%s", "color:red","message: " + this.message); 
},
beforeDestroy: function () {
    console.group('beforeDestroy Status before destruction===============>');
    console.log("%c%s", "color:red","el     : " + this.$el);
    console.log(this.$el);    
    console.log("%c%s", "color:red","data   : " + this.$data); 
    console.log("%c%s", "color:red","message: " + this.message); 
},
destroyed: function () {
    console.group('destroyed Destruction completion status===============>');
    console.log("%c%s", "color:red","el     : " + this.$el);
    console.log(this.$el);  
    console.log("%c%s", "color:red","data   : " + this.$data); 
    console.log("%c%s", "color:red","message: " + this.message)
}

The following figure shows the changes of el, data and message fields in data during the Vue life cycle

The above is the whole content of this issue. If you want to know about the future, please listen to the next step of decomposition < ( ̄)  ̄) ⅶ [GO!]

Tags: Front-end Vue IE npm Javascript

Posted on Mon, 02 Dec 2019 04:28:33 -0800 by garmann