Показать страницуИстория страницыСсылки сюдаCopy this pageExport to MarkdownODT преобразованиеНаверх Вы загрузили старую версию документа! Сохранив её, вы создадите новую текущую версию с этим содержимым. Медиафайлы{{tag>js javascript framework}} ====== 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) {{:js:vuejs:lifecycle.png?600|}} ===== Документация ===== * [[https://ru.vuejs.org/v2/guide/installation.html|Документация]] * [[https://ru.vuejs.org/v2/api|API]] (rus) ==== Объект VueJs ==== <code javascript> 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() { }, }); </code> {{:js:vuejs:88a1d3abe413490f90414d2d43cfd13e.png?600|}} === Глобальная конфигурация === Vue.config - это объект, содержащий глобальные конфигурации Vue. Вы можете изменить свои свойства, перечисленные ниже, перед загрузкой приложения: * Vue.config.silent = true * Vue.config.devtools = true * Vue.config.errorHandler = function (err, vm, info) { <text>...</text> } * Vue.config.warnHandler = function (msg, vm, trace) { <text>...</text> } * 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.[[https://ru.vuejs.org/v2/guide/events.html#%D0%9C%D0%BE%D0%B4%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80%D1%8B-%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9|modifiers]] * v-model - Связывает входной параметр value и событие input (двусторонняя привязка) * v-for - Конструкциия for для массива или для массива возвращенного методом <code html><div :v-for="method in methods"></div></code> * v-if - Конструкция if значение переменной или переменая возращаемоя методом (скрывает или показывает тэг) * v-html - Вывод HTML * v-show - * :is - наименование компонента, если по какой-либо причине нельзя испозовать тег в качестве названия компонента <code html> <div :is="com1"><div> <!-- или --> <com-1></com-1> </code> === Свойства объекта === * data: {} * methods: {} * computed: {} - Отслеживает переменные внутри методов декларированных в computed (возвращает значение) * props: [] - Аналогично объявлению входящих в функцию параметрах * wath: {} - Отслеживает изменение именованных как метод переменных * template: "" - * model: {} * components: {} - Список копонентов * filters: {} - Применяются для обработке в выводе <text>{{ | filterName}}</text> * directives: {} - Методы представляют из себя директивы v-todo-focus, имена методов указываются без v- * Пример <code html><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)"></code> * mountend: {} - === Методы объекта === * this.$emit() - Вызов метода дочернего компанента * this.$el - виртуальный дом * this.$mount(selector) - При этом необходимо из app удалить указание елемента el * this.$refs - Ссылки на реальный дом елементы * <code html><element-name ref=""></code> * this.$resource - Сторонний модуль [[develop:java-script:vuejs#http_clients_like_get_post|vue-resource]] (не входит в vuejs) * this.$slots - Позмоляет передавать HTML, в качестве строки (В шаблоне необходимо использовать тэг <slot>, так - же он может быть именован <slot name="myslot">) === События === * beforeCreate * created * beforeMount * mounted * beforeUpdate * updated * beforeDestroy * destroyed * activated * deactivated * errorCaptured === Хуки === * created - Компанент собран, но не помещен в дом ===== Расширения / Компоненты / Процессоры ===== * [[js:vuejs:faq]] * [[js:vuejs:components]] * [[js:vuejs:processors]] * [[js:vuejs:frameworks]] ===== Ссылки ===== * [[https://ru.vuejs.org/v2/guide/|Документация]] * [[https://ru.vuejs.org/v2/api/|API]] * [[https://ru.vuejs.org/v2/examples/|examples]] * [[https://github.com/vuejs/vue|Исходник]] * https://habr.com/hub/vuejs/ * [[js:vuejs:plugins]] :!: * [[js:vuejs:bootstrap]] :!: * [[https://www.getrevue.co/profile/vuenewsletter|Новости]] * [[https://twitter.com/VueJsNu|Twitter]] * [[https://github.com/vuejs/awesome-vue|Список удивительных вещей, связанных с Vue.js]] * https://github.com/vuejs/awesome-vue * [[https://habr.com/post/329452|Vue.js для сомневающихся. Все, что нужно знать]] * [[https://habr.com/post/351882|Vue.js и как его понять]] * [[https://habr.com/post/350750/|Как написать одностраничное приложение (SPA) с использованием Vue.js]] * [[https://habr.com/company/mailru/blog/350962/|Хуки жизненного цикла Vue.js]] * https://habr.com/post/351882 * https://habr.com/post/329452 * https://habr.com/post/350232 * [[https://habr.com/post/350292|Пишем компонент — таблицу, не совсем обычным способом]] * [[https://habr.com/post/332628|5 приемов в помощь разработке на vue.js + vuex]] * [[https://habr.com/post/336328|Создание викторины на 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/ ===== Видео ===== ==== RU ==== * [[https://www.youtube.com/watch?v=k3yRfEw1pYk&list=PL5r0NkdgM0UOxb4Hl81FV5UIgexwTf8h7|Vue.js с нуля]] (Точка.dev) * [[https://www.youtube.com/watch?v=b7r6JlLvF0Q&list=PLu_62Q68DvTrWAR_3-iOfIdbqKU912i3z|Learn Vue.js]] (Learn Programming Together) * [[https://www.youtube.com/watch?v=NtlVno8igVQ&list=PL0lO_mIqDDFVVNsIt02JBIdBkjNVHIoum|Vue.js для начинающих]] (Гоша Дударь) * [[https://www.youtube.com/watch?v=O9p4dRBRSXE&list=PLEyOhcqU3T9VL6wathF8CoHnHGvUAdzq6|Vue.js. Введение]] (Ausite Blog) * [[https://www.youtube.com/watch?v=LGyihQvDEw4&list=PLyeqauxei6jd4mL4E9860HnO5GYayooR-|Vue.js]] (Дмитрий Лаврик) * [[https://www.youtube.com/watch?v=Zwiu5yBU_Gk&list=PLu_62Q68DvTrWAR_3-iOfIdbqKU912i3z|Vue.js]] (Learn Programming Together) :!: * https://www.youtube.com/watch?time_continue=560&v=h9NQs0SEVoA * [[https://www.youtube.com/watch?v=PCOP3uC_VwY&list=PLNkWIWHIRwMH7ahn9uvvc5PG3o1tLscgB|Vue JS 2]] (Yauhen Kavalchuk) * [[https://www.youtube.com/watch?v=3TurSb_ETxQ&list=PLYfFMdgVk4_y-_vpH32TtFDefaO5j8jnB|VueJS.fun Разворачиваем проект Pepelats]] * [[https://www.youtube.com/watch?v=qHBSc_LuHnU&list=PLD-piGJ3Dtl0C2gVy-_vZoxYRFWRwUvWL|Фреймворк VUE JS]] (WebForMySelf) * [[https://www.youtube.com/watch?v=IMYO487lpxg&list=PLVfMKQXDAhGWFP61AzOs_PowY7OAaFRHU|Vue js уроки]] (Web Developer Blog) * [[https://www.youtube.com/watch?v=6Vu3_zEwZOw&list=PLYfFMdgVk4_wQGMwjKlb8y8wSP-0Dnq5B|VueJS API]] ==== En ==== * [[https://www.youtube.com/watch?v=5LYrN_cAJoA&list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa|Vue JS 2 Tutorial]] * [[https://www.youtube.com/watch?v=sYNjEzcOTOs&list=PLillGF-RfqbYsOOycB67Raf9dwmL6Y31M|Vue.js & Firestore App]] * [[https://www.youtube.com/watch?v=g7YKecZhFRA&list=PLjwdMgw5TTLW-mAtlR46VajrKs4dep3y0|Apprendre VueJS]] СохранитьПросмотрРазличияОтменить Сводка изменений Примечание: редактируя эту страницу, вы соглашаетесь на использование своего вклада на условиях следующей лицензии: CC0 1.0 Universal