От автора: в данном разделе мы рассмотрим, как создается во Vue JS анимация и применяются функции переходов. Переход VueJS предоставляет много способов применения перехода к HTML элементам, когда они добавляются или обновляются в DOM. VueJS имеет вcтроенный компонент перехода, который нужно обернуть вокруг элемента. Синтаксис <transition name = "nameoftransition"> <div></div> </transition> Давайте рассмотрим пример работы переходов. Пример <html> <head> <title>VueJs ...
Читать далее »Архив меток: VueJS
Vue JS mixins — Миксины
От автора: Vue mixin — миксины — в основном, используются с компонентами. Они помогают многократно использовать код внутри компонентов. Если компонент использует миксин, то все параметры миксина становлятся частью параметров компонента. Пример <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"></div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', ...
Читать далее »Vue JS — Компоненты
От автора: Vue JS компоненты – это одна из важнейших функций VueJS, создающая пользовательские элементы, которые можно повторно использовать в HTML. Давайте создадим компонент и на его примере разберёмся в том, как это работает во VueJS. Пример <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "component_test"> <testcomponent></testcomponent> </div> <div id = "component_test1"> ...
Читать далее »Vue JS – Функция маршрутизации
От автора: VueJS не имеет встроенной функции маршрутизации. Для ее установки нам придётся выполнить несколько дополнительных шагов. Скачать напрямую из CDN Последняя версия vue-router доступна по адресу https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com предоставляет cdn-ссылки на основе npm. Пакет, доступный по указанной выше ссылке всегда обновляется до последней версии. Мы можем загрузить его и разместить на своих ресурсах, а потом использовать с тэгом script ...
Читать далее »VueJS — Директивы
От автора: Vue JS директивы являются, по сути, инструкцией к действиям. Мы уже знакомы с такими директивами как v-if, v-show, v-else, v-for, v-bind, v-model, v-on, и т.д. В данном разделе мы познакомимся с пользовательскими директивами. Мы создадим глобальные директивы, похожим образом, как мы это делали с компонентами. Синтаксис Vue.directive('nameofthedirective', { bind(e1, binding, vnode) { } }) Директива создается использованием Vue.directive. ...
Читать далее »Фреймворк VueJS — Введение
От автора: Vue – это JavaScript фреймворк для создания пользовательских интерфейсов. Он работает с уровнем представления. Vue является довольно простым для понимания и изучения. В данном руководстве мы будем использовать версию 2.0. Поскольку Vue фреймворк фактически создан для фронт-енд разработки, в следующих разделах нам предстоит работать с многими HTML, JavaScript и CSS файлами. Чтобы получше разобраться, давайте начнём с простых ...
Читать далее »VueJS – Установка среды
От автора: существует много способов, с помощью которых производится установка Vue JS. Некоторые из них будут описаны ниже. Использование тэга script прямо в HTML-файле <html> <head> <script type = "text/javascript" src = "vue.min.js"></script> </head> <body></body> </html> Перейдите на домашнюю страницу официального сайта VueJS https://vuejs.org/v2/guide/installation.html и загрузите vue.js. Вы увидите две версии – производственную версию и версию для разработчиков. Версия для ...
Читать далее »New VueJS — Создание экземпляра
От автора: чтобы начать работу с VueJS, нам нужно создать экземпляр Vue, который называется корневым экземпляром Vue и обозначается как new vue. Синтаксис var app = new Vue({ // options }) Давайте рассмотрим пример, чтобы понять, что должно входить в конструктор Vue. <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "vue_det"> <h1>Firstname ...
Читать далее »Знакомство с Webpack без профессиональных терминов для пользователей VueJS
От автора: для многих разработчиков Vue.js — это первая интерфейсная среда JavaScript, которую они изучили. Если о себе вы можете сказать то же самое, вероятно, у вас еще не было причины изучить взаимодействие Vue JS Webpack. Но по мере того, как продолжается работа с Vue, вы увидите, что Webpack снова и снова появляется в документации, примерах проектов и в отношении ...
Читать далее »10 вещей, которые я люблю в Vue JS
От автора: я люблю Vue JS. В 2016 я впервые познакомился с этим инструментом, скорее всего, потому что устал от JS фреймворков. На тот момент я уже работал с Backbone, Angular, React и т.д., и мне не особо хотелось изучать новый фреймворк. Так было, пока я не прочитал комментарий на hacker news, где говорили, что Vue – это как «новый ...
Читать далее »