Vue JS

                                /*
Директивы
v-bind или : // Бандить
v-on или @ // Установка события
v-model // Модель для двухстороннего связавания
v-html // Для вывода готового html кода, не использовать при получение из БД, т.к. не безопасно
*/

/*
События
@click // Клик
@mouseover // При наведение курсора мыши
@mousemove // При движении мыши
@keyup // Нажатие кнопки на клавиатуре
@input // Изменение input
*/


/*
Модификаторы событий
@click.prevent="" // Отменить стандартное поведение ссылки
@mouseover.stop="" // Остановить на этом селекторе (событие stopPropogation)
v-model.lazy // Изменяет модель при убирание фокуса
@keyup.enter.space // Если нажать клавишу Enter и Space, можно сколько угодно добавить кнопок
if (event.keyCode === 13) {} // Так через JS клавиша Enter
*/


/*
Изменять атрибуты
:href="url" // Подставить переменную url
:style="{'background': color, 'height': height + 'px'}" // Подставить переменные color и height
:style="[{'background': color, 'height': height + 'px'}, 'width': height + 'px']" // C помощью массива можно совмещать условия
:class="{'bg-primary': !isActive, 'bg-danger': isActive}" // Класс по-условию, можно использовать вместе с обычным атрибутом class=""
:style="[myClass, {'width': height + 'px'}]" // Можно использовать синтаксис массивов, т.е. в массиве писать стили
*/


/*
Атрибуты Vue для доспута DOM
ref:"name" // Написать внутри тега
this.$refs.name // Обратиться к нему из приложения vue
this.$refs.name.style.color = 'red' // к примеру так поменять цвет
*/

/*
Директивы
v-if="type === 'a'" // if (type === 'a')
v-else-if="type === 'b'" // else if
v-else // else

// Если нужно несколько тегов показывать по условию, то использовать общий тег <template></template>

v-show="true" // Работает как if, только не удаляется сам тег (display: none)
*/


/*
Циклы
v-for="(v, k, i) of values" // of или in
<li v-for="(v, k, i) of url"><em>{{ i + 1 }}.</em> {{ k }} <b>{{ v }}</b></li> // v - значение цикла, k - ключ цикла, i - индекс цикла
<li v-for="num of 10">{{ num }}</li> // цифры от 1 до 10
*/


/*
Команды Vue
this.$destroy() // Удалить приложение Vue
*/


// Можно написать шаблон в тегах <template></template> Важно, тогда помещать всё содержимое в отдельный div!

// Создание глобального компонента (html шаблона), для вызова <my-name  :transferValue="transferValue"></my-name>
Vue.component('my-name', {
    template: `
        <div>
            <p>{{ message }}</p>
        </div>
    `,
    props: ['transferValue'], // Если нужно передать данные в компонент, то передать названия в массиве и тегах указать его же <my-name :transferValue="transferValue"></my-name>
    /*props: { // Если нужно валидировать
        transferValue: {
            type: String,
            required: true
        }
    },*/
    data: function () {
        return {
            message: 'Новое сообщение'
        }
    }
})

// Создание локального компонента (html шаблона), для вызова <my-name :transferValue="transferValue"></my-name>
var myСomponent = {
    template: `
        <div>
            <p>{{ message }}</p>
        </div>
    `,
    props: ['transferValue'], // Если нужно передать данные в компонент, то передать названия в массиве и тегах указать его же <my-name :transferValue="transferValue"></my-name>
    /*props: { // Если нужно валидировать
        transferValue: {
            type: String,
            required: true
        }
    },*/
    data: function () {
        return {
            message: 'Новое сообщение'
        }
    }
}


