今日实现数据劫持-绑定数据显示
// 语法 dataset 也可以取自定义属性值,但是标签绑定固定语法 data-自定义名="值",取出标签元素.dataset.自定义名,返回自定义属性值
getAttribute和hasAttribute-----记录(使用较少)
// 语法getAttribute,返回自定义属性值
元素.hasAttribute('自定义属性名'),返回自定义属性值
// 语法hasAttribute,返回布尔值,
元素.hasAttribute('自定义属性'),判断元素是是否存在此自定义属性名
<body>
<div id="app">
<h1 v-html="name"></h1>
<input v-model="name" type="text">
<h2 v-html="name" data-html="name"></h2>
</div>
<script>
function MVVM(options) {
const { el, data } = options
console.log(el);
console.log(data);
for (let key in data) {
console.log(key);
Object.defineProperty(this, key, {
get: function () {
return data[key]
},
set: function (newVal) {
console.log(newVal, '修改了值');
// 修改值和原先值不同才会触发
if (data.name !== newVal) {
data.name = newVal
}
}
})
}
// 显示数据//挂载的节点,下的所有元素---得到伪数组
const domArr = document.querySelector(el).children
// 转换为真数组
console.log(Array.from(domArr),'转换');
Array.from(domArr).forEach(domNode =>{
console.log(domNode);
console.log(domNode.dataset.html,'dataset取自定义属性值');
// console.log(domNode.hasAttribute('v-html'));
if(domNode.hasAttribute('v-html')){
console.log(domNode.getAttribute('v-html'));
const key = domNode.getAttribute('v-html')
domNode.innerHTML = this[key]//this指向实例化对象
}
if(domNode.hasAttribute('v-model')){
// console.log(domNode.getAttribute('v-html'));
const key = domNode.getAttribute('v-model')
domNode.value = this[key]//this指向实例化对象
}
})
}
// 语法 dataset 也可以取自定义属性值,但是标签绑定固定语法 data-自定义名="值",取出标签元素.dataset.自定义名,返回自定义属性值
// 语法getAttribute,返回自定义属性值,元素.hasAttribute('自定义属性名'),返回自定义属性值
// 语法hasAttribute,返回布尔值,元素.hasAttribute('自定义属性'),判断节点是是否存在此自定义属性
const vm = new MVVM({
el: '#app',
data: {
name: "张三"
},
})
console.dir(vm)
</script>
</body>
搭建一个基本结构,并使用Object.defineProperty的get 和set 拦截数据,在set里判断新值和旧值是否相同
获取挂载元素下的所有子元素,得到伪数组-使用Array.from转换为真数组,使用遍历拿到每个dom元素
hasAttribute判断元素知否有自定义属性v-html
进行数据的回填
加入一个input输入框绑定v-model-后面想实现双向绑定 --先进行数据的回填
方法相同
------今天先写到这里了-后面实现v-model的双向绑定,并更改数据视图变化