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