<!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>
<script>
function Vue(options) {
let me = this;
this.#el = options.el // 挂载的dom
void (function _setData() { // 私有方法:设置实例data
if (Object.keys(options.data()).length < 1) return;
Object.keys(options.data()).forEach((x) => {
me[x] = options.data()[x];
});
})();
void (function _setMethods() { // 私有方法:设置实例metods
Object.keys(options.methods).forEach((x) => {
me[x] = options.methods[x].bind(me);
});
})();
options.created.call(this); 绑定当前作用域
options.mounted.call(this); 绑定当前作用域
}
Vue.prototype.$setData = function (key, val) { // 原型链中设置function
this[key] = val;
};
let options = {
el: "#divBody",
data() {
return {
c: 3,
};
},
created() {
this.$setData("a", 1);
this.getData();
},
mounted() {
this.$setData("b", { b: this.a + 1 });
},
methods: {
getData() {
console.log(this);
},
},
};
let VueChildren = new Vue(options); // 组件实例
</script>
</html>
简易Vue挂载组件实例,记录一下
最新推荐文章于 2024-06-25 09:04:20 发布