Главная » Архив меток: VueJS (страница 10)

Архив меток: VueJS

Vue JS — Переходы и Анимация

От автора: в данном разделе мы рассмотрим, как создается во Vue JS анимация и применяются функции переходов. Переход VueJS предоставляет много способов применения перехода к HTML элементам, когда они добавляются или обновляются в DOM. VueJS имеет вcтроенный компонент перехода, который нужно обернуть вокруг элемента. Синтаксис <transition name = "nameoftransition"> <div></div> </transition> Давайте рассмотрим пример работы переходов. Пример <html> <head> <title>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 – это как «новый ...

Читать далее »