Im folgenden Code
Warum muss das el-Element in js an die ID cc von p gebunden sein, um den Effekt einer sofortigen Eingabe zu erzielen? Im Gegenteil, es kann nicht erreicht werden, wenn es direkt an die ID der Eingabe gebunden ist? Schließlich wird die Botschaft des Modells auf die Eingabe angewendet
<!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-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你只绑定input，作用域只在input，那你的p标签就没有效果呀。所以你要在p里面。
id是个容器，容器包含了你的vue实例化涉及到的所有数据绑定和其它行为。你完全可以在一个页面中定义多个容器，但是，每个容器就好似一个函数作用域，作用域内的变量或者函数的访问行为由当前作用域环境决定。
你的示例可不仅仅是input啊，你绑定的数据还有p元素啊。所以，你得把容器id放在他们的父元素p上。
每个vue实例在DOM中都有一个作用范围，而el属性的值就决定了该vue实例作用域在DOM中的范围，当你设置了el属性的值时，就设定了在DOM中哪些界面元素可以访问vue实例里面的属性；如果你用过angular，那么el这个值的作用其实就和angular里面的contorller类似；