vue双向绑定原理分析(二)—事件绑定

接上回：vue双向绑定原理分析(一)—模板解析编译
现在在button标签内添加@click事件：

<button @click="handleClick">点击事件</button>

在methods中：

handleClick(){
    alert('点击事件触发了')
},

主要是vue.js代码：

class Vue{
    constructor(options) {
        this.$el = document.querySelector(options.el) //获取el元素
        this.$options=options
        this.compile(this.$el) 
    }
    compile(node) {
        //对节点进行循环遍历
        node.childNodes.forEach((item) => {
            /**
             * nodeType：可以获取到节点的类型，可以通过数字判断你这个节点到底是哪种类型的节点
             * 元素节点：1
             * 属性节点：2
             * 文本节点：3
             * 注释节点：8
             */
            if (item.nodeType === 1) { 
                if (item.hasAttribute("@click")) {
                    let vmKey = item.getAttribute("@click")
                    vmKey = vmKey.trim()
                    item.addEventListener('click', () => {
                        this.$options.methods[vmKey]()
                    })
                }
            }
        })
    }
}