目录
self
简单讲解
1. 视图影响数据
<body>
<!-- 视图 -->
<input type="text" id="ipt">
<script>
// 数据
var store = {
info: ''
}
var ipt = document.querySelector('#ipt')
ipt.addEventListener('keyup', function(e) {
// console.log(888);
// console.log(e.target.value)
store.info = e.target.value
})
</script>
</body>
2. 数据影响视图
<body>
<!-- 视图 -->
<input type="text" id="ipt">
<script>
// 数据
var store = {
info: ''
}
var ipt = document.querySelector("#ipt")
Object.defineProperty(store, "info", {
set: function(newv) {
// console.log(777)
console.log(newv)
ipt.value = newv
}
})
</script>
</body>
3. 视图数据双向影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 视图 -->
<input type="text" id="ipt" />
<!-- <span id="content"></span> -->
<script>
/** ** 数据 ****/
var store = {
info: ''
}
var temp
var ipt = document.querySelector('#ipt')
var content = document.querySelector('#content')
ipt.addEventListener('keyup', function(e) {
console.log('"触发键盘事件"----', '触发键盘事件')
store.info = e.target.value
// content.innerText = 'input中数据:' + store.info
})
Object.defineProperty(store, 'info', {
/**** set 方法 该属性值发生改变就会触发 ****/
set: function(newv) {
console.log('set方法调用------', 'set方法调用')
console.log('set方法中 newv ------', newv)
ipt.value = newv
// store.info = newv
temp = newv
},
/**** get 方法 用该属性的时候触发 ****/
get: function() {
console.log('get方法调用------', 'get方法调用')
// getter 要有 return
return temp
}
})
</script>
</body>
</html>
页面展示
百度
<!DOCTYPE html>
<html>
<head>
<title>Vue.js 双向绑定示例</title>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="编辑我" />
<p>输入的消息是: {{ message }}</p>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: ''
}
})
// 使用Object.defineProperty实现响应式
let data = {}
Object.defineProperty(data, 'message', {
get() {
return vm.message
},
set(newValue) {
vm.message = newValue
}
})
// 当输入框的值变化时,data.message也会更新
// 当data.message更新时,Vue的响应式系统会更新视图
</script>
</body>
</html>