Конструктор
Каждое приложение Vue.js начинается с создания корневого экземпляра Vue через конструктор Vue:
var vm = new Vue ({// options})Экземпляр VUE на самом деле является ViewModel, описанным в режиме MVVM - поэтому в документах часто используется виртуальная машина переменной.
При создании VUE вам необходимо пройти в объекте опции, который может содержать такие варианты, как данные, шаблоны, элементы монтирования, методы, крючки для жизненного цикла и т. Д. Все варианты могут быть просмотрены в документации API.
Конструктор VUE может быть расширен для создания многоразовых конструкторов компонентов с предопределенными параметрами:
var mycomponent = vue.extend ({// опции расширения}) // Все экземпляры mycomponent` будут созданы с предварительно определенными параметрами расширения var mycomponentinstance = new MyComponent ()Хотя экземпляры расширения могут быть созданы императивными, в большинстве случаев конструктор компонента зарегистрирован в качестве пользовательского элемента, а затем используется декларативно в шаблоне. Мы подробно объясним компонентную систему позже. Теперь вам просто нужно знать, что все компоненты Vue.js фактически являются расширенными экземплярами VUE.
Свойства и методы
Каждый экземпляр Vue будет прокси -сервером в своем объекте данных:
VAR DATA = {a: 1} var vm = new Vue ({data: data}) vm.a === data.a // -> true // Свойства настройки также повлияют на исходные данные vm.a = 2data.a // -> 2 // ... наоборот.Обратите внимание, что только эти прокси -атрибуты отзывчивы. Если новое свойство добавляется в экземпляр после создания экземпляра, оно не запускает обновление представления. Мы подробно обсудим систему ответов позже.
В дополнение к этим атрибутам данных экземпляры VUE разоблачают некоторые полезные атрибуты и методы экземпляра. Эти свойства и методы имеют префикс $, чтобы отличить от атрибутов данных прокси. Например:
VAR DATA = {a: 1} var vm = new Vue ({el: '#Example', data: data}) vm. $ data === data // -> truevm. $ el === Document.getElementById ('Пример') // -> true // $ Смотреть -это метод экземпляра. Изменен})Обратитесь к документации API, чтобы просмотреть все свойства и методы экземпляра.
Жизненный цикл экземпляра
Экземпляр VUE имеет серию шагов инициализации при его создании - например, он требует установления наблюдений данных, составления шаблонов и создания необходимых привязков данных. В процессе он также позвонит на несколько жизненных циклов, предоставляя возможность выполнить возможность для пользовательской логики. Например, созданный крюк вызывается после создания экземпляра:
var vm = new vue ({data: {a: 1}, создан: function () {// `this` указывает на консоль экземпляра VM.Есть также некоторые другие крючки, которые называются на разных этапах жизненного цикла экземпляра, такие как скомпилированные, готовые, уничтоженные. Этот крючок указывает на экземпляр Vue, который его вызывает. Некоторые пользователи могут спросить, имеет ли Vue.js концепция «контроллера»? Ответ, нет. Пользовательская логика компонента может быть разделена на эти крючки.
Диаграмма жизненного цикла
Следующий рисунок иллюстрирует жизненный цикл экземпляра. Вам не нужно сразу выяснять, но это поможет в будущем.
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.