vue import 和监听事件

转载于 2022-06-16 22:23:20 发布 · 306 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/hope93/article/details/100043311?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-100043311-blog-119008050.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.no

文章标签：

#vue.js #javascript #前端

02.vue 学习教程专栏收录该内容

41 篇文章

订阅专栏

本文探讨了Vue.js中的事件监听，通过一个简单的`select`事件监听示例展示了如何在模板中绑定事件处理函数。同时，文章介绍了Vue的响应式系统，特别是`watch`对象的使用，用于监听数据变化。在`watch`中，作者展示了如何监听`$route`变化并进行了深度观察。此外，还提及了简单实现和性能测试的可能性，但未提供具体实现和测试细节。

Survive by day and develop by night.
talk is cheap, show me the code,make a better result.

<template>
    <div @click="stringClick">{{msg}}</div>
</template>

<script>
export default {
    name: "jianting",
    data() {
        return {
            msg: "1223"
        };
    },
    watch: {
        msg: function(newVal, oldVal) {
            // TO DO
            console.log("newVal:", newVal);
            console.log("oldVal:", oldVal);
        }
    },
    methods: {
        stringClick() {
            this.msg = Math.random() * 100;
        }
    }
};
</script>

  watch: {
        $route: {
            handler: function(val, oldVal) {
                console.log(val);
            },
            // 深度观察监听
            deep: true,
            immediate: true
        }
    }