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%内容,订阅专栏后可继续查看/也可单篇购买

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

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

全部评论

相关推荐

牛客928043833号:在他心里你已经是他的员工了
点赞 评论 收藏
分享
06-17 00:26
门头沟学院 Java
程序员小白条:建议换下项目,智能 AI 旅游推荐平台:https://github.com/luoye6/vue3_tourism_frontend 智能 AI 校园二手交易平台:https://github.com/luoye6/vue3_trade_frontend GPT 智能图书馆:https://github.com/luoye6/Vue_BookManageSystem 选项目要选自己能掌握的,然后最好能自己拓展的,分布式这种尽量别去写,不然你只能背八股文了,另外实习的话要多投,尤其是学历不利的情况下,多找几段实习,最好公司title大一点的
点赞 评论 收藏
分享
评论
1
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务