Vue.Js Framework

https://vuejs.org/

https://ru.vuejs.org/v2/guide/

https://ru.vuejs.org/v2/api/

В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications)

Документация

Документация

API (rus)

Объект VueJs

Vue.use({ install: function(Vue, options) { Vue.mixin({ }); }, { createComputed: true }); var app = new Vue({ // Используется в раннем связывании el: '#app', name: 'nameApp', // props: [ ], // data() { }, // methods: { }, // computed: { }, // watch: { }, // components: { }, // Событие перед созданием компонента beforeCreate() { }, // Событие после создания компонента created() { }, // beforeMount() { }, });

Глобальная конфигурация

Vue.config - это объект, содержащий глобальные конфигурации Vue. Вы можете изменить свои свойства, перечисленные ниже, перед загрузкой приложения:

Vue.config.silent = true

Vue.config.devtools = true

Vue.config.errorHandler = function (err, vm, info) { }

Vue.config.warnHandler = function (msg, vm, trace) { }

Vue.config.ignoredElements = [
/^ion-/,
'another-web-component' ]

Vue.config.keyCodes = {}

Конструкции html (атрибуты)

v-bind, : - Связывает HTML атрибут с переменными или методом (:href, :src), также можно применять java-script выражения

v-on, @ - Методы (click, change, blur, etc) или в нативной декларации (onClick, onChange, onBlur)

click.modifiers

v-model - Связывает входной параметр value и событие input (двусторонняя привязка)

v-for - Конструкциия for для массива или для массива возвращенного методом

<div :v-for="method in methods"></div>

v-if - Конструкция if значение переменной или переменая возращаемоя методом (скрывает или показывает тэг)

v-html - Вывод HTML

v-show -

:is - наименование компонента, если по какой-либо причине нельзя испозовать тег в качестве названия компонента

<div :is="com1"><div> <!-- или --> <com-1></com-1>

Свойства объекта

data: {}

methods: {}

computed: {} - Отслеживает переменные внутри методов декларированных в computed (возвращает значение)

props: [] - Аналогично объявлению входящих в функцию параметрах

wath: {} - Отслеживает изменение именованных как метод переменных

template: "" -

model: {}

components: {} - Список копонентов

filters: {} - Применяются для обработке в выводе

directives: {} - Методы представляют из себя директивы v-todo-focus, имена методов указываются без v-

Пример

<input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">

mountend: {} -

Методы объекта

this.$emit() - Вызов метода дочернего компанента

this.$el - виртуальный дом

this.$mount(selector) - При этом необходимо из app удалить указание елемента el

this.$refs - Ссылки на реальный дом елементы

<element-name ref="">

this.$resource - Сторонний модуль vue-resource (не входит в vuejs)

this.$slots - Позмоляет передавать HTML, в качестве строки (В шаблоне необходимо использовать тэг <slot>, так - же он может быть именован <slot name="myslot">)

События

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

activated

deactivated

errorCaptured

Хуки

created - Компанент собран, но не помещен в дом

Расширения / Компоненты / Процессоры

Вопрос / Ответ

Компоненты

Препроцессоры

Frameworks

Ссылки

Документация

API

examples

Исходник

https://habr.com/hub/vuejs/

Компоненты для vuejs

UI + Vue (UI Bootstrap итд)

Новости

Twitter

Список удивительных вещей, связанных с Vue.js

https://github.com/vuejs/awesome-vue

Vue.js для сомневающихся. Все, что нужно знать

Vue.js и как его понять

Как написать одностраничное приложение (SPA) с использованием Vue.js

Хуки жизненного цикла Vue.js

https://habr.com/post/351882

https://habr.com/post/329452

https://habr.com/post/350232

Пишем компонент — таблицу, не совсем обычным способом

5 приемов в помощь разработке на vue.js + vuex

Создание викторины на Vue.js

https://habr.com/company/mailru/blog/350962/

https://habr.com/post/350750/

https://habr.com/post/350292/

https://habr.com/post/345814/

https://habr.com/company/ruvds/blog/345488/

https://habr.com/post/341798/

https://habr.com/post/336352/

Обучение / Трюки / Статьи

https://github.com/sdras/intro-to-vue

https://css-tricks.com/tag/vue/

https://habr.com/company/ruvds/blog/414073/

https://habr.com/company/ruvds/blog/413311/

https://habr.com/post/358766/

https://mkdev.me/posts/napisanie-pervyh-testov

Видео

RU

Vue.js с нуля (Точка.dev)

Learn Vue.js (Learn Programming Together)

Vue.js для начинающих (Гоша Дударь)

Vue.js. Введение (Ausite Blog)

Vue.js (Дмитрий Лаврик)

Vue.js (Learn Programming Together)

https://www.youtube.com/watch?time_continue=560&v=h9NQs0SEVoA

Vue JS 2 (Yauhen Kavalchuk)

VueJS.fun Разворачиваем проект Pepelats

Фреймворк VUE JS (WebForMySelf)

Vue js уроки (Web Developer Blog)

VueJS API

En

Vue JS 2 Tutorial

Vue.js & Firestore App

Apprendre VueJS