Vue.js單向繫結和雙向繫結例項
阿新 • • 發佈：2018-11-22
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: '' }//歡迎加入全棧開發交流圈一起學習交流：864305860 });//幫助突破技術瓶頸，提升思維能力 </script> </body> </html>
2、雙向繫結
資料的雙向繫結是vue實現的一大功能。
使用v-model指令，實現檢視和資料的雙向繫結。
所謂雙向繫結，指的是vue例項中的data與其渲染的DOM元素的內容保持一致，無論誰被改變，另一方會相應的更新為相同的資料。這是通過設定屬性訪問器實現的。
- v-model主要用在表單的input輸入框，完成檢視和資料的雙向繫結。
- v-model只能用在、、這些表單元素上。
雙向繫結的缺點：不知道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: '' }//歡迎加入全棧開發交流圈一起學習交流：864305860 });//幫助突破技術瓶頸，提升思維能力 </script> </body> </html>
結語
感謝您的觀看，如有不足之處，歡迎批評指正。
本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。