In the following code
Why does the el element in js have to be bound to the id cc of p to achieve the effect of instant input? On the contrary, it cannot be achieved if it is directly bound to the id of input? After all, the message of the model is applied to the input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id = "cc">
<input v-model="message" placeholder="edit me" id="text">
<p>Message is: {{message}}</p>
</p>
<script type="text/javascript">
var vm = new Vue({
el:"#text",
data:{
message:''
}
})
</script>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If you only bind input and the scope is only input, then your p tag will have no effect. So you have to be inside p.
id is a container, which contains all data binding and other behaviors involved in your vue instantiation. You can define multiple containers in one page, but each container is like a function scope. The access behavior of variables or functions within the scope is determined by the current scope environment.
Your example is not just input, the data you bind also has p elements. So, you have to put the container id on their parent element p.
Each vue instance has a scope in the DOM, and the value of the el attribute determines the scope of the vue instance in the DOM. When you set the value of the el attribute, it is set in the DOM. Which interface elements can access the properties in the vue instance; if you have used angular, the role of the el value is actually similar to the controller in angular;