Vue - небольшая и легкая библиотека JavaScript. Он имеет простой и простой для понимания API, который делает разработчиков проще и удобнее при разработке веб-приложений. На самом деле, что всегда делало Vue гордиться, так это его удобство, исполнение и гибкость.
Цель этого учебника - использовать некоторые примеры, чтобы дать вам обзор некоторых основных концепций и функций. В других уроках вы узнаете более полезные функции Vue для создания масштабируемого проекта с Vue.
Привязка данных MVVM
Суть MVVM заключается в том, чтобы связать представление и модель с помощью привязки данных, так что изменения данных автоматически отображаются для просмотра обновлений. Vue.js заимствует механизм обучения Angular в проектировании API привязки данных: пользователи могут реализовать привязку данных с помощью атрибутов HTML со специальными префиксами или использовать общую интерполяцию шаблона вьющейся скобки или использовать двустороннее привязка на элементах форм:
<!-Директива-> <span v-text = "msg"> </span> <!-Interpolation-> <pan> {{msg}} </span> <!-Двунаправленное связывание-> <input v-model = "msg">Интерполяция, по сути, является инструкцией, просто для облегчения написания шаблонов. Во время компиляции шаблона Vue.js создаст директивный объект для каждого узла DOM, который требует динамического обновления. Всякий раз, когда данные, наблюдаемые в результате изменения объекта инструкции, они будут выполнять соответствующие операции DOM на связанном целевом узле. Привлечение данных на основе инструкций позволяет разумно инкапсулировать конкретные операции DOM в определениях инструкций. Кодекс бизнес -кода должен только включать шаблоны и операции в состояние данных, что значительно повышает эффективность разработки и обслуживаемость приложения.
В отличие от Angular, API Vue.js не имеет сложных концепций, таких как модуль, контроллер, сфера действия, фабрика, сервис и т. Д., И все основано на «экземпляре ViewModel»:
<!-Template-> <div id = "app"> {{msg}} </div> // Нативный объект-это data var data = {msg: 'hello!'} // Создать экземпляр ViewModel var vm = new Vue ({// Выберите целевой элемент el: '#App', // Предоставление начальных данных: data})Результат рендеринга:
<div id = "app"> hello! </div>
Во время рендеринга Vue.js также завершила динамическую привязку данных: если значение data.msg изменяется, DOM будет автоматически обновлена. Разве это не очень просто и легко понять? Кроме того, Vue.js также значительно упростил API пользовательских директив и фильтров. Если у вас есть опыт угловой разработки, вы начнете очень быстро.
Реализация наблюдения данных
Принцип реализации наблюдения данных Vue.js по существу отличается от принципа Angular. Читатели, которые знают Angular, могут знать, что наблюдения данных Angular используют грязные механизмы проверки. Каждая инструкция будет иметь соответствующий объект, используемый для наблюдения данных, называемый наблюдателем; Там будет много наблюдателей в области масштаба. Всякий раз, когда интерфейс должен быть обновлен, угловой будет выполнять все наблюдатели в текущей области, оценивать их один за другим, а затем сравнивать их со старыми значениями, сохраненными ранее. Если результат оценки изменяется, соответствующее обновление будет запускается. Этот процесс называется циклом дайджеста. Есть две проблемы с грязной проверкой:
Любые изменения данных означают, что каждый наблюдатель в текущей области должна быть переоценена, поэтому, когда количество наблюдателей огромно, производительность приложения неизбежно будет затронута, и его трудно оптимизировать.
Когда данные изменяются, структура не может активно обнаружить возникновение изменений. Он должен вручную запустить цикл дайджеста, чтобы запустить соответствующее обновление DOM. Angular позволяет избежать этой проблемы, автоматически запуская часть цикла дигест в функции обработчика событий DOM, но все еще существует много ситуаций, которые требуют, чтобы пользователь запускал вручную.
Vue.js использует механизм наблюдения, основанный на сборе зависимостей. В принципе, это то же самое, что и старый нокаут MVVM. Основными принципами сбора зависимостей являются:
Преобразовать собственные данные в «наблюдаемые объекты». Наблюдаемый объект может быть оценен или назначен.
Во время процесса оценки наблюдателя каждый взятый объект, который принимается, зарегистрирует текущего наблюдателя в качестве подписчика и станет зависимой от нынешнего наблюдателя.
Когда назначается зависимый наблюдаемый объект, он уведомляет всех подписчиков для переоценки и триггеров соответствующих обновлений.
Преимущество полагаться на сбор заключается в том, что он может точно и активно отслеживать изменения в данных, и нет двух проблем с грязными проверками, упомянутыми выше. Однако традиционные реализации сбора зависимостей, такие как нокаут, обычно требуют обертывания собственных данных для создания наблюдаемых объектов. Они должны использовать функции вызовов при получении значений и назначении значений. Метод написания является громоздким и недостаточно интуитивным при выполнении операций данных; В то же время поддержка объектов со сложными вложенными структурами не идеальна.
Vue.js использует метод ES5 Object.DefineProperty для непосредственного преобразования свойств нативного объекта данных в Getters и Setters, реализуя сбор зависимостей и запуска в рамках этих двух функций и идеально поддерживает вложенные структуры объектов. Для массивов изменения массива слушаются изменчивыми методами, которые обертывают массив, такие как Push. Это практически невозможно управлять данными vue.js и управлять собственными объектами [Примечание. При добавлении/удалении атрибутов или изменении определенных элементов на массиве необходимо вызвать конкретную функцию, например, obj. $ Добавить (ключ, значение), чтобы вызвать обновление. Это ограничено языковыми особенностями ES5. ], логика операции данных является более четкой и более плавной, а интеграция со сторонними решениями синхронизации данных также более удобна.
Компонентная система
В крупномасштабных приложениях, для разделения труда, повторного использования и обслуживания, нам неизбежно необходимо абстрагировать приложение на несколько относительно независимых модулей. В более традиционной модели разработки мы будем составлять часть компонента только при рассмотрении мультиплексирования; Но на самом деле, применение, подобное пользовательскому интерфейсу, можно рассматривать как полностью составленное из компонентных деревьев:
Поэтому компоненты используются в качестве основной концепции в дизайне Vue.js. Можно сказать, что каждое приложение Vue.js разработано вокруг компонентов.
Зарегистрировать компонент Vue.js очень проста:
Vue.component ('my-component', {// шаблон шаблона: '<div> {{msg}} {{privatemsg}} </div>', // Принять параметры Props: {msg: string <br>}, // частные данные, вам необходимо вернуть в функция, чтобы избежать множества экземпляров. }}})После регистрации вы можете вызвать дочерний компонент в шаблоне родительского компонента в качестве пользовательского элемента:
<my-component msg = "hello"> </my-component>
Результат рендеринга:
<div> привет компонент! </div>
Компонент Vue.js можно понимать как класс ViewModel с предопределенным поведением. Компонент может предопределить много вариантов, но наиболее важными являются следующие:
Формат компонентов с одним файлом на основе инструментов сборки
Основная библиотека Vue.js предоставляет только базовые API и не имеет слишком большого количества ограничений на то, как организовать структуру файла приложения. Однако при создании больших приложений рекомендуется использовать комбинацию WebPack + Vue-Loader, чтобы сделать разработку компонентов более эффективной.
WebPack-это инструмент для создания модуля с открытым исходным кодом, разработанный Tobias Koppers. Его основная функция состоит в том, чтобы упаковать несколько файлов JavaScript, записанных в формате модуля в один файл, и поддержать как CommonJS, так и форматы AMD. Но что делает его уникальным, так это то, что он обеспечивает мощный API загрузчика для определения логики предварительной обработки для различных форматов файлов, позволяя нам использовать CSS, шаблоны и даже пользовательские форматы файлов в качестве модулей JavaScript. WebPack также может реализовать большое количество расширенных функций на основе загрузчика, таких как автоматическая упаковка с помощью Chunking и загрузка спроса, автоматическое расположение ссылок на ресурсы изображений, решение по встроенным базовым 64 на основе размера изображения, горячей замены модулей во время разработки и т. Д. Можно сказать, что это одно из наиболее конкурентоспособных решений в области построения фронт-END в настоящее время.
Я разработал плагин Vue-Loader на основе API WebPack Loader, чтобы мы могли написать компоненты VUE в таком единственном формате файла (*.vue):
<style> .my-Component H2 {color: red;} </style> <Template> <div> <h2> hello from {{msg}} </h2> <orhean-component> </rother-component> </div> </template> <cropply> // Следуйте формату модуля Commonjs varcomponent = требуется ('. module.exports = {data: function () {return {msg: 'vue-loader'}}, компоненты: {'другие компоненты': othercomponent}} </script>В то же время вы также можете использовать другие препроцессоры в файле *.vue, просто установите соответствующий загрузчик Webpack:
<style lang = "stylus">. My-Component H2 Color Red </style> <Template lang = "Jade"> div.my-Component H2 Hello From From {{msg}} </template> <script lang = "babel"> // babel в compile es2015export defaul }}} </script>Такой формат компонента объединяет три элемента шаблона, стиля и логики компонента в тот же файл, который удобен для разработки, повторного использования и обслуживания. Кроме того, сама Vue.js поддерживает асинхронную загрузку компонентов и в сочетании с функцией упаковки WebPack, он может легко реализовать асинхронную загрузку компонентов по требованию.
Другие функции
Vue.js имеет несколько других функций, которые стоит упомянуть:
Создайте экземпляр Vue, используя новый VUE ()
Сначала мы можем инициализировать HTML -страницу, а затем нам нужно представить файл Vue JS. Есть много способов представить его. Мы можем представить Vue's CDN в скрипте или загрузить Vue's Min.js на официальном веб -сайте или установить зависимость VUE с помощью NPM. Для удобства эта статья представлена с использованием CDN.
<! Doctype html> <html> <head> <title> учиться с нуля </title> </head> <body> <script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </script> </body> </html>
Когда вы разрабатываете, убедитесь, что вы используете несжатые версии, потому что несжатые версии будут предоставлять полезные подробные предупреждения и сэкономит вам много времени на написании вашего кода.
Сначала мы пишем Div в теле, создаем экземпляр VUE, а затем связываем экземпляр и Div.
Когда вы создаете новый экземпляр VUE, используйте конструктор VUE () и укажите свою точку крепления в вашем экземпляре. Эта точка крепления является границей экземпляра VUE, который вы хотите разделить. Точка крепления и граница экземпляра соответствуют одному. Вы можете обрабатывать только транзакции в пределах границы экземпляра в точке крепления, но не транзакции вне границы экземпляра в точке монтирования.
Параметр для установки точки монтирования в экземпляре VUE - «EL», и значение EL может быть определена элементом DOM.
<! Doctype html> <html> <head> <title> учиться с нуля </title> </head> <body> <div id = "vueinstance"> это граница экземпляра точки монтирования экземпляра </div> <script/1.0.16//cdn.jsdelivr.net/vue/1.0.0. // Создать новый экземпляр VUE и установить точку монтирования var v = new Vue ({el: '#VueInstance'}); </script> </body> </html>Как вы можете видеть выше, New Vue () создает новый экземпляр, а затем указывает элемент DOM в качестве точки монтирования экземпляра. При определении точки монтирования мы используем идентификатор селектора CSS для его определения. Компания «Имя создания» также может быть определена сама по себе для позднего вызова.
Использование V-модели для двунаправленного привязки данных
Мы можем использовать V-модель для привязки ввода ввода, чтобы мы могли использовать динамически, чтобы получить значение объекта данных. Вы можете думать о V-модели как о указанном свойстве, как и атрибут элемента HTML. Двусторонняя привязка данных здесь может использоваться во многих элементах формы, таких как вход, Textarea и Select.
Vue использует команду V-Model для привязки данных, и эти данные являются данными, которые мы надеемся обновить с помощью операций пользователя.
Например, в нашем примере ниже мы хотим связать имя данных на входном теге, и нам нужно реализовать объявление в объекте данных в экземпляре Vue.
<div id = "vueinstance"> введите свое имя: <input type = "text" v-model = "name"> </div>
<script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </script> // После этой строки будет опущен <script> var v = new Vue ({el: '#vueinstance', data: {name: '_appian'}}});Независимо от того, сколько раз вводится пользователь, это имя будет автоматически обновлено. Кроме того, если значение имени изменяется, значения в других местах, где нанесено на карту имя, также будут изменены.
Причиной синхронной модификации этого окна ввода и отображения является использование инструкции V-модели, чтобы данные были связаны через базовый поток данных, а затем напрямую изменяются. Это концепция двусторонней связывания данных.
Чтобы доказать эту концепцию, мы можем использовать данные $, чтобы распечатать отображение данных.
<div id = "vueinstance"> Введите свое имя: <input type = "text" v-model = "name"> <p> {{$ data | json}} </p> //#1 <p> {{name}} </p> //#2 </div> <script> var v = new Vue ({el: '#vueinstance', data: {name: '_appian'}}); </script>Это 1:
Данные $ - это объект данных, наблюдаемый экземпляром VUE. Основным типом является объект, поэтому он может быть преобразован в JSON. Можно заменить новым объектом. Экземпляр обеспечивает свойства своего объекта данных.
{{}}, интерполяция с двумя вьющимися скобками. Значение, вставленное здесь - это значение, которое изменяется в реальном времени по данным $.
| JSON, просто более интуитивно понятный способ отображения данных. Его также можно рассматривать как фильтр, как и эффект json.stringify ().
Пункт 2:
{{name}} означает вставку переменных данных непосредственно в интерполяционное выражение и две кудрявые скобки, чтобы напрямую отобразить значение имени.
Vue так просто выполнить двустороннее привязку данных. Это требует только инструкции V-модели, без использования JS или JQ для управления данными. Я считаю, что вы можете уточнить логику из приведенных выше примеров.
Используйте V-ON для привязки событий
Vue использует инструкции V-ON для прослушивания событий и распространения событий. Вы можете создать метод для привязки события прослушивания в экземпляре Vue, и вы можете создать метод для отправки события Click.
В следующем примере мы создадим метод SAKE, который связан с кнопкой. Эффект щелчка - всплыть в поле «Приветственное» поле с именем пользователя. Чтобы назначить этот метод к кнопке, нам нужно использовать V-on: нажмите, чтобы связать событие.
<div id = "vueinstance"> Введите свое имя: <input type = "text" v-model = "name"> <кнопка v-on: click = "say"> добро пожаловать, чтобы нажать </button> //#1 <button @click = "say"> добро пожаловать, чтобы нажать </button> //#2 </div>
<script> var v = new Vue ({el: '#vueinstance', data: {name: '_appian'}, методы: {say: function () {alert ('welcome' + this.name);}}}); </script>Конечно, вы можете не только привязывать события щелкнуть, но и связать другие события мыши, события ввода клавиатуры и другие типы событий JS. Например, v-on: mouseover, v-on: keydown, v-on: отправить, v-on: keypress, v-on: keyup.13 и т. Д. или некоторые другие пользовательские события.
В процессе разработки вы можете часто использовать привязку событий. Написать v-on немного неприятно, поэтому в приведенном выше примере есть два способа написать, #2-аббревиатура № 1. Используя @ вместо V-on, я не буду много говорить здесь.
Используйте V-IF или V-Show для вынесения условных суждений
Если мы хотим, чтобы пользователь увидел приветственное всплывающее окно после входа в систему, и если мы не вошли в систему, мы дадим ему интерфейс входа в систему. VUE предоставит нам инструкции V-IF и V-SHOW для управления содержанием дисплея в различных состояниях входа.
Используя предыдущий пример, мы можем использовать значение LoginStatus для управления, следует ли входить в систему. Если это правда, ящик и кнопка ввода будут отображаться, чтобы оно могло увидеть приветственное всплывающее окно. Однако, если он ложный (то есть он не вошел в систему), вы можете увидеть только поле ввода и кнопку отправки для ввода номера учетной записи, пароля (в настоящее время нет аутентификации, будет изменено только состояние входа в систему).
<div id = "vueinstance"> // Раздел, отображаемый, когда LoginStatus Is True <section v-if = "LoginStatus"> Введите свое имя: <input type = "text" v-model = "name"> <Кнопка v-on: click "Скажи"> Добро пожаловать в Click </button> <tood @Click = SwitchNStatus ">" LoginStatU LoginStatus-это false <раздел v-if = "!
<script> var v = new Vue ({el: '#vueinstance', data: {name: '_appian', loginstatus: false}, методы: {say: function () {alert ('welcome' + this.name);}, switchLoginStatus: function () {this.loginStatus =! }); </script>Выполнение этого является экземпляром V. Это указание является вопросом, который должен понимать себя, поэтому я не буду говорить об этом здесь.
В приведенном выше примере, если V-IF заменяется V-SHOW, может быть получен тот же эффект. Как V-IF, так и V-Show-поддержка V-ELSE, но предыдущий элемент сестра тега, который связывает команду V-ELSE, должен иметь V-IF или V-SHOW.
В приведенном выше примере, просто нажав кнопку «Вход» или «Вход», запустит метод SwitchLoginStatus. Пока этот метод запускается, статус LoginStatus будет изменяться (переключение в TRUE и FALSE), тем самым изменяя изменение условия суждения V-IF в HTML. Основываясь на текущем логическом статусе LoginStatus, отображаемый раздел представляет собой раздел в разных состояниях.
В чем разница между V-Show и V-IF?
При переключении блоков V-IF VUE имеет локальный процесс компиляции/удаления, поскольку шаблоны в V-IF также могут включать в себя связывание данных или подкомпоненты. V-IF является реальным условным рендерингом, потому что он гарантирует, что условные блоки должным образом разрушают и восстанавливают слушателей событий и подкомпоненты в рамках условного блока во время переключения.
V -IF также ленивый: если условие является ложным во время начального рендеринга, ничего не сделано - локальная компиляция начинается, когда условие становится истинной в первый раз (компиляция будет кэширована).
Напротив, V -Show намного проще - элементы всегда собираются и сохраняются, просто просто переключается на основе CSS.
Вообще говоря, V-IF имеет более высокое потребление переключения, а V-Show имеет более высокое начальное потребление рендеринга. Следовательно, лучше часто переключать V-Show, и лучше менять V-IF, если условия не очень высоки во время выполнения.
Эта разница может не быть важной для вашего текущего развития, но вам все равно нужно обратить внимание и обратить внимание, потому что, когда развитие вашего проекта станет больше, это станет важным.
Используйте V-For для вывода списка
Если вы бизнесмен, который управляет платформой электронной коммерции, у вас должно быть много страниц, которые необходимо для того, чтобы отобразить результаты списка продуктов. Директива V-FOR позволяет зацикливать наш объект массива, произносится как «зацикливание каждого элемента в ArrayObj» на пути «элемента в ArrayObj».
В следующем примере мы будем использовать инструкцию V-FOR, чтобы забрать список продуктов. Каждый продукт будет в LI, где выход, цена и тип продукта продукта.
<div id = "vueinstance"> <ul> <li v -for = "el in products"> {{el.name}} - ￥ {{el. цена}} - {{el. категория}} </li> </ul> </div> <script> var v = new Vue ({el: '#vueinstance', data: {продукты: [{name: 'microphone', цена: 25, категория: 'Electronics'}, {name: 'Case Case', цена: 15, категория: 'аксессуары'}, {name: 'Cleanser', цена: 17, категория: 'Accessories'} {name: 'name: Цена: 70, категория: 'Electronics'}, {name: 'Mouse', цена: 40, категория: 'Electronics'}, {name: 'наушники', цена: 20, категория: 'Electronics'}, {name: 'Monitor', цена: 120, категория: 'Electronics'}}});Конечно, объект массива в данных может быть определен без приведенного выше определения. Мы можем импортировать его из базы данных или использовать запрос AJAX для его получения. Это только для демонстрации V-for.
Иногда нам может потребоваться получить соответствующий индекс продукта в объекте массива. Мы можем получить это с $ index.
//#1 <li v -for = "el in products"> {{$ index}} - {{el.name}} - ￥ {{el. цена}} - {{el. Категория}} </li> //#2 <li v -for = "(index, el) в продуктах"> {{index}} - {{el.name}} - ￥ {{el. цена}} - {{el. Категория}} </li>Вычисленные свойства
В сценарии применения расчета атрибутов он будет использоваться, когда существует переменное значение, которое необходимо рассчитать по другим переменным.
Например, если пользователь входит в число x в поле ввода, он автоматически вернется пользователю квадрату x² номера. Вам необходимо связывать данные ввода, а затем, когда данные будут изменены, он немедленно рассчитывает его квадрат.
<div id = "vueinstance"> введите число: <input type = "text" v-model = "value"> <p> Результат вычислений: {{square}} </p> </div> <Script> var v = new Vue ({el: '#VueInstance', data: {value: 1}, вычислено: {square: function () {return this.value * this.value;}}}); </script>Рассчитайте значения определения атрибутов, определяя серию функций, точно так же, как когда мы определяли объекты методов ранее. Например, квадратный метод используется для расчета переменной «квадрат», а возвратное значение его метода - продукт двух значений This.
Далее мы можем использовать вычисленные, чтобы сделать более сложный пример. Система случайным образом возьмет число в пределах 1 ~ 10. Пользователь может случайным образом ввести число в пределах 1 ~ 10 в поле ввода. Если ввод пользователя будет соответствовать случайному числу системы, игра будет успешной, в противном случае она потерпит неудачу.
<div id = "vueinstance"> введите число в 1 ~ 10: <input type = "text" v-model = "value"> <p> Результат расчета: {{resultMsg}} </p> </div> <cript> var v = new Vue ({el: '#vueinstance', data: {value: null, randnum: 5 // Первое случайное число - 5}, методы: {getrandnum: function (min, max) {return math.floor (math.random () * (max - min + 1) + min;}},}, stractms: stractms embersm: informms: stractmm: {stractmy: inbordms: informm. (this.value ==PostScript
До сих пор вы смогли освоить основное использование Vue, одной из самых простых и красивых рамок мира. Его конструкция имеет свои полные идеи дизайна и становится все более и более популярной. Эта структура небольшая и достаточно легкая, чтобы принести вам более плавный пользовательский опыт работы в вашей разработке и эффективно повысить эффективность разработки. Я дал серию примеров выше, вы освоили их все?