Чтобы настроить Vue в Fiddle, вам просто нужно открыть скрипт, войти в него и начать с установки Vue в качестве JavaScript Framework. Как только это будет сделано, вы можете продолжить и начать руководство по коду ниже. В этом посте мы рассмотрим следующие темы, и примеры будут сделаны с использованием JSFiddle:

  1. Декларативное программирование и шаблоны
  2. Условное в шаблонах
  3. Циклы в шаблонах

Настройка рабочей области достаточно проста. Просто найдите Vue и добавьте его в JSFiddle, как показано ниже:

Начало работы с фреймворком Vue

Теперь, когда это настроено, давайте рассмотрим каждую из тем отдельно.

Декларативное программирование и шаблоны

Vue использует декларативный язык для указания различных параметров на экране. Если вы знакомы с языком шаблонов, вы будете счастливы и будете чувствовать себя комфортно с этой настройкой. Итак, как мы видим, две фигурные скобки для создания шаблонов помогут нам в этом. Итак, начнем с простого примера. Мы создадим образец карты, используя Vue и Bootstrap 4.

<div id="app">
<div class="card">
  <div class="card-block">
<!-- You can see the templating used below -->
    <h4 class="card-title">{{cardTitle}}</h4>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">{{cardText}}</p>
    <a href="#" class="card-link">{{cardLink}}</a>
    <a href="#" class="card-link">{{cardAnotherLink}}</a>
  </div>
</div>
</div>

Чтобы выполнить этот запуск, мы напишем некоторый код Vue. Это идентифицирует элемент и поместит необходимые данные в DOM, используя приведенные выше шаблоны. Код JavaScript идет, как уже упоминалось.

var app = new Vue({
  el: '#app',
  data: {
    cardTitle: 'John Doe',
    cardText: 'Hello I am a regular visitor of The Web Juice',
    cardLink: 'Profile',
    cardAnotherLink: 'Share'
  }
});

Эта комбинация и даст расклад карт, о котором идет речь здесь.

Циклы в шаблонах

Vue имеет директивы, специфичные для Vue и начинающиеся с v- , эти директивы помогают добавлять в Vue функции манипулирования DOM. Поскольку теперь у нас есть карта, давайте повторим некоторые данные в DOM. Мы будем использовать v-for для повторения данных нашей карты. HTML-код для того же идет ниже, где мы использовали директиву v-for для повторения данных карты.

<div id="app">
  <div class="card" v-for="card in cards">
    <div class="card-block">
      <!-- You can see the templating used below -->
      <h4 class="card-title">{{card.cardTitle}}</h4>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
      <p class="card-text">{{card.cardText}}</p>
      <a href="http://thewebjuice.com/getting-started-vue-using-fiddle/" class="card-link">{{card.cardLink}}</a>
      <a href="http://thewebjuice.com/getting-started-vue-using-fiddle/" class="card-link">{{card.cardAnotherLink}}</a>
    </div>
  </div>
</div>

Теперь давайте добавим несколько строк JavaScript, чтобы внести изменения в написанный нами скрипт Vue, это даст вам достаточное понимание того, как работает директива Vue.

var contacts = [{
  cardTitle: 'John Doe',
  cardText: 'Hello I am a regular visitor of The Web Juice',
  cardLink: 'Profile',
  cardAnotherLink: 'Share'
}, {
  cardTitle: 'Rebecca Doe',
  cardText: 'Rather I will say I am not into this anymore.',
  cardLink: 'Profile',
  cardAnotherLink: 'Share'
}, {
  cardTitle: 'Loreal Doe',
  cardText: 'Lets chat about the site',
  cardLink: 'Profile',
  cardAnotherLink: 'Share'
}];
var app = new Vue({
  el: '#app',
  data: {
    cards: contacts
  }
});

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

Условное шаблонирование

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

<div id="app">
  <div class="card" v-for="card in cards" v-if="card.ex">
    <div class="card-block">
      <!-- You can see the templating used below -->
      <h4 class="card-title">{{card.cardTitle}}</h4>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
      <p class="card-text">{{card.cardText}}</p>
      <a href="http://thewebjuice.com/getting-started-vue-using-fiddle/" class="card-link">{{card.cardLink}}</a>
      <a href="http://thewebjuice.com/getting-started-vue-using-fiddle/" class="card-link">{{card.cardAnotherLink}}</a>
    </div>
  </div>
</div>

Теперь мы добавим точку данных в существующий список, а затем посмотрим, как она отреагирует.

var contacts = [{
  cardTitle: 'John Doe',
  cardText: 'Hello I am a regular visitor of The Web Juice',
  cardLink: 'Profile',
  cardAnotherLink: 'Share',
  ex:true,
}, {
  cardTitle: 'Rebecca Doe',
  cardText: 'Rather I will say I am not into this anymore.',
  cardLink: 'Profile',
  cardAnotherLink: 'Share',
  ex:true
}, {
  cardTitle: 'Loreal Doe',
  cardText: 'Lets chat about the site',
  cardLink: 'Profile',
  cardAnotherLink: 'Share',
  ex:false
}];
var app = new Vue({
  el: '#app',
  data: {
    cards: contacts
  }
});

Это приведет нас к пониманию того, как работают условные операторы. Давайте проверим пример приложения скрипки, чтобы увидеть, как все работает в действии. Здесь все три вещи работают вместе. Вы можете найти это в JSFiddle или поиграть с кодом ниже.

Вывод

В приведенном выше руководстве должно быть понятно, как использовать декларативные шаблоны для отображения данных в DOM. Наряду с этим было также дано хорошее представление об условном выражении, а также о структуре циклов. Мы продолжим принимать пользовательские данные в следующем разделе. Оставьте свои комментарии ниже, чтобы сообщить нам больше о вашем взгляде на Vue.

Первоначально опубликовано в The Web Juice.