В этой статье поговорим о Vue.js – JavaScript библиотеке с двусторонней привязкой данных по принципу модель–представление.

Философия Vue.js заключается в том, чтобы предоставить простейший возможный API для создания в реальном времени двухсторонней привязки данных между представлением (HTML-шаблоном) и моделью (JavaScript-объект).

Самый простой способ установить Vue.js – просто подключить ее тегом <script> в конец HTML-документа. Вся библиотека находится в одном js-файле, который можно загрузить с официального сайта или импортировать напрямую через CDN:

Если вы хотите использовать Node, то Vue доступен как модуль npm. Для модуля доступен собственный интерфейс в терминале для гибкой настройки проекта.

Ниже приведены пять примеров использования Vue.js со ссылками на живые демо с кодом и комментариями.

Построим простую навигационную панель. Есть несколько основных компонентов, которые должны иметь все приложения на Vue.js:

  1. Модель (Model) – другими словами, данные приложения. В рамках библиотеки это js-объект, содержащий переменные и их исходные значения.
  2. Представление (View) – HTML-код отображающий данные для пользователя и содержащий eventListner’ы для взаимодействия с моделью.
  3. ViewModel – в терминологии MVC это был бы контроллер. Фактически, в рамках Vue.js ViewModel – связующее звено между моделью и представлением.

Как вы можете видеть, работа с библиотекой довольно проста. Vue.js проделывает большую работу и предоставляет удобный и привычный синтаксис:

  • Простой js-объект для опций
  • <<Двойные скобки>> для шаблонов
  • Встроенные атрибуты вида «v-something» для добавления функциональности непосредственно в HTML.

В предыдущем примере наша модель имела только пару предопределенных значений. Если мы хотим предоставить пользователям возможность менять любые данные, нам нужно сделать двустороннюю привязку данных и объединить поле ввода со свойством модели. Когда вводится текст, он автоматически сохраняется в модели text_content, которая затем вызывает обновление для представления.

Еще одна вещь, которую следует отметить в приведенном коде, – это атрибут v-if. Он показывает или скрывает целый элемент в зависимости от состояния переменной. Прочитать о нем больше можно здесь.

В этом примере показан список услуг и суммарная стоимость выбранных. Так как наши услуги хранятся в массиве, мы можем использовать директиву v-for для перебора всех записей и их отображения. Если в массив добавлен новый элемент или изменен любой из старых, Vue автоматически обновит данные и покажет новые.

Чтобы отобразить цены в правильном формате, нам необходимо определить простой фильтр валюты. Фильтры позволяют изменять или фильтровать данные модели. Чтобы определить настраиваемый фильтр, используем следующий синтаксис:

Фильтр довольно прост – он добавляет знак доллара и правильную цифровую дробь.

Теперь создадим приложение, в котором будут представлены некоторые статьи-примеры. Приложение также будет иметь текстовое поле поиска, позволяющее фильтровать, какие статьи будут отображаться. Все статьи будут храниться в массиве, и те из них, что соответствуют поисковому запросу, будут в попадать в массив filteredArticles.

Поле ввода привязано к модели searchString. Когда текст вводится, модель мгновенно обновляется, и массив filteredArticles генерируется снова. Таким образом, мы можем создать поиск в реальном времени, не заботясь о рендеринге или настройке прослушивателей событий.

В этом последнем примере проверим на Vue общий сценарий, когда страница имеет разные режимы компоновки. Как и в предыдущем приложении, будем показывать список статей, хранящихся в массиве.

Нажав одну из кнопок в верхней панели, будет переключаться режим показа между сеткой, содержащей большие изображения, и списком раскладок с меньшими изображениями и текстом.

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Zed Наука о данных Разное Тренды

Как исследовать и визуализировать данные МО для обнаружения объектов на изображениях