Чтобы настроить Vue в Fiddle, вам просто нужно открыть скрипт, войти в него и начать с установки Vue в качестве JavaScript Framework. Как только это будет сделано, вы можете продолжить и начать руководство по коду ниже. В этом посте мы рассмотрим следующие темы, и примеры будут сделаны с использованием JSFiddle:
- Декларативное программирование и шаблоны
- Условное в шаблонах
- Циклы в шаблонах
Настройка рабочей области достаточно проста. Просто найдите 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.