Analysis of a small case of acquaintance with vue

foreword

We have already written a case: First acquaintance with the small case of vue

Next, we will analyze the small case of the first acquaintance with vue.

There is a one-to-one correspondence between containers and vue instances!

There should be a one-to-one correspondence between containers and vue instances, and one-to-one or one-to-many is not allowed.

The following is an example of a container for multiple instances, here we replace the id selector with the class selector

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>initial vue</title>
        <!-- introduce vue.js -->
        <script  type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- prepare a container -->
        <div id="root">
            <!-- {{xxx}}Yes vue interpolation syntax in -->
            <h1>hello,{{name}},this year, I{{age}}Years old</h1>
        </div>
        <div id="root">
            <!-- {{xxx}}Yes vue interpolation syntax in -->
            <h1>hello,{{name}},this year, I{{age}}Years old</h1>
        </div>
        <p #a></p>
        <script type="text/javascript">
             // Set to false to prevent vue from generating production prompts on startup.
            Vue.config.productionTip= false 
            // Create a vue instance
            new Vue({
                // Attributes are usually in the form of key:value. The key cannot be changed, and the value can be changed. It is used before multiple keys, and the last key is not written.
                el:'#root', // el is the shorthand element, used to specify which container the current vue instance serves, the value is usually a css selector string
                data:{  // data is used to store data, the data is used by the container specified by el, and several values ​​can be stored, which is also in the form of key:value
                    name:'vue',
                    age:'18'
                }
            })
        </script>
    </body>
   
</html>


The second container on the page is unresolvable

Then there is one container corresponding to two instances, which is obviously not possible.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>initial vue</title>
        <!-- introduce vue.js -->
        <script  type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- prepare a container -->
        <div id="root">
            <!-- {{xxx}}Yes vue interpolation syntax in -->
            <h1>hello,{{name}},this year, I{{age}}Years old</h1>
        </div>
       
        <p #a></p>
        <script type="text/javascript">
             // Set to false to prevent vue from generating production prompts on startup.
            Vue.config.productionTip= false 
            // Create a vue instance
            new Vue({
                // Attributes are usually in the form of key:value. The key cannot be changed, and the value can be changed. It is used before multiple keys, and the last key is not written.
                el:'#root', // el is the shorthand element, used to specify which container the current vue instance serves, the value is usually a css selector string
                data:{  // data is used to store data, the data is used by the container specified by el, and several values ​​can be stored, which is also in the form of key:value
                    name:'vue',
                    age:'18'
                }
            })
             // Create a vue instance
             new Vue({
                // Attributes are usually in the form of key:value. The key cannot be changed, and the value can be changed. It is used before multiple keys, and the last key is not written.
                el:'#root', // el is the shorthand element, used to specify which container the current vue instance serves, the value is usually a css selector string
                data:{  // data is used to store data, the data is used by the container specified by el, and several values ​​can be stored, which is also in the form of key:value
                    name:'java',
                    age:'28'
                }
            })
        </script>
    </body>
   
</html>


Only one container is normal for one instance

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>initial vue</title>
        <!-- introduce vue.js -->
        <script  type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- prepare a container -->
        <div id="root">
            <!-- {{xxx}}Yes vue interpolation syntax in -->
            <h1>hello,{{name}},this year, I{{age}}Years old</h1>
        </div>
        <div id="root1">
            <!-- {{xxx}}Yes vue interpolation syntax in -->
            <h1>hello,{{name}},this year, I{{age}}Years old</h1>
        </div>
       
        <p #a></p>
        <script type="text/javascript">
             // Set to false to prevent vue from generating production prompts on startup.
            Vue.config.productionTip= false 
            // Create a vue instance
            new Vue({
                // Attributes are usually in the form of key:value. The key cannot be changed, and the value can be changed. It is used before multiple keys, and the last key is not written.
                el:'#root', // el is the shorthand element, used to specify which container the current vue instance serves, the value is usually a css selector string
                data:{  // data is used to store data, the data is used by the container specified by el, and several values ​​can be stored, which is also in the form of key:value
                    name:'vue',
                    age:'18'
                }
            })
             // Create a vue instance
             new Vue({
                // Attributes are usually in the form of key:value. The key cannot be changed, and the value can be changed. It is used before multiple keys, and the last key is not written.
                el:'#root1', // el is the shorthand element, used to specify which container the current vue instance serves, the value is usually a css selector string
                data:{  // data is used to store data, the data is used by the container specified by el, and several values ​​can be stored, which is also in the form of key:value
                    name:'java',
                    age:'28'
                }
            })
        </script>
    </body>
   
</html>


The vue interpolation syntax {{}} in the container can only write js expressions

The xxx in {{xxx}} needs to write a js expression, and xxx can automatically read all the attributes in the data

It is definitely not possible to write an attribute that does not exist in data


But it's okay to write some others, such as 1+1, Date.now(), these are all js expressions



Once the data in data changes, the place where the data is used in the page will also be automatically updated

We can observe and find the value changes of vue through the Google vue plugin


At the same time, you can click the value to modify, click the pen behind to edit, and then click the save button to save

Introduction to vue summary

1 To make vue work, you must create a vue instance and pass in a configuration object (container)
2 The code in the root container still conforms to the html specification, but some special vue syntax is mixed in
3 The code in the root container is called a vue template
4 vue instance and container are one-to-one correspondence
5 There is only one instance of vue in real development, and it will be used with components
6 xxx in {{xxx}} needs to write js expressions, and xxx can automatically read all attributes in data
7 Once the data in data changes, the place where the data is used in the page will also be automatically updated

Tags: Front-end Vue Javascript Vue.js Visual Studio Code

Posted by satya61229 on Wed, 14 Sep 2022 03:04:55 +0930