淺談Vue的單向綁定和雙向綁定

1、單向綁定

單向數據綁定的實現思路:

① 所有數據只有一份

② 一旦數據變化,就去更新頁面(只有data-->DOM,沒有DOM-->data)

③ 若用戶在頁面上做了更新,就手動收集(雙向綁定是自動收集),合併到原有的數據中。

<!DOCTYPE html>
<html>
<head></head>
<body>
  	<div id="app">
    	{{message}}
  	</div>
  	<script>
    	var app = new Vue({
      		el: '#app',
      		data: {
        		message: ''
      		}
    	});
  	</script>
</body>
</html>

 

2、雙向綁定

數據的雙向綁定是vue實現的一大功能。

使用v-model指令,實現視圖和數據的雙向綁定。

所謂雙向綁定,指的是vue實例中的data與其渲染的DOM元素的內容保持一致,無論誰被改變,另一方會相應的更新爲相同的數據。這是通過設置屬性訪問器實現的。

v-model主要用在表單的input輸入框,完成視圖和數據的雙向綁定。

v-model只能用在<input>、<select>、<textarea>這些表單元素上。

雙向綁定的缺點:不知道data什麼時候變了,也不知道是誰變了,變化後也不會通知,當然可以watch來監聽data的變化,但這複雜,還不如單向綁定。

<!DOCTYPE html>
<html>
<head></head>
<body>
  	<div id="app">
    	<input type="text" v-model="message">
    	<p>{{message}}</p>
  	</div>
  	<script>
    	var app = new Vue({
      		el: '#app',
      		data: {
        		message: ''
      		}
    	});
  	</script>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章