vue day01 template interpolation syntax MVVVM data proxy event processing modifier

Review the new keyword:

<script>

    function Person(name, age){
        this.name = name;
        this.age = age;
    }

    const person1 = new Person('Tom', 20);
    console.log(person1);  // Person {name: "Tom", age: 20}

// __proto__ attribute, which is unique to objects. You can see that __proto__ attributes are pointed from one object to another object, that is, to their prototype objects (which can also be understood as parent objects)
//prototype attribute, which is unique to functions,
//It points to an object from a function. Its meaning is the prototype object of the function, that is, the prototype object of the instance created by this function (in fact, all functions can be used as constructors)
    var i = (person1.__proto__ === Person.prototype);
    console.log(i);
    console.log(person1.__proto__);

    //The constructor attribute is also owned by objects. It points from an object to a function, which means it points to the constructor of the object.
    //The peoson1 object itself does not have a constructor (constructor attribute). It can be found in the prototype chain through the __proto__ attribute. Person.prototype has a constructor attribute and points to the Person function.
    //So the constructor property of the person1 object is inherited.
    console.log(person1.constructor);
    console.log(person1.__proto__.constructor);

    </script>

 

Vue is a constructor and should be called using new.

Verify whether this in the function is an instance object.

Vue (options) {
    if (!(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
  }

test:

<!--
       //The code in the root container is called vue template
       Containers have two functions
       1. Provide templates for vue
       2.Storage of vue parsing results
   --> 
    <div id="root">
        <h1>46465,change,{{name}}</h1>
    </div>


    <script type="text/javascript">
     
        Vue.config.productionTip = false;

        //The parameter is the configuration object
        //const x = 
        new Vue({
            //el:document.getElementById("root");
            el:'#root',//Specify which container the current vue instance works for, parse, and find the vue template in the container. The template is parsed and turned into an html fragment.
            data:{//data storage container, used by the container pointed to by el, the value is temporarily specified as an object here
                name:'123'
            }
        });
    </script>

Interpolation syntax

1. Function: Used to parse tag body content

2. Syntax: {{xxx}}, xxxx will be parsed as a js expression

Command syntax

1. Function: parse tag attributes, parse tag body content, bind events

2. Example: v-bind:href = ‘xxxx’, xxxx will be parsed as a js expression

3. Note: There are many instructions in Vue. Here I just use v-bind as an example.

<body>
   <!--
       //The code in the root container is called vue template
       Containers have two functions
       1. Provide templates for vue
       2.Storage of vue parsing results
   --> 
    <div id="root">
        <h1>Interpolation syntax,change,{{name}}</h1>
        <h1>Command syntax</h1>
        <! -- With instructions, the contents of the quotes become js expressions -->
        <a v-bind:href='school.url'>Click to go to {{school.name}}</a>
        <a :href='Date.now()'>{{school.name}}</a>
    </div>


    <script type="text/javascript">
     
        Vue.config.productionTip = false;

        //The parameter is the configuration object
        //const x = 
        new Vue({
            //el:document.getElementById("root");
            el:'#root',//Specify which container the current vue instance works for, parse, and find the vue template in the container. The template is parsed and turned into an html fragment.
            data:{//data storage container, used by the container pointed to by el, the value is temporarily specified as an object here
                name:'123',
                school:{
                    name:"Silicon Valley",
                    url:"http://www.atguigu.com"
                }
                
            }
        });
    </script>
    
    
</body>

One-way data binding

1. Syntax: v-bind:href =”xxx” or abbreviated as:href

2. Features: Data can only flow from data to page

Two-way data binding

1. Syntax: v-mode:value=”xxx” or abbreviated as v-model=”xxx”

2. Features: Data can not only flow from data to page, but also from page to data.

Two ways to write el

v.__proto__ === Vue.prototype

v is a Vue instance object.

The required properties are on the prototype object.

Find the properties of the prototype object of the v instance:

<div id="test">
            <h1>{{name}}</h1>
       

    </div>
    <script type="text/javascript">
         Vue.config.productionTip = false;

         const v = new Vue({
             //el:"#test",

             //1.Object type
             /*data:{
                 name:"atguigu"
             }*/

             //2.Functional formula
             data(){
                 //this is the vue instance object
                 return{
                     name:"atguigu"
                 }
             }

         });




         console.log(v);

         setTimeout(() => {
             v.$mount("#test");
         }, 1000)
         
         

        
    </script>

MVVM model

 

The attribute of data appears in vm,

All vm attribute methods (including prototypes) and templates can be accessed.

Review Object.defineproperty:

After the code is executed, if the value of number is modified at this time, the value of count will not change.

Using defineProperty data binding, when reading the age property of person, the getter will be accessed and the value of age will be returned.

At this time, the value of number is modified. When accessing the value of age, the getter is first called to obtain number and then returned to age.

Object.defineProperty(person,'age',{
            // value:18,
            //enumerable:true,//Control whether the property can be enumerated
            //writable:true,//Control whether the attribute can be modified
            // configurable:true,//Control whether the attribute can be deleted

            //When someone reads the age attribute of person, the get function (getter) will be called, and the return value is the value of age.
            get:function(){
                return number;
            }
        });

 

The value of age comes from number. The modified value is passed to number, and age changes.

//When someone modifies the age attribute of person, the set function (setter) will be called and the specific modified value will be received.
            set(value){
                number = value;
                console.log(value);
            }

 

Vue data proxy

Access and modify name and address through vm. What is accessed and modified is the name and address of data.

At the same time, if the data of data changes, the page will also change.

* Internal vm._data = options.data

 

Modify vm._data.name, the data in data will also change.

_data data hijacking, responsive.

Modify vm.name, the data will also change. The data in _data is given to vm.

The name and address properties in vm use Object.defineProperty(). These properties have getters and setters.

When accessing or modifying the name and address attributes of the vm, through the data agent, the attributes in _data are actually operated.

event handling

<div id="test">
         <h1>welcome to {{name}}</h1>

         <button v-on:click="show">click showInfo</button>
         <!--
             abbreviation <button @click="show">click showInfo</button>
         -->

         <button @click="show1(66,$event)">click showInfo</button>


    </div>
    <script type="text/javascript">
         Vue.config.productionTip = false;

         const vm = new Vue({
             el:"#test",
             data:{
                 name:"atguigu"
             },
             methods:{
                 //event event object
                 show(event){
                     console.log(event.target.innerText = "change");
                     console.log(this);//vm
                     alert("prompt message");
                 },
                 
                 show1(number,event){
                     console.log(number,event);
                     alert("prompt message");
                 },

             }
         });
    </script>

The methods object does not act as a data proxy. The method does not need to be modified afterward, and there is no need to do a data proxy.

event modifier

Capture first then bubble. By default, events are processed in the scheduling phase and output is 2,1.

Click the button, event.targrt is the button twice, and the event is the button.

<div class=”demo1″  @click=”show”>

<button @click=”show”>Click prompt information</button>

 </div>

At this time, the event will only be triggered when event.target is a div.

<div class=”demo1″  @click.self=”show”>

<button @click=”show”>Click prompt information</button>

        </div>

<! -- Blocking Default events -->
        <a href="http://www.atguigu.com" @click.prevent="show">click showInfo</a>

        <! -- Stop events from bubbling -->
        <div class="demo1"  @click="show"> 
            <button @click.stop="show">Click prompt information</button>
        </div>

        <! -- Event only triggers once -->
        <button @click.once="show">one click</button>

        <! -- Using event capture -->
        <div class="box1" @click.capture="show1(1)">
            div1
            <div class="box2" @click="show1(2)">div2</div>
        </div>

        <! -- An event is triggered only if event, target is an element of the current operation -->
        <div class="demo1"  @click.self="show"> 
            <button @click="show">Click prompt information</button>
        </div>

        <! -- The default behavior of the event is executed immediately, without waiting for the event callback to finish executing Mobile -->
        <! --scroll wheel  
            Roll the wheel. First trigger the scroll event, execute the callback, and then execute the default behavior after the execution is completed, and then move the scroll bar.
         -->
        <ul @whell.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

 

Keyboard events

The event is executed only after pressing enter.

<div id="test">
        <h2>welcome to {{name}}</h2>
        <input type="text" placeholder=" Hit enter to prompt "@keyup.enter="show">

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        new Vue({
            el:"#test",
            data() {
                return {
                    name:"atguigu",
                }
            },
            methods:{
                show(e){
                    //console.log(e.keyCode);
                   // console.log(e.target.value);
                //    if(e.keyCode !== 13){
                //         return;
                //    }
                   console.log(e.target.value);
                }

            }
        });

Stop bubbling first, then block the default event.

Modifiers can be written consecutively.

Only ctrl+y can prompt for input

Related Posts

SpringBoot unit testing-JUnit5

Linux Basics (CentOS)

Several scroll bar control methods in selenium

Uniapp launches review of permission description for iOS private information access

In five minutes, understand what ES6 common syntax will be used in vue projects

[WeChat Mini Program] Using MPFlutter to develop WeChat Mini Programs

How to set the App’s application name and application logo icon in Flutter (android ios web)

Reproduction of unauthorized file upload vulnerability from Zhiyuan OA-ajax.do

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*