// Создание объекта Vue
var app = new Vue({
    el: '#app', // app.$mount('#app') Можно удалить el и после этого объекта задать id
    data: {
        title: ''
    },
    components: { // Регистрация локального компонента
        myName: myСomponent // 'my-name' можно записать без кавычек myName
    },
    methods: {
        // В methods вызываются функции всегда и пишутся с ()
        myFunction: function () { // можно передать event
            // Возвращает строку
        }
    },
    computed: {
        // Вычесленое. Функции, которые возвращают и пишутся как переменные, т.е. без (). Важно, они работают только когда вызываются!
        myClass: function () {
            // Возвращает строку
        }
    },
    watch: {
        // Следить за изменением из data переменной title, при её изменении выполниться эта функция
        title: function (v) {
            // v - значение на что изменилось значение
        }
    },

    // Жизненые циклы
    beforeCreate: function () {
        // Перед создание объекта Vue
    },
    created: function () {
        // После создание объекта Vue
    },
    beforeMount: function () {
        // Перед вставкой html
    },
    mounted: function () {
        // После вставки html
    },
    beforeUpdate: function () {
        // Перед изменением чего-либо в html
    },
    updated: function () {
        // После изменением чего-либо в html
    },
    beforeDestroy: function () {
        // Перед удалением элемента
    },
    destroyed: function () {
        // После удалением элемента
    }
});


// Можно разделить объект по файлам
import App from './App.vue'
new Vue({
    el: '#app',
    render: h => h(App) // h => h(App) можно написать так function (h) { return h(App) }
});

// В файле App.vue задать данные
export default {
    data () {
        return {
            //
        }
    },
    /*components: { // Можно зарегистривать компонент локально в файле сделав импорт вверху файла import App from './App.vue'
        appCar: Car
    }*/
}


/*
Animate
<transition
    name="anime" // Название анимации
    type="transition" // Выбрать по какой длительности работать анимации, если указано несколько временных параметров
    :duration="1500" // Задать время появление и исчезновения, не зависимо от css
    :duration="{enter: 1000, leave: 1500}" // Или enter - время появления, leave - время исчезновения
    appear // При этом параметре срабатывает анимация появления по-умолчанию

    enter-active-class="class-name" // Добавить класс при появлении
    leave-active-class="class-name" // Добавить класс при исчезновении

    // Этапы событий анимации, для появления
    @before-enter=""
    @enter=""
    @after-enter=""
    @enter-cancelled=""

    // Для исчезновения
    @before-leave=""
    @leave=""
    @after-leave=""
    @leave-cancelled=""
    // Далее в поле methods описать
>
    <p v-if="show">lorem ipsum</p>
</transition>

<!-- Если несколько элементов для анимации, in-out - сначала появление, out-in - сначала исчезновение -->
<transition name="anime" mode="in-out">
    <p v-if="show" key="name-item1">lorem ipsum</p>
    <p v-else key="name-item2">lorem ipsum</p>
</transition>

Этапы
<style>
    // Появление
    .anime-enter { // Начальное состояние
        opacity: 0;
    }
    .anime-enter-active { // Длительность
        transition: opacity 1s;
    }
    .anime-enter-to {}

    // Исчезновение
    .anime-leave {}
    .anime-leave-active {
        animate: 1s anime-slide forward;
        transition: opacity 2s;
    }
    .anime-leave-to {
        opacity: 0;
    }

    @keyframes anime-slide {
        from {
            transform: translateX(0px);
        }
        to {
            transform: translateX(-100px);
        }
    }
</style>
*/


// Команды JS:
// В коде можно использовать тоже самое $event
// event - параметр из функции
event.target.value // Значение элемента
event.target.style.color // Цвет элемента
event.preventDefault() // Отменить стандартное поведение ссылки
event.clientX // Положение курсора по Х
event.clientY // Положение курсора по Y

str.slice(str.lastIndexOf('.')); // Получить разрешение, например (.jpg)

Object.getOwnPropertyNames(obj); // Получить все значания объекта

document.querySelector('hr') // Найти все теги hr, но лучше использовать атрибут ref
document.getElementById ('app') // Найти #app


// Связавание разных приложений Vue
app.title = '' // Обратиться к другому приложению Vue (app), к переменной title
app.func() = '' // Обратиться к другому приложению Vue (app) и вызвать функцию
Список