vue操作dom(以实现一个加法器为例子)

最新推荐文章于 2023-04-12 15:58:38 发布

Selenium399

最新推荐文章于 2023-04-12 15:58:38 发布

阅读量371

点赞数

分类专栏： vue 文章标签： vue vue操作dom节点 dom

本文链接：https://blog.csdn.net/qq_45453266/article/details/102104816

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

话不多说,先上效果与完整代码:

效果:

有两个数字,点击其中任意一个加一,第三个数字是前两个数字的和.
在这里插入图片描述
完整代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计数器</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <counter ref="one" @change="changeHandler"></counter>
        <counter ref="two" @change="changeHandler"></counter>
        <div>{{sum}}</div>
    </div>
    <script>
        Vue.component('counter', {
            data: function () {
                return {
                    number: 0,
                };
            },
            template: "<div @click='clickHandler'>{{number}}</div>",
            methods: {
                clickHandler() {
                    this.number++;
                    this.$emit('change');
                }
            }
        });

        var app = new Vue({
            el: "#app",
            data: {
                sum: 0,
            },
            methods: {
                changeHandler: function () {
                    this.sum = this.$refs.one.number + this.$refs.two.number;
                }
            }
        });
    </script>
</body>

</html>

一.构建计数器组件

 Vue.component('counter', {
            data: function () {
                return {
                    number: 0,
                };
            },
            template: "<div @click='clickHandler'>{{number}}</div>",
            methods: {
                clickHandler() {
                    this.number++;
                    this.$emit('change');
                }
            }
        });

我们的这段代码就要就是点击数字后加1,并且发送change事件通知给父组件.

这里要注意:

在子组件中的data不能跟父组件中直接是键值对的形式,data对应的是个函数.
还有一点,虽然这里没用到(如果用父子组件传值的方式要用到),但是要记住,当父组件给子组件传值后,不要直接在子组件中改变它,因为可能其它的子组件也可能会用到这个值.正确的做法应该是在子组件中创建一个本地的变量,并把父组件传递的值赋给它(简单的来说就是在子组件中创建父组件传递来的值的副本)
举例:父组件传递一个value,子组件不要直接改变这个value,而是要创建变量number=value,然后去改变这个number的值

 Vue.component('counter', {
            props:['value'],
            data: function () {
                return {
                    number: this.value,
                };
            },
            template: "<div @click='clickHandler'>{{number}}</div>",
            methods: {
                clickHandler() {
                    this.number++;
                    this.$emit('change',this.number);
                }
            }
        });

二.父组件中接受到子组件发送的事件,计算和

首先父组件中定义一个sum,用来存储和.(与子组件不同,父组件的data可以直接是键值对的形式)
@change="changeHandler" .父组件监听子组件发送的change事件,并进入changeHandler方法.
我们怎么拿到前面两个子组件中的number值呢???这就是本篇博客的重点了!!!
⭐️vue如何操作dom???⭐️
⭐️使用ref关键字⭐️

1.首先我们在两个子组件上指定不同的ref进行区分
<counter ref="one" @change="changeHandler"></counter>
<counter ref="two" @change="changeHandler"></counter>

2.通过this.$refs.你指定的ref名字来获取到dom节点
this.sum = this.$refs.one.number + this.$refs.two.number;