Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Hello Vue</title>
    <meta charset="utf-8">
    <!-- https://unpkg.com/vue@2.6.11/dist/vue.min.js -->
    <!-- подключение фреймворка vue.js -->
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<!-- элемент div c идентификатором app -->
<div id="app">
        <p> {{name}}</p>
        <!-- v-once для отображения значения из модели только один раз-->
        <p v-once> {{name}} </p>
        <div> {{age}}</div>

        <div> {{age + age}}</div>
        <!-- v-on - для обработки событий  -->
        <input type="button" value="TEST" v-on:click="test">
        <input type="button" value="TEST2" @click="test">

        <input type="button" value="DESTROY" @click="doDestroy">

        <div id="res">RESULT</div>
</div>
</body>
<script type="text/javascript">
    // создаем объект Vue (экземпляр Vue)
    vm = new Vue({
        el: "#app",
        data: {
            name: "HELLO VUE",
            age: 25
        },
        methods: {
            test: function(event){
                console.log('test invoked!!!')
                // используем this для того чтобы обратиться к определенному св-ву по имени
                this.name = 'NEW NAME';
                this.age = 20;
            },
            doDestroy: function(){
                console.log('doDestroy')
                this.$destroy(true);
            }
        },
        // методы жизненного цикла
        beforeCreate: function() {
            console.log('beforeCreate fired');
            //alert('beforeCreate fired');
            console.log(this.name);
        },
        created: function() {
            console.log('created fired');
            console.log(this.name);
            // выполняем инициализцию состония объекта (заполняем модель данными)
            this.name = 'NEW VALUE (SET IN CREATED)';
            // обращаемся к узлу DOM
            console.log('DOM NODE:' + this.$el);
        },
        beforeMount: function() {
            console.log('beforeMount fired');
        },
        mounted: function() {
            console.info('mounted fired');
            // обращаемся к узлу DOM
            console.log('MOUNTED DOM NODE:' + this.$el);
            var node1 = this.$el;
            console.log('RES NODE:');
            console.log(node1.querySelector('#res'));
            // работа с DOM - изменяем контент для div с id=res
            node1.querySelector('#res').innerText = 'NEW RESULT';

            //this.test();
        },
        beforeUpdate: function() {
            console.log('beforeUpdate fired');
        },
        updated: function() {
            console.log('updated fired');
        },
        beforeDestroy: function() {
            console.log('beforeDestroy fired');
            console.log(this.name);
        },
        destroyed: function() {
            console.log('destroyed fired');
            console.log(this.name);
        }
    })
</script>
</html>