VUE:vue源码--添加事件(*****五颗星)
注意:
添加事件永远是给元素节点加的。
EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window,也可以是任何支持事件的对象(比如 XMLHttpRequest)。
addEventListener(type, listener);type:表示监听事件类型的大小写敏感的字符串。listener:当所监听的事件类型触发时,会接收到一个事件通知(实现了 Event 接口的对象)对象。listener 必须是一个实现了 EventListener 接口的对象,或者是一个函数。
1.vue源码--添加事件
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手写vue添加事件</title> </head> <body> <div id="app"> <h1>{{ str }} <span>啦啦啦</span></h1> {{str}} <p>{{a}}</p> <button @click="btn">按钮</button> </div> <script type="text/javascript" src="newvue.js"></script> <!-- <script type="text/javascript" src="vue.js"></script> --> <script type="text/javascript"> new Vue({ el: '#app', data: { str: '小明', a: "louie" }, beforeCreate() { console.log('beforeCreate', this.$el, this.$data) }, created() { console.log('created', this.$el, this.$data) }, beforeMount() { console.log('beforeMount', this.$el, this.$data) },
剩余60%内容,订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理