представлять
Vue.js - это библиотека, используемая для создания интерфейсов веб -приложений
Технически, Vue.js фокусируется на слое ViewModel режима MVVM, который соединяет модели представления и привязки данных двумя способами. Фактический формат работы и вывода DOM абстрагируется в инструкции (директивы) и фильтры (фильтры)
В области философии постарайтесь сделать API привязки данных MVVM максимально простым. Модульность и композиция также являются важными конструктивными соображениями. Vue не является комплексной структурой, он предназначен для того, чтобы быть простым и гибким. Вы можете использовать его для быстрого прототипа, или смешать и сопоставить с другими библиотеками, чтобы определить стек переднего дня.
Vue JS API относится к Angularjs, nockoutjs ractive.js rivets.js. Несмотря на сходство, я считаю, что Vue.js предоставляет ценный способ получить вашу ценность в некоторых существующих рамках сейчас
Даже если вы уже знакомы с некоторыми из этих терминов, рекомендуется передать следующий обзор концепций, поскольку концепции этих терминов могут отличаться ниже Vue.js
Обзор концепции
ViewModel
Объект, синхронизирует модели и представления. В Vue.js ViewModels является созданным конструктором Vue или подклассом
var vm = new Vue ({ / * options * /})Это основной объект, с которым вы будете взаимодействовать в качестве разработчика, использующего vue.js. Для получения более подробной информации см. Класс: Vue.
Вид
Фактический HTML/DOM, увиденная пользователем
Vm. $ el // Взгляд
При использовании Vue.js вы вряд ли коснетесь операции DOM, за исключением ваших собственных пользовательских инструкций. Когда данные обновляются, обновление представления будет автоматически запускается. Обновление представления может быть точно достигнуто до каждого узла Testnode. Они также находятся в пакете и выполнены асинхронно, чтобы обеспечить лучшую производительность.
Модель
Это слегка модифицированный объект JavaScript
Vm. $ Data // Модель
В vue.js модель - это просто простой объект JavaScript, объект данных, вы можете манипулировать их свойствами и просмотреть модели, наблюдать за их Vue.js использует ES5 Getter/Setter для преобразования свойств в объекте данных HU, что позволяет прямая работа без грязной проверки.
Объект данных будет иметь мутации в соответствующее время, поэтому его изменение то же самое, что и изменение данных VM. $ По ссылке. Это также облегчает несколько экземпляров ViewModel, чтобы наблюдать за одной и той же частью данных.
Для получения технических данных, пожалуйста, обратитесь к параметрам экземпляров: данные.
Директивы
Частный HTML -атрибут говорит Vue.js сделать некоторую обработку о DOM
<div v-text = "Сообщение"> </div>
Элемент DIV здесь имеет инструкцию V-текста, а значение-сообщение. Это означает, что можно сказать vue.js, чтобы сохранить содержание этого девственного узла, синхронизированного с атрибутом сообщения в ViewMode
Инструкции могут инкапсулировать любую операцию DOM. Например, V-ATTR работает на элементе атрибута, клонирует V-Repeat элемент, основанный на массиве, V-On Afful Alling Event Suilding, мы обсудим его позже.
Привязки усов
Вы также можете использовать привязки в стиле усов, в тексте и свойствах. Они переведены в директиву V-Text V-ATTR. Например:
<div id = "person-{{id}}"> hello {{name}}! </div>Хотя это удобно, есть несколько вещей, на которые вам нужно обратить внимание:
Если будет установлен атрибут SRC с изображением, будет отправлен HTTP-запрос, поэтому, когда шаблон будет анализироваться в первый раз, лучше использовать V-ATTR
При анализе HTML, Internet Explorer удалит неверный атрибут внутреннего стиля, поэтому, если мы хотим поддержать IE привязки CSS, я всегда использую V-стиль
Внутри v-HTML вы можете использовать три брекеты для обработки не вмешанного HTML, но это приведет к потенциальным атакам XSS и может открыть окна. Следовательно, рекомендуется сделать это только тогда, когда данные абсолютно безопасны, или чистые ненадежные HTML через пользовательский трубопровод фильтр
Фильтры
Эти необработанные данные можно обработать с помощью функций перед обновлением представления. Они используют директиву «трубопровода» или привязку:
<div> {{сообщение | капитализируйте}} </div>Теперь, прежде чем текстовое содержание DIV будет обновлено, значение этого сообщения будет обработано с помощью функции загламента. Для получения подробной информации, пожалуйста, см. Фильтры в глубине.
Компоненты
В vue.js компонент - это простой конструктор модели представления, зарегистрированный в Vue.component (id, Constructor). С связанным идентификатором, директива V-компонента для шаблона другой модели представления может быть вложена. Этот простой механизм делает объявленную модель представления повторно используемым и объединенным таким образом, аналогично веб -компонентам без необходимости в последнем браузере или тяжелых полифиллах. Разбивая приложение на более мелкие компоненты, результатом является очень развязанная и поддерживаемая база кода. Для получения более подробной информации см. Complosing ViewModels.
Быстрый пример
<div id = "demo"> <h1> {{title | Верхишер}} </h1> <ul> <li v-repeat = "todos" v-on = "click: dode =! Don"> {{content}} </li> </ul> </div> var demo = new Vue ({el: '#demo', data: {title: 'todos', todos: [{ind: true: true, content: 'изучить javascript'}, {dode: false, content: 'Learn vue.js'}]}})Грубый перевод, пожалуйста, укажите на любые ошибки