Vuejs связывание переменных внутри метода с помощью this?

В рассмотренном примере урока 5 (VueJS) не совсем ясно почему мы обращаемся из свойства methods, к свойству data c использованием ключевого слова this. на сколько я знаю в классическом понимании это объекты и переменные родительского объекта (например, класса).

Единственное объяснение, которое я могу предположить, это что все свойства описываемые в классе Vue обращаются к структуре родительского объекта, где есть строго определенные переменные и методы описываемые ключевыми словами, где свойство data - это все переменные, свойство methods содержит все методы.

Если не прав поправьте. Возможно информация будет полезна другим пользователям в дальнейшем. Сергей в видеоуроках пока этот вопрос освятил не достаточно.

Также интересно применение, не анонимных функций в методах с необходимостью определения переменных.

Пример кода

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>VueJS</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message1">
        <!-- <button onclick="cleanMessage()">clean Message</button> -->
        <button v-on:click="cleanMessage">clean Message</button>
        <button v-on:click="reverceMessage">reverce Message</button>
        <h1>{{message}} - {{message1}}</h1>
    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello, FructCode!',
                message1: 'Oh oh oh!'
            },
            methods: {
                cleanMessage: function() {
                    this.message = '';
                },
                reverceMessage: function() {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })

    </script>
</body>
</html>

VueJS

this

methods

Vuejs связывание переменных внутри метода с помощью this?

0 ответов