vue實現簡單的雙向綁定的原理 ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue雙向綁定的原理測試</title> </head> <body> 手寫一個簡單雙向綁定<br /> <input type="text" id="model"><br /> <div id="modelText"></div> <script> /* * @Author: 曾經的水哥 https://www.cnblogs.com/cengjingdeshuige/ * @Date: 2018-09-25 15:14:59 * @Last Modified by: mikey.zhaopeng * @Last Modified time: 2018-09-25 15:15:50 */ var user = {}; var defaultName = '2222222222ssas' var model = document.querySelector("#model") var modelText = document.querySelector("#modelText"); model.value = defaultName modelText.textContent = defaultName // 定義屬性 監控改變 Object.defineProperty(user, 'name', { get: function () { console.log('獲取值') return defaultName }, set: function (newValue) { console.log('設置新的值') defaultName = newValue model.value = newValue modelText.textContent = newValue } }) model.addEventListener('keyup', function () { user.name = this.value console.log('取值') }, false) // 獲取值 console.log(user.name) </script> </body> </html>
