Вступление

Vue — это прогрессивная платформа для создания пользовательских интерфейсов. По сравнению с большинством негибких фреймворков, Vue создавался для постепенного внедрения. По своей сути Vue ориентирован только на уровень представления, и его легко подобрать и интегрировать с другими библиотеками или существующими проектами. Это еще не все, Vue способен поддерживать сложные одностраничные приложения при использовании в сочетании с современными инструментами и вспомогательными библиотеками.

Начало работы

Вы можете установить Vue, включив сценарий Vue как внешний файл JavaScript, как показано ниже

       

Или

      

В качестве альтернативы, как указано на странице установки Vue, можно использовать vue-cli, но это не рекомендуется для начинающих, особенно если вы еще не знакомы с инструментами сборки на основе Node.js.

Декларативный рендеринг

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

HTML

  
{{message}}

JS

  var app = new Vue ({el: '#app', data: {message: '  Привет, Мумбаи! '}})  

Этот код дает: Привет, Мумбаи

В примере, который мы написали выше, Vue проделал большую работу под капот. В результате данные и DOM теперь связаны, и мы получаем реактивную реализацию. Откуда нам знать? Когда мы открываем консоль JavaScript нашего браузера и устанавливаем для app.message другое значение. мы должны увидеть обновленный приведенный выше пример.

Помимо интерполяции текста, мы также можем привязать атрибуты элемента следующим образом:

HTML

  
> span v-bind: title = "message"> Наведите указатель мыши на меня на несколько секунд, чтобы увидеть мой динамически связанный заголовок!

  var app2 = new Vue  ({el: '# app-2', data: {message: 'Вы загрузили эту страницу на' + new Date (). toLocaleString ()}})  

В в примере выше мы сталкиваемся с чем-то новым. Атрибут v-bind, написанный в приведенном выше коде, называется директивой. Чтобы показать, что директивы являются специальными атрибутами, предоставляемыми vue, они имеют префикс V-, и эти директивы применяют особое реактивное поведение к визуализированной DOM. В приведенном выше примере кода мы говорим: «Держите атрибут title этого элемента в актуальном состоянии с помощью свойства сообщения в экземпляре Vue.. «

Условные операторы и циклы

Vue предоставляет нам директиву для обработки условных операторов и циклов. Следовательно, легко переключать наличие элемента, как показано во фрагментах кода ниже:

HTML

  
Теперь вы меня видите

JS

  var app3 = new Vue ({el: '# app-3', data: {seen: true}})  

Это напечатает в нашем браузере следующее сообщение «Теперь вы меня видите»

Если мы введем app3.seen = false в консоли, сообщение исчезнет.

Обработка пользовательского ввода

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

  

{{message} }

JS

  var app5 = new Vue ({el: '# app-5', data: {message: 'Hello Vue.js!'}, методы: {reverseMessage  : function () {this.message = this.message.split (''). reverse (). join ('')}}})  

В примере, показанном выше Vue обрабатывает все манипуляции с DOM за нас, пока мы фокусируемся на логике.

Vue предоставляет нам директиву v-model, которая упрощает двустороннюю привязку данных между приложением и вводом формы.

  

{{message}}

JS

  var app6 = new Vue ({el: '# app-6', data: {message: 'Hello Vue!'}})  

Создание with Components

Components предоставляет абстракцию, которая позволяет нам создавать крупномасштабные приложения, состоящие из небольших, автономных и в большинстве случаев повторно используемых компонентов. Чтобы составить компонент в шаблоне другого компонента, нам нужно создать его экземпляр в шаблоне следующим образом:

  

Однако мы всегда хотим иметь возможность передавать данные из родительской области в дочернюю составная часть. Для этого наш родительский компонент должен принимать опору:

  Vue.component ('task-item', {props: ['task'], template: '
  • {{task.text}}
  • '})

    Теперь мы можем передать задачу каждому повторяющемуся компоненту с помощью v-bind:

      
      Vue.component ('task-item', {props: ['  задача '], шаблон:' 
  • {{task.text}}
  • '}) var app7 = new Vue ({el:' # app-7 ', data: {groceryList: [{id: 0 , text: 'Vegetables'}, {id: 1, text: 'Cheese'}, {id: 2, text: 'Что еще люди должны есть'}]}})

    Отношение к настраиваемым элементам

    Пользовательский элемент и компоненты Vue похожи, это потому, что синтаксис компонента Vue смоделирован после спецификации веб-компонента. Какой настраиваемый элемент является часть. Например, компоненты Vue реализуют специальный атрибут is и Slot API. Но у них есть ключевые отличия, а именно:

    • Хотя спецификация веб-компонентов была завершена, а не каждый браузер реализует его изначально, тогда как компоненты Vue не требуют полифилов, поскольку они работают согласованно со всеми поддерживаемыми браузерами (включая IE9 и выше).
    • Компоненты Vue предоставляют определенные важные функции, которые элементы не предлагают, особенно межкомпонентный поток данных. интеграция инструментов сборки и взаимодействие с пользовательскими событиями.
    Оцените статью
    nanomode.ru
    Добавить комментарий