Vue.js-это библиотека для создания веб-интерфейсов, управляемых данными. Цель Vue.js состоит в том, чтобы реализовать адаптивные компоненты привязки данных и комбинированное представление с помощью самых простых API. (Это официальное объяснение!)
Редактор никогда не использовал AngularJS и не использовался. Я не могу объяснить различия в трех подробно. Если вы хотите знать, есть официальный анализ. Пожалуйста, нажмите здесь, чтобы просмотреть его.
Редактор занимался фронтальным развитием более года. Вначале было слишком много технологий в фронт-энде-разработке. Редактор был бессильным и не мог принять во внимание. После понимания он решил изучить путь обучения у местных базовых слияний JS и JQUERY. Редактор использует Vue.js из -за потребностей бизнеса. Почему вы не выбираете angularjs? На самом деле, вы не можете отказаться от jQuery одновременно. Vue.js и jQuery могут быть идеально совместимыми. Из -за этого проекта редактор долгое время работал сверхурочно и постоянно учился, чтобы избежать увеличения времени разработки проекта. Без лишних слов, давайте начнем некоторую резюме обучения редактора. Если вы плохо пишете, не привыкайте к этому. Написание статей всегда была моей слабостью. Полем Полем Полем
Вот пример VUE, как родительская цепь
Дочерний компонент может быть передан. К корнем экземпляру можно получить доступ с использованием этого.root. Родитель имеет массив. Конечно, в проекте наши компоненты не могут иметь только один или два. Когда нас слишком много, нам трудно вспомнить местоположение компонента у детей. Мы можем использовать директиву V-Ref, чтобы создать крючок для нашего компонента. Этот крючок является индексом, когда наши другие компоненты получают доступ к компоненту.
// Это один из моих компонентов <msg v-ref: msgs> </msg> // В настоящее время мы установили индекс MSG для этого компонента MSG // Мы можем получить доступ к компоненту var vm = new Vue ({}); var kids = vm. $ refs.msgs // Доступ к нашим дочерним компонентам таким образом // v-ref-это массив или объект, который представляет собой набор компонентов, которые мы создаем все ссылки.Здесь я покажу вам фотографию и посмотрю на контент, связанный с родителями, детьми и $ refs (кажется, что картина немного размыта, и она не будет полной динамичной картиной. Это смущает и не может ясно видеть. Вы можете создать демонстрацию и распечатать!)
Хотя мы можем напрямую получить доступ к компонентам во всем экземпляре таким образом, это не рекомендуется сделать это, потому что для детей очень плохо изменить состояние родительского компонента, что сделает родительские и дочерние компоненты плотно связанными. В идеале, каждый компонент может изменить свое собственное состояние, потому что область использования каждого компонента является независимой;
В этом случае Vue также приносит нам свои индивидуальные события
Используйте $ dispatch () для отправки событий и пузырьков событий вдоль родительской цепи;
Используйте $ Broadcast () для трансляции событий, а события передаются всем потомкам.
Это выглядит немного абстрактно, это легче понять с примером
// $ Dispatch () Bubble Case <!-пример-> <div Id = "app"> <!-компонент компонента 1-> <section> <div> <label for = "> Данные MSG: </label> {{msg}} </div> <!-subcomponent-> <sg> </msg> </spect> </div> <template id =" msg> </msg> </spect> </div> <tepmplate = "msg>" </msg> </spect> </div> <tepcomponeton v-model = "msg"> <a href = "javascript:;" @Click = "ADD_DATA"> Добавить </a> </div> </template> <script> vue.component ('msg', {// Синтаксис сахар используется для непосредственного регистрации компонента, а Simple и Shortcut Template: '#msg', data: funct Это событие, метод $ dispatch () будет запускается; это. $ parent.add (par_msg); Событие, которое прислушивается к соответствующему подкомпоненту ответов 'add_msg': function (msg) {// add_msg - это метод, используемый для прослушивания подкомпонента.Прочитав этот код, я полагаю, что все знают, что использование $ dispatch (). На самом деле, в нем есть два параметра. Первый параметр заключается в том, что родительский компонент прослушивает имя метода в объекте событий дочернего компонента. Два должны быть последовательными; Второй параметр - это данные, обновленные дочерним компонентом, который также передается данным, которые должны быть обновлены синхронно для родительского компонента. Затем родительский компонент использует этот параметр для выполнения соответствующих операций.
// Использование метода $ broadcast () такое же, как и у $ dispatch (). Разница в том, что объект события создается в детском компоненте, а функция, запускаемая на родительском компоненте, наоборот. Здесь мы хотим сказать, что если данные дочернего компонента полностью зависят от данных родительского компонента, то нет необходимости использовать общий метод доставки событий. Вам нужно только получить данные родительского компонента через реквизиты и связать их с дочерним компонентом.
<!-- Component Communication 2 $broadcast() method--><section><h3>Data source added by the parent component: </h3><div><label for="">id:</label><div><input type="text" v-model="id"></div></div><div><label for="">Name:</label><div><input type="text" v-model="name"></div></div><div><label for="">Host:</label><div><input type="text" v-model="inst"></div></div><div><label for="">Host:</label><div><input type="text" v-model="inst"></div></div><div><label для = ""> </label> <div> <a href = "javascript:;" @click = "add_table"> Добавить </a> </div> </div> <h3> Следующая таблица-информация о дочернем компоненте: </h3> <!-Связывайте данные родительского компонента Table_data с дочерним компонентом-> <broadcase: data = "table_data"> </broadcase> </section> <template id = "broadcase"> <div> <table> <thead> <tr> <th> id </th> <th> name </th> <Th> hobbies </th> </tr> </tbody> <tr v-for = "list в данных"> <Td> {{list.id}} </td> <td> {{{{td.name}}} </td> <td> {{td>} </td> <td> {{td>}} </td> <td> list.inst}} </td> </tr> </tbode> </table> </div> </template> <script> vue.component ('broadcase', {// Это синтаксис сахар, используемый для регистрации компонента, и простые и краткотичные шаблоны: «##broadsate», «Данные»], // Прости Данные. '#app', data: {table_data: [{id: 1, name: 'gjei', inst: 'gjweir'}, {id: 2, имя: 'jiuyer', inst: 'oiuyt'}]}, методы: {add_table: function () {var set = {id: ther, name: ther. this.inst}; this.table_data.push (set); // this. $ broadcast ('test', set);Вы можете нажать здесь, чтобы проверить два примера, упомянутые выше. Файл был загружен в личное пространство Vue Vue Commoning Communice Demo
Когда я закончил писать это, я оглянулся и увидел, что контент, который я написал, казался немного грязным, что было действительно стыдно! Я думал о том, чтобы написать блог и создать свою собственную библиотеку заметок давным -давно, но когда я пытался написать его раньше, я действительно не мог этого сделать. Недавно я решил настаивать на том, чтобы писать, независимо от того, как я его пишу. Что, если мой стиль письма внезапно поправится однажды!
На самом деле, приложение не очень сложно. На самом деле он обеспечивает соответствующий мониторинг интерфейса API. Как управлять и изменять фактическое приложение проекта, все еще должно быть написано самим. Ключ - улучшить наш уровень JS. В конце концов, есть все более и более сложные веб -приложения! Я надеюсь, что студенты, которые любят фронт-энд, могут поощрять друг друга на пути к JS.