如何使用 vue 监听 html 标签的 onload 事件？ [复制]答案

【问题标题】：How listen for onload event for html tag with vue? [duplicate]如何使用 vue 监听 html 标签的 onload 事件？ [复制]
【发布时间】：2019-11-02 23:24:55
【问题描述】：

考虑一个代码：

<template >
    <div ref="messages" >
        <div v-for="message in thread" v-on:load="myLoad">
        <p class="chat-time">{{ message.message }}</p>
    </div>
</template>

<script>
    export default {
        name: 'MyName',
        methods : {
            myLoad() {
                console.log(`run`)
            }
        }
    };
</script>

这不起作用。但是当我将v-on:load 更改为v-on:click 并开始单击时，我可以看到run iun 控制台。

为什么v-on:load 不起作用？

重要

问题是关于使用 vue 处理 html 标记的 load 事件。所以添加created() 或将v-on:load 放到<template> 不是解决方案。

【问题讨论】：

简单来说，div 标签没有load 事件。我猜你可以手动触发一个
或者您可以在有问题的div 元素之后立即添加一个script 元素——根据我的所有经验，script 元素之前的元素将被解析和加载（不一定是它们的替换了图像、样式表、视频材料等内容），以便您可以将它们作为文档的一部分进行访问。因此，脚本元素充当文档中任何先前节点的“已加载”事件的临时回调。综上所述，如果这与符合标准的行为相矛盾，我会很高兴地得到纠正——我还没有看过关于合规行为的 W3C/WHATWG 出版物。
@amn 有趣的方法，您是否将其作为答案发布在某处（如果尚不存在）？
@Kaddath 不，我没有，因为我对 Vue.js 了解不多，而且我认为使用该框架的主要目的是让您不必解决那种问题中概述的问题——换句话说，要么存在一种惯用的 Vue 方法来解决问题中的问题，要么没有，但我不知道。因此是评论，而不是答案。另外，我的评论实际上并没有回答这个问题，它只是详细说明了访问文档中节点的方法。在所有方面，这可以说是XY problem 的一个案例。

标签： javascript html vuejs2 vue-component

【解决方案1】：

您可以创建一个 Vue 组件并使用组件实例生命周期挂钩，例如 created

Vue.component('custom-comp', {
    props:['prop1','prop2'],
    template: '<div></div>',
    created: function () {
        alert('{{prop1}} created.');
    },
    methods: {}
});

【讨论】：