От автора: мы уже знакомы с компонентами и их использованием. Например, у нас есть содержимое, которое нужно повторно использовать в проекте. Мы можем конвертировать то же самое как компонент и использовать. Давайте рассмотрим пример простого компонента и узнаем, что должна делает внутри него функция Vue JS render. Пример <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> ...
Читать далее »
От автора: v-on – это атрибут, добавляемый к элементам DOM для того, чтобы прослушивать во Vue JS события. Событие Click <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <button v-on:click = "displaynumbers">Click ME</button> <h2> Add Number 100 + 200 = {{total}}</h2> </div> <script type = "text/javascript"> var vm = new Vue({ ...
Читать далее »
От автора: в данном разделе мы рассмотрим свойство Watch. Давайте на пример узнаем, как можно использовать свойство Vue JS Watch. Пример <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "computed_props"> Kilometers : <input type = "text" v-model = "kilometers"> Meters : <input type = "text" v-model = "meters"> </div> <script type = ...
Читать далее »
От автора: существуют во Vue JS параметры для добавления реактивности свойствам, которые добавляются динамично. Давайте представим, что мы уже создали экземпляр vue и нам нужно добавить свойство watch. Это можно сделать следующим образом: <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "app"> <p style = "font-size:25px;">Counter: {{ counter }}</p> <button @click = ...
Читать далее »
От автора: в этом разделе мы поговорим об условном отображении, а также о том, как выводятся Vue JS списки. Что касается условного отображения, то мы рассмотрим использование if, if-else, if-else-if, show и так далее. По теме отображения списков мы рассмотрим использование for loop. Условное отображение Давайте начнём с примера, который иллюстрирует условное отображение. При условном отображении нам нужно получить результат ...
Читать далее »
От автора: мы уже ознакомились с методами для экземпляра Vue и компонентов. Вычисляемые свойства — Vue JS computed props — похожи на методы, но кое-чем они отличаются. Эти различия мы и рассмотрим в данном разделе. В результате вы научитесь определять, где лучше использовать методы, а где – вычисляемые свойства. Давайте разберёмся в вычисляемых свойствах с помощью примера. <html> <head> <title>VueJs ...
Читать далее »
От автора: зачастую, самая сложная часть при использовании тестовой разработки или TDD – это начало. Вам нужно скачать пакеты со странными зависимостями, заставить тест сьют работать с билд системой, а также понять, как вообще писать тесты! Не удивительно, что множество разработчиков бросают это дело. Но вы не обычный разработчик. TDD разработка может сочетаться с Vue – и вы можете быть ...
Читать далее »
От автора: полгода назад я начал работу над своим первым «настоящим» Sass приложением Checkly. Этот пост – обзор 5 уроков, которые я выучил за последние полгода. Надеюсь, он поможет другим самоучкам-разработчикам, которые создают с Vue Sass приложения. Чтобы вы поняли, опишу, что делает Checkly. Checkly – это инструмент для IT Ops и разработчиков. Он делает 2 вещи. Активно проверяет корректность ...
Читать далее »
От автора: криптовалюты становятся все популярнее, поэтому их ценность может сильно меняться. Если вам повезло, и вы купили пару монет всего за несколько долларов пару лет назад, то сейчас ваши монеты могут стоить тысячи долларов. Как разработчик, вы можете интересоваться созданием приложений в области криптовалют. К счастью, у вас есть доступ к данным о текущих криптовалютах через бесплатный API от ...
Читать далее »
От автора: давайте посмотрим, какие могут быть во Vue JS примеры работы с различными свойствами. Пример 1: Конвертер валют <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> #databinding{ padding: 20px 15px 15px 15px; margin: 0 0 25px 0; width: auto; background-color: #e7e7e7; } span, option, input { font-size:25px; } </style> <div id = "databinding" ...
Читать далее »