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%内容，订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现（可直接运行）以及底层原理
投递完美世界等公司9个岗位 >
华为成长空间 526人发布