字符串拼接问题

来源：2-8 简单的组件间传值

慕虎5515243

2020-12-03

<body>
<div id="app">
    <p>总数:{{total}}</p>
    <my-component @increase="handleGetTotal"
		          @reduce="handleGetTotal">
    </my-component>
</div>
<script src="./js/vue.js"></script>
<script>
    Vue.component('my-component', {
        template: ' <div>' +
            '<button @click="handleIncrease">+1</button> ' +
            '<button @click="handleReduce">-1</button> ' +
            '</div>',
        data: function () {
            return {
                counter: 0
            }
        },
        methods: {
            handleIncrease: function () {
                this.counter++;
                this.$emit('increase', this.counter);
            },
            handleReduce: function () {
                this.counter--;
                this.$emit('reduce', this.counter)
            }
        },
    })
    let app = new Vue({
        el: "#app",
        data: {
            total: 0
        },
        methods: {
            handleGetTotal: function (total) {
                this.total = total
            }
        }
    })
</script>
</body>

template:  `<div>
                        <button @click="handleIncrease">+1</button>
                         <button @click="handleReduce">-1</button>
                    </div>`,

template:  '<div>\
                        <button @click="handleIncrease">+1</button>\
                         <button @click="handleReduce">-1</button>\
                    </div>',

老师除了我列出的源代码那里的那种字符串拼接方式之外，我又列除了两种字符串拼接方式。最后一种的转义方式我不太了解，它转义了什么，后面什么都不跟的话是，后面什么都不跟的话是，转义？

写回答

1回答