feat: support dom event listener

README.md

@@ -29,6 +29,12 @@
 
 4. [html原生元素渲染](https://github.com/zzz945/write-vue3-from-scratch/commit/89df7464fec10653b2e12e4cb42756d71312a5dd)
 
+5. [支持method]
+
+6. [支持lifecycle]
+
+7. [事件监听]
+
 5. Component vnode render (TODO)
 
 6. Handle dom event (TODO)

src/index.js

@@ -37,6 +37,12 @@ class Vue {
       el.setAttribute(key, vnode.data[key]);
     }
 
+    // set dom eventlistener
+    const events = (vnode.data || {}).on || {}
+    for (let key in events) {
+      el.addEventListener(key, events[key])
+    }
+
     if (typeof vnode.children === 'string') {
       el.textContent = vnode.children
     } else {
@@ -50,7 +56,7 @@ class Vue {
     }
 
     return el
-  } 
+  }
   initDataProxy () {
     const data = this.$options.data ? this.$options.data() : {}
 

test/event-listen.spec.js

@@ -0,0 +1,22 @@
+import Vue from "../src/index.js";
+
+describe('Event test', function() {
+  it('Basic', function() {
+    var cb = jasmine.createSpy('cb');
+
+  	var vm = new Vue({
+      render (h) {
+        return h('button', { 
+          class: 'btn',
+          on: { 'click': cb }
+        }, [])
+      },
+    }).$mount()
+
+    document.body.appendChild(vm.$el)
+    const btn = document.querySelector('.btn')
+    expect(btn.tagName).toEqual('BUTTON')
+    btn.click()
+    expect(cb).toHaveBeenCalled()
+  });
+});