VUE:vue源码--添加事件(*****五颗星)

注意:

添加事件永远是给元素节点加的。

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。事件目标可以是一个文档上的元素 ElementDocument 和 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%内容,订阅专栏后可继续查看/也可单篇购买

前端面试题 文章被收录于专栏

前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理

全部评论

相关推荐

joe2333:怀念以前大家拿华为当保底的日子
点赞 评论 收藏
分享
1 收藏 评论
分享
牛客网
牛客企业服务