Vue2源码解析-添加事件

最新推荐文章于 2024-09-30 00:39:15 发布

梅山老幺

最新推荐文章于 2024-09-30 00:39:15 发布

阅读量169

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_63443072/article/details/139306827

两个文件，一个html文件，一个js文件。

<body>
    <div id="app">
        <button @click="handlePrint">打印</button>
    </div>
</body>
<script src="./Vue.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            handlePrint() {
                console.log("我的发")
            }
        }
    })
</script>

class Vue {
    constructor(options) {
        this.$options = options;
        this.$el = document.querySelector(options.el);
        // 编译模板
        this.compile(this.$el);
    }

    compile(node) {
        node.childNodes.forEach((item, index) => {
            // 判断节点类型
            // 1===元素节点
            if (item.nodeType === 1) {
                if (item.hasAttribute("@click")) {
                    let vmKey = item.getAttribute("@click").trim();
                    item.addEventListener('click', (event) => {