V-model 기본 원리(important)
2410 단어 vue
Document
const xgx = new Xgx({
el: '#app',
data: {
msg: 'haha',
eve: ' '
},
methods: {
handle() {
this.eve = ' '
}
}
})
function Xgx(option) {
this.el = option.el;
this.tmp = document.querySelector(this.el);
for(let key in option.methods) {
this[key] = option.methods[key]
}
for (let key in option.data) {
Object.defineProperty(this, key, {
get() {
return option.data[key]
},
set(val) {
for(let i = 0; i < this.tmp.children.length; i++) {
if(key == this.tmp.children[i].getAttribute('x-text')) {
console.log(this.tmp.children[i]);
this.tmp.children[i].innerText = val;
}
}
option.data[key] = val;
}
})
}
for(let i = 0; i < this.tmp.children.length; i++) {
if(this.tmp.children[i].getAttribute('x-text')) {
const key = this.tmp.children[i].getAttribute('x-text')
this.tmp.children[i].innerText = this[key];
}
if(this.tmp.children[i].getAttribute('@click')) {
this.tmp.children[i].onclick = this.handle.bind(this);
}
}
}
// =function(){ }
// ， ---》
const obj = {};
Object.defineProperty(obj, 'abc', {
//val abc ，
set(val) {
// ，
console.log(this['abc']);
console.log(' ');
},
get() {
//
return 'ls'
}
})
console.log(obj);
//
var vm = new Vue({
el: '#app',
// vue ， data ，Object.defineProperty created(){} mounted() {}
data: {
msg: 'ls',
obj: {
name: 'ls'
}
},
methods: {
hand() {
// this.obj.age = 20;
this.$set(this.obj, 'age', 20)
}
}
// methods obj
});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
