По сути, мы разобрались со всеми рекомендациями на официальном веб -сайте: http://vuejs.org/guide/index.html Здесь мы принимаем приложение Todo List в качестве примера для объединения всех соответствующих только одних. Весь код в этой статье находится на GitHub https://github.com/lihongxun945/vue-todolist
Экземпляр VUE
Приложение Vue запускается с помощью загрузки экземпляра root vue, и экземпляр Vue создается как это:
var vm = new Vue ({// options})Экземпляр на самом деле является виртуальной машиной в MVVM. Все атрибуты в данных в входящем объекте конфигурации будут установлены на экземпляр. Чтобы избежать конфликтов именования, встроенные методы Vue будут установлены на экземпляр с свойствами, начинающимися с $.
Пример пройдет через следующий жизненный цикл от создания до разрушения:
Во время инициализации примерно три шага:
• Мониторинг привязки данных, то есть мониторинг данных
• Сопровождение шаблонов
• Вставьте документ или замените соответствующий DOM
# Vue Basic Syntax
Привязка данных
Vue использует синтаксис Mastache. Обычно используемые синтаксисы связывания делятся на несколько категорий:
• Синтаксис Mastache, такой как {{data}} {{data | фильтр}}
• Свойства связывания V-BIND, такие как V-Bind: Href, V-Bind: Class
• V-On Suppling Events, такие как V-On: Click, V-on: отправить
Среди них V-*-директива
пример:
<div v-bind: class = "[classa, isb? classb: '']">
Расчет атрибута
Vue поддерживает очень интересный синтаксис расчета атрибута. Вы можете указать, что атрибут рассчитывается другими атрибутами, поэтому вам не нужно использовать $ watch для его реализации:
var vm = new vue ({el: '#Example', data: {a: 1}, вычисляется: {// a вычисленный getter b: function () {// `this` указывает на экземпляр виртуальной машины, вернуть это.a + 1}}})## Синтаксис, связанный с управлением процессом и списком, включает в себя `v-if`,` v-show`, `v-else`,` v-for`
Форма
Двусторонняя привязка данных:
<input type = "text" v-model = "message" Placeholder = "Edit Me">
<input type = "fackbox" id = "jack" value = "jack" v-model = "checkednames">
## Метод реализации анимации такой же, как и у Angular и React, и реализуется путем добавления и удаления классов. # Компонент
Основное использование компонентов
Определение компонента включает две части:
1 Создать класс компонентов:
var profile = vue.extend ({template: "<div> lily </div>"});2 Зарегистрируйте Tagname:
Vue.component ("me-profile", профиль);
Таким образом, мы можем использовать этот компонент через Tagname:
<div id = "todo"> <my-profile> </my-profile> <form v-on: opper = "add" v-on: propect.prevent> <input type = "text" v-model = "input"/> <input type = "Vade" value = 'add'/> </form> ... </div>
Vue.component ("me-profile", профиль); является глобальной регистрацией. Если он используется только на определенной странице, он может быть зарегистрирован локально:
var vm = new Vue ({el: "#todo", компоненты: {"my-profile": profile}, ...}Поскольку наш экземпляр VUE связан с элементом TODO, он недействителен, если My-Profile находится за пределами этого элемента. Только путем полоки его внутрь будет инициализирован этим экземпляром Vue.
Примечания:
Параметры, которые могут быть переданы конструктором VUE, могут в основном использоваться на vue.extend, но вам необходимо обратить внимание на два параметра EL и данных. Чтобы избежать совместного использования одного и того же объекта между разными экземплярами, это более надежно возвращать новый объект через функцию:
var mycomponent = vue.extend ({data: function () {return {a: 1}}})Поскольку параметры одинаковы, они на самом деле одно и то же, но один - это компонент, а другой используется для начала VUE.
Примечания на шаблонах
Поскольку Vue является собственным DOM, некоторые пользовательские теги могут не соответствовать стандарту DOM. Например, если вы хотите настроить TR в таблице, если вставка моего компонента напрямую не соответствует спецификации, вы должны написать это так:
<Таблица> <tr IS = "my-component"> </tr> </table>
Реквизит передает данные
В VUE каждый компонент является независимым и не может и не должен непосредственно получить доступ к данным родительского класса. Так очень ли это похоже на метод React для передачи данных в подкомпоненты через реквизит?
В отличие от React, подкомпоненты в Vue должны сначала объявить свои собственные реквизиты:
var profile = vue.extend ({props: ["name"], шаблон: `<h2> {{name}} 's List </h2> <h4> {{name}} - хорошая девушка </h4>`});Затем мы можем передать такие параметры при использовании профиля:
<my-profile name = 'lily'> </my-profile>
Это должно передавать параметры через литералы, поэтому переданное значение должно быть строкой. Другой способ-динамически передавать параметры и пройти параметры через v-bind. Вы можете связать данные в двусторонних или проходить не строгие параметры:
<my-profile v-bind: name = 'input'> </my-profile>
Если v-bind является строкой, это соответствующее поле в данных родительского компонента, например, вышеуказанное значение входа, которое связано в обоих направлениях. Если это число, это связано с числом.
VUE также может явно указать одностороннее или двустороннее привязку данных:
<!-По умолчанию, привязка к одностороннему вниз-> <Ребенок: msg = "parentmsg"> </child> <!-явное двустороннее связывание-> <Ребенок: msg.sync = "parentmsg"> </child> <!-Явное одноразовое привязка-> <child: msg.once = "parentmsg"> </ild>
Реквизит проверка
Хороший компонент должен всегда проверять, что параметры сначала верны, и также может потребоваться установить значения по умолчанию некоторых параметров:
var profile = vue.extend ({input: {type: string}});Компонентная компонента родительского ребенка
Отчеты, упомянутые выше, на самом деле являются способом для родительского компонента передавать сообщения дочернему компоненту.
В детском компоненте есть родитель. Однако теперь мы должны избегать этого. Поскольку сам компонент должен инкапсулировать независимую логику, если вы напрямую получаете доступ к данным родительского компонента, он разрушит инкапсуляцию компонента.
Таким образом, мы все еще должны общаться через родительский компонент, передающий реквизиты дочернему компоненту.
Конечно, реквизит может сделать только обратные вызовы. Этот вопрос обсуждался в React. Метод реагирования состоит в том, чтобы использовать реквизиты для передачи функции обратного вызовов в детскую компонент. На самом деле, мне не очень нравится этот образ для передачи функций обратного вызова, я предпочитаю путь событий. Vue Neutronics может общаться с родительским компонентом через события. Отправка сообщений в родительский компонент проходит через это. $ Dispatch, а отправка сообщений в детскую компонент проходит через это. $ Boardcast. Здесь сообщения отправляются всем родителям и детям, но как только будет выполнен обратный вызов, он остановится, если функция обратного вызова явно вернет True.
Мы разделили предыдущий список TODO на различные компоненты для его реализации, чтобы мы могли испытать, как общаться с компонентами в двусторонней части. Мы разделили два компонента, а именно список и форму.
Форма отвечает за обработку пользовательского ввода и отправку сообщения добавления в родительский компонент при отправке формы. Код заключается в следующем:
var form = vue.extend ({props: {username: {type: string, default: "unnamed"}}, data: function () {return {input: "",};}, шаблон: `<h1> {{usErname}} 's tod-списке </h1> <form von: add von von von: vonpre v-in: vonpre v-on: von-von: vonpre. type = "text" v-model = "input"/> <input type = "Отправить" value = 'add'/> </form> `, методы: {add: function () {this. $ dispatch (" Add ", this.input);Список отвечает только за отображение списка и обработку операций проверки пользователей. После получения сообщения ADD, оно добавит на себя запись:
var list = vue.extend ({template: `<ul> <li v-for = 'todo in list'> <label v-bind: class =" {dod: todo.done} "> <input type =" chparebox "v-model =" todo.done "/> {{todo.title}} <//lips> </lips> </li initlist: {type: array}}, data: function () {return {list: []}}, события: {add: function (input) {if (! input) return false;Затем, поскольку это два компонента, конечно, экземпляр VUE необходим для начала стартапа, наш экземпляр заключается в следующем:
var vm = new Vue ({el: "#todo", компоненты: {"todo-form": form, "todo-list": list}, события: {add: function (input) {this. $ broadcast ("add", input);}}});Обратите внимание, что на самом деле форма и список являются логически параллельными компонентами, поэтому у них нет отношений отца и сына, и все они дети виртуальной машины. Здесь виртуальная машина пересылает его в список после получения сообщения формы.
HTML -код проще:
<div id = "todo"> <todo-form username = 'lily'> </todo-form> <todo-list> </todo-list> </div>
Слот
Слот может использоваться для вставки HTML, отображаемого из родительского компонента в дочерний компонент. Неясно, когда это потребуется, и это слишком инвазивно для дочернего компонента.
Динамические компоненты коммутатора
Эта функция кажется немного избыточной. Во многих случаях мы должны переключаться через логический код, а не через встроенные встроенные компоненты. Тем не менее, очень удобно реализовать функцию, аналогичную переключению вкладок.
Здесь мы добавляем список страницы в Todo. Поэтому сначала нам нужно изменить виртуальную машину в компонент, который называется TODO, которая является всей страницей Todo:
var todo = vue.extend ({template: `<div id =" todo "> <todo-form username = 'lily'> </todo-form> <todo-list> </todo-list> <lot> не показывать </slot> </div>`, components: edodo-form ": Add: function (input) {this. $ Broadcast ("Add", Input);На самом деле, первая линия изменений - первая строка.
Тогда нам нужно создать компонент About:
var about = vue.extend ({template: `<div id =" about "> <p> о списке todo v0.1.0 </p> <p> содержание здесь </p> </div>`});Далее является ключевым моментом. Мы хотим создать виртуальную машину, которая отвечает за переключение этих двух страниц:
var vm = new Vue ({el: "body", data: {currentView: "todo"}, компоненты: {"todo": todo, "О": о}});Здесь мы определяем поле CurrentView, которое, конечно, может быть каким -либо именем, а затем используем специальную тег компонента для компонентов переключения:
<Component: is = "currentView"> </component> <ul> <li> <babel> <input type = "radio" name = 'page' value = 'todo' v-model = 'currentyview'> home </label> </li> <li> <label> <input type = "radio = 'page' value = 'about' v-model = 'currentwie
В приведенном выше коде есть две вещи:
• Используйте специальную компонент тегов, а затем используйте свойство: IS для компонентов переключения.
• Радио изменить поле CurrentView с помощью двусторонней привязки, чтобы вы могли переключаться после нажатия.
Принцип реализации привязки данных
VUE вызывает двунаправленную реактивную реактивную реакцию, которая может быть переведена как адаптивное связывание данных. Он реализован внутри с помощью методов Getter и Setter, определенных ES5, поэтому он не поддерживает IE8 и следующие браузеры. В этой реализации есть две простые вещи:
• Если вы напрямую добавляете и удаляете атрибуты на данные, их невозможно обнаружить. Как правило, удаление не будет возможно, но может быть добавлено динамически. В настоящее время он должен быть добавлен через VM. $ Set («Имя», значение).
• Изменения внутри объекта не могут быть обнаружены, то есть они могут обнаружить только изменения в свойстве данных. Если Data.a является объектом, то Data.ab = 1 Это изменение не может быть обнаружено. В этом случае вы должны создать новый объект и назначить его Data.A.
Асинхронное механизм обновления
Обновление Vue для DOM асинхронно! Этот асинхронный выполняется в асинхронной очереди, но эта асинхронная очередь будет выполнена в текущем цикле событий. Поэтому, если вы изменяете данные, неправильно перейти в DOM, чтобы выполнить операцию запроса. В настоящее время DOM еще не обновлен. Правильный способ сделать это:
vm.msg = 'Новое сообщение' // Изменение dataVm. $ el.textContent === 'Новое сообщение' // falsevue.nexttick (function () {vm. $ el.textContent === 'Новое сообщение' // true})Или это:
vm. $ nexttick (function () {this. $ el.textContent === 'Новое сообщение' // true})Потребовалось много времени, чтобы прочитать компоненты. Вот еще один момент: директива
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.