Пожалуйста, опишите ошибку

Нашли баг? Помогите нам его исправить, заполнив эту форму

Новое в блоге: Анимация Skeleton

Возможности фреймворка Vue.js. Часть 1

Алексей Форманюк
Web-разработчик

Vue.js — это относительно молодой, прогрессивный фреймворк для создания интерактивных веб-интерфейсов. Он намного меньше в размерах и быстрее большинства фреймворков для клиентской части веб приложений. Концепция дизайна Vue схожа с MVVM паттерном, но точно ей не следует, а само ядро фреймворка фокусируется на представлении. Vue прост для освоения и на нём легко разрабатывать сложные клиентские web-системы, например GitLab.

 

Основы

Начнём с самого простого примера — вывода «Hello Vue» на экран. Первое, что необходимо сделать — это подключить Vue к проекту с помощью CDN библиотеки или сгенерировать проект с помощью vue-cli, о котором я расскажу позже. Для начала объявим тег div и создадим экземпляр Vue внутри которого объявим переменную text, в которой и будет храниться наше приветствие, которое затем и будет отрисовано на экране.

<div id="app"> 
  <h1>{{text}}</h1> 
</div> 

new Vue({ 
  el: "#app", 
  data: { 
    text: 'Hello Vue!' 
  } 
});

Каждый новый vue-инстанс описывается в функции конструкторе, где, по сути, и хранится модель нашего приложения. В браузере вы увидите надпись Hello Vue!. Во Vue также можно связывать модель и html-атрибуты используя специальную директиву v-bind, также есть более короткая запись, например для атрибута id это будет :id.

<div id="app2"> 
  <span v-bind:title="title">Some simple text</span> 
</div> 

new Vue({ 
  el: "#app2", 
  data: { 
    title: 'Some simple title'
  }
});

Когда курсор будет над тегом span, появится всплывающая подсказка с надписью Some simple title. Одна из основных возможностей Vue — это концепция реактивности, т.е. если мы изменим данные в модели, то мгновенно изменится и шаблон.

<div id="app3"> 
  <div>{{text}}</div> 
  <input type="text" v-model="text"/> 
</div> 

new Vue({ 
  el: '#app3', 
  data: { 
    text: 'Hello Vue!' 
  } 
});

Теперь в input будет переменная text. При её изменение в теге input, она моментально будет меняться и в div.

Работа с условными операторами и циклами

Vue может влиять не только на атрибуты или текст html-документов, но также на DOM-структуру в целом. Ярким примером этого может являться директива v-if.

<div id="app"> 
  <span v-if="visible">Some cool text</span> 
</div> 

new Vue({ 
  el: '#app', 
  data: { 
    visible: true 
  } 
});

Когда переменная visible = true, текст виден. И, соответственно, если visible = false, тега span не будет видно. Есть похожая директива v-show, которая также делает элементы невидимыми. Основное различие v-if и v-show в том, что v-if полностью убирает элемент из DOM-дерева, в то время как v-show просто добавляет display:none элементу. Сравнивание можно производить и внутри этих директив. Также vue предоставляет различные анимационные переходы для элементов, которые были добавлены, изменены или удалены в DOM-дереве.

В Vue есть ещё одна специальная директива v-else. Она будет отображать элемент, если для v-if пришло значение false. Впрочем, смысл такой же, как у if/else в большинстве языков программирования. Работает v-else как с v-if, так и с v-show.

Для работы с массивами используется директива v-for.

<div id="app"> 
  <ul>
    <li v-for="player in players"> 
      <span>{{player.id}}</span> 
      <span>{{player.name}}</span> 
    </li> 
  </ul> 
</div> 

new Vue({ 
  el: '#app', 
  data: { 
    players: [ 
      {id: 1, name: 'Michael Jordan'}, 
      {id: 2, name: 'Kobe Brayant'}, 
      {id: 3, name: 'Kareem Abdul-Jabbar' }, 
      {id: 4, name: 'Shaquille O\'Neal'} 
    ] 
  } 
});

Vue отобразит список:

  • 1 Michael Jordan
  • 2 Kobe Brayant
  • 3 Kareem Abdul-Jabbar
  • 4 Shaquille O’Neal

События

За события в Vue отвечает директива v-on. Для того чтобы объявить событие &laquo:клика» на DOM-элементе необходимо написать v-on:click или @click. Записи идентичны. Для события нажатия клавиши v-on:keyup или @keyup. Также директива v-on имеет специальные модификаторы. Например, @click.stop аналогична stopPropagation в функции обработчика, а @click.default аналогична preventDefault. Для keyup можно объявить слушателя события только для определённой кнопки @keyup.space или, если удобнее, кодом @keyup.32.

Чтобы объявить обработчик для события, его необходимо добавить в объект methods.

<div id="app"> 
  <button v-on:click="onClick">Random number!</button> 
  <div>{{rand}}</div> 
</div> 

new Vue({ 
  el: '#app', 
  data: { 
    rand: 0 
  }, 
  methods: { 
    onClick() { 
      const rand = 0 + Math.random() * (1000 - 0);
      this.rand = Math.round(rand); 
    } 
  } 
});

В примере по нажатию на кнопку в обработчике события onClick генерируется случайное число, присваивается переменной rand, объявленной в data, и Vue отображает случайное число на экран.

Кроме прочего Vue поддерживает систему компонентов, которые являются важной частью фреймворка. Также, не был затронут вопрос жизненных циклов инстансов, вычисляемых функций и наблюдателей, кастомных директив и работа с формами, рендеринг на сервере. У Vue.js есть отличная библиотека Vuex.js, отвечающая за состояние приложения. Об этом и многом другом я расскажу в следующих частях.

Читать и комментировать

Краснодар

Коммунаров, 268,
3 эт, офисы 705, 707

+7 (861) 200 27 34

Хьюстон

3523 Brinton trails Ln Katy

+1 833 933 0204

Москва

+7 (495) 145-01-05