如下程式碼裡
為什麼js 裡面的 el 元素必須綁定p 的id cc才能實現即時輸入的效果 反而如果直接綁定到 input的id 無法實現?畢竟model的message 是作用在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>
曾经蜡笔没有小新2017-05-19 10:24:05
id是個容器,容器包含了你的vue實例化所涉及的所有資料綁定和其它行為。你完全可以在一個頁面中定義多個容器,但是,每個容器就好似一個函數作用域,作用域內的變數或函數的存取行為由目前作用域環境決定。
你的範例可不只是input啊,你綁定的資料還有p元素啊。所以,你得把容器id放在他們的父元素p上。
淡淡烟草味2017-05-19 10:24:05
每個vue實例在DOM中都有一個作用範圍,而el屬性的值決定了該vue實例作用域在DOM中的範圍,當你設定了el屬性的值時,就設定了在DOM中哪些介面元素可以存取vue實例裡面的屬性;如果你用過angular,那麼el這個值的作用其實就和angular裡面的contorller類似;