Фронтовые каркасы, такие как AngularJS, могут сделать очень удобным для разработки мощных одностраничных приложений. Тем не менее, иногда большие рамки, такие как Angular, слишком велики для наших проектов, и многие функции не могут быть использованы. В настоящее время нам нужно оценить необходимость его использовать. Если нам нужно только добавить несколько функций на простую веб -страницу, то использование Angular будет слишком хлопотно, а необходимая установка, конфигурация, написание маршрутизации, проектирование контроллеров и т. Д. По казаться слишком громоздкой.
В настоящее время нам нужно более легкое решение. Vue.js - хороший выбор. Vue.js - это структура, которая фокусируется на моделях вида (ViewModal). Модель представления представляет собой мост для передачи данных между пользовательским интерфейсом и моделью данных, реализуя двустороннее связывание данных между пользовательским интерфейсом и моделью данных. Это не «полная структура», а простая и гибкая структура, сфокусированная на слоях.
Далее мы будем использовать простое приложение Memo, чтобы узнать о основах Vue.js. Чтобы все обратили больше внимания на саму Vue.js, мы разработали клиентское приложение на основе локальных данных. В конце этой статьи мы упомянем взаимодействие между Vue.js и Backend.
Подготовка
Давайте сначала проведем Vue.js и Bootstrap через NPM (нет необходимости, здесь нужно применить библиотеку стилей) и введите следующее в командной строке:
NPM Установка Vue Bootstrap
Затем создайте два файла:
Touch Index.html app.js
Также добавьте следующий контент в index.html
<!-index.html-> <! Doctype html> <html> <head> <meta charset = "utf-8"> <title> vue </title> <!-css-> <link rel = "stylesheet" href = "node_modules/bootstrap/dist/css/boopstrap.min.csss> </heafstrape/csssement/boopstrap.min. bar-> <vav> <div> <a> <i> </i> vue memo </a> </div> </nav> <!-Основные части приложения-> <div id = "events"> <!-добавить форму-> <div> <div> <h3> Добавить событие </h3> </div> <div> </div> </div> </div> </div> <! </div> </div> </div> <!-JS-> <script src = "node_modules/vue/dist/vue.js"> </script> <script src = "app.js"> </script> </body> </html>
Тег <viv> с идентификатором «события» является основной частью этого приложения. После этого мы создадим экземпляр VUE для этой основной части.
Создать экземпляр Vue
Во -первых, давайте создадим экземпляр VUE и установим атрибут «EL» этого экземпляра «#EVENTS». Таким образом, экземпляр будет связан с контейнером с идентификатором «события».
// app.jsnew vue ({// и привязка контейнера с идентификатором "события": '#events'});На этом этапе функция Vue вступит в силу в событиях Div#. Перед добавлением другого контента давайте добавим необходимые свойства в созданный экземпляр VUE:
// app.js new Vue ({// Привязка контейнера с идентификатором «События»: '#Events', // В атрибуте данных мы определяем данные, которые взаимодействуют с данными веб -страницы: {}, // Когда приложение загружено, функция в приложении будет выполнено. {}});Атрибут данных - это объект, который объявляет все данные в модели представления нашего приложения.
Готовый атрибут - это функция, которая будет выполнена при загрузке приложения. Обычно здесь вызываются другие методы для инициализации данных, требуемых приложением.
Метод метода определяет методы, которые необходимо использовать в этом приложении
Добавить контент в форму
Нам нужно ввести детали записки в форме. Мы использовали нативное селектор времени HTML5, чтобы установить время содержимого меморандумы. (Обратите внимание, что эта функция не применима в браузере Firefox, рекомендуется использовать Chrome или Safari)
<div> <input wacelower = "Имя события" v-model = "event.name"> </div> <div> <textarea placeholder = "Описание события" v-model = "event.description"> </textarea> </div> <div> <input type = "date" waceholder = "date" v-model = "devate" @Click = "AddEvent"> отправить </button> </div>
Мы добавили директиву «V-Model» в входной тег и тег Textarea. Подобно «NG-модели» Angular, значение этой V-модели определяет данные, связанные с этим тегом в модели представления. Эти данные доступны не только здесь, но и в других местах в контейнере.
Мы добавили инструкцию «@click» в кнопку «Отправить». Эта инструкция сокращена, и полное имя должно быть «V-on: щелкнуть». Его функция заключается в том, чтобы привязать слушатель для нажатия событий на эту кнопку. Когда событие Click запускается, будет выполнена функция прослушивателя в инструкции @Click. В этом примере мы связываем функцию addEvent с кнопкой отправки. Мы также можем связать другие события, а правило письма - @event name = "функция слушания". Если мы хотим связать функцию слушателя с событием Keydown, мы можем написать это: @keydown = "f" или v-on: keydown = "f"
На этом этапе, если вы просмотрите веб -страницу, вы увидите следующий контент:
Добавить данные
Мы уже упоминали метод addevent, который используется для добавления новых данных меморандумы.
Теперь мы определим этот метод и добавим некоторые необходимые данные
// app.js ... data: {event: {name: '', Описание: '', Дата: ''}, События: []}, // Функция в атрибуте «Готов» будет выполнена при загрузке приложения. Определите метод получения данных fetchevents: function () {var events = [{id: 1, имя: «иметь встречу», «Описание:« 9 утра в конференц-зале 21-го этажа », дата:« 2015-09-10 »}, {id: 2, имя:« Покупки »: Vue ', Date:' 2016-03-11 '}]; // $ set-это метод, предоставляемый Vue для вставки данных в массив. Представление будет обновлено при выполнении этого. $ Set ('Events', Events); }, // вставить данные в массив событий addEvent: function () {if (this.event.name) {this.events.push (this.event); this.event = {name: '', description: '', date: ''}; }}}В свойстве данных мы определяем объект события и массив событий, представляющие события и массив событий соответственно. Эти данные будут загружены при загрузке приложения. Если мы не будем предопределены объекты события, хотя могут быть реализованы последующие функции, браузер сообщит об этой ошибке:
Они означают, что если данные, которые вы используете в своем приложении, не будут объявлены в атрибуте данных, будет затронута производительность приложения. Поэтому данные, которые мы используем в нашем приложении, лучше всего объявляются в атрибуте данных.
В готовом свойстве мы определяем метод FetchEvents для получения данных. В этом методе мы добавляем данные в представление через метод SET VM. $. Его функция аналогична методу Push массива, и она также обновляет представление. Параметр этого метода должен быть строковым клавиатурой, представляющим входящие данные. Для конкретного использования, пожалуйста, обратитесь к здесь.
Наконец, в свойстве метода мы определяем метод addevents, чтобы проверить, существует ли значение event.name, и если да, добавляем событие в массив событий. После этого данные в объекте события будут очищены, и форма также будет очищена.
Добавить список элементов
Мы используем список вещей, чтобы перечислить все вещи:
<div> <a href = "#" v-for = "Событие в событиях"> <h4> <i> </i> {{event.name}} </h4> <h5> <i v-if = "event.date"> </i> {{event.date}} </h5> <p viif = "event.description" }} </p> <button @click = "deleteevent ($ index)"> delete </button> </a> </div>Мы используем директиву V-For для партийных элементов рендеринга с той же структурой DOM и различным содержимым отображением. В этом примере мы добавляем директиву V-FOR в тег, которая будет пересекать данные в массиве событий, и мы представляем каждые данные об отслеживании с событием. Элементы с добавленной директивой V-FOR будут применять результаты каждого обхода в детских элементах и отображать их неоднократно. Друзья, которые использовали шаблонный двигатель, React или Angular, могут быть более знакомы с аналогичным использованием. В нашем примере содержимое тегов H4, H5, P и кнопок будет отображаться неоднократно, а количество петлей - это длина массива событий. Дети с элементами директивы V-For называются шаблонами, а данные в шаблоне обернуты в двойные скобки. В этом примере данные представляют собой различные свойства объекта события (имя, дата и описание).
Вы заметите, что некоторые элементы шаблона добавили директивы V-IF. Эта инструкция действует как условное рендеринг. Значение V-IF-это условие суждения. Если результат правда, элемент будет отображаться, в противном случае он не будет отображаться. Кроме того, мы добавили инструкцию по щелчке в элемент кнопки и вызвали метод DeleTeeVent для удаления вопроса (конкретное определение будет приведено ниже). Индекс параметра $ представляет количество в настоящее время пройденного элемента в массиве.
Обновите страницу, и мы обнаружим, что все элементы будут перечислены в правой стороне страницы. После ввода контента в форме слева и нажав кнопку «Отправить», новые элементы будут автоматически добавлены в список справа.
Давайте определим метод DeleTeeVent
deleteeVent: function (index) {if (inform («Вы уверены, что хотите удалить это событие?»)) {// $ remove - это метод удобства Vue, аналогичный Splice this. events. $ remove (index); }}В этом методе мы сначала спрашиваем пользователя, обязательно ли он удалит элемент. Если вы нажмете «OK», то элемент будет удален из DOM с помощью предопределенного метода $ удалить Vue.
Взаимодействие с бэкэнд
Как и Angular, передний и задний и задний ход Vue разделены, а взаимодействие с задней частью завершается с помощью HTTP-запросов. Существует много интерактивных инструментов, вы можете использовать знакомые $ .ajax, нативный объект Xmlhttprequest или другие сторонние библиотеки или попробовать Vue-Resource.
Вот краткое введение в Vue-Resource. Vue-Resource-это плагин, разработанный специально для Vue для отправки HTTP-запросов. Он поддерживает обещание и шаблоны URI, а также предоставляет такие инструменты, как Interceptor. Давайте посмотрим на наш пример выше. Мы меняем приобретение вопросов на получение их с сервера. В настоящее время нам необходимо изменить метод Fetchevents: (Предположим, что бэкэнд предоставляет услуги, связанные с вопросами, посредством URL -адреса API/событий, то же самое ниже)
fetchevents: function () {this. $ http.get ('api/events'). then (function (events) {this. $ set ('events', events);}). Catch (function (erry) {console.log (error);});}Если приобретение будет успешным, то будет выполнять оператор функции Then, и метод $ SET все еще вызывается, но события ввода параметров получают извлечение с сервера.
Если мы изменим AddEvent, нам нужно отправить запрос сообщения:
addEvent: function () {this. $ http.post ('api/events', this.event) .then (function (response) {this.events.push (this.event); console.log ("Событие добавлено!Точно так же метод удаления вопросов может быть изменен следующим образом:
deleteeVent: function (index) {this. $ http.delete ('api/events/' + event.id) .then (function (response) {this.events. $ remove (index);}) .catch (function (error) {console.log (ошибка);});}).Здесь мы передаем идентификатор вопроса на сервер, чтобы сообщить серверу удалить идентификатор вопроса, чтобы облегчить сервер, чтобы определить, какой вопрос удалить.
Заключение
Друзья, которые использовали Angular и React, найдут, что Vue и все они похожи: инструкции, похожие на угловую модульную обработку, похожие на React. Тем не менее, Vue, очевидно, отличается от них. Это легче и просто в использовании. Вам не нужно создавать сложные конфигурации, такие как Angular, и вам не нужно изучать новые концепции, такие как новый виртуальный DOM, JSX и т. Д., Такие как React. Поэтому, если ваше приложение не очень большое, вы можете также рассмотреть возможность использования VUE в качестве структуры приложения.
Выше приведено учебник для быстрого введения для Vue.js, представленный вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!