Директива
Хотя кажется, что, хотя это похоже на определение в угловой, директива является расширением функций DOM, директива Vue намного слабее. Поскольку компонент VUE на самом деле содержит операции на DOM, большую часть времени, когда мы пишем общий компонент, это компонент, а не директива, а в угловой части мы пишем общий компонент, обычно это директива.
Поэтому я сказал, что директива Vue намного слабее, чем угловой, или можно сказать, что она намного чище. Это расширение функций DOM, а не инкапсулировать логику, связанную с DOM. Если вы заинтересованы, вы можете понять, сравнивая эти две библиотеки пользовательского интерфейса:
• vux https://github.com/airyland/vux
• Angular Bootstrap https://github.com/angular-ui/bootstrap
Для сравнения, мы обнаружим, что в VUE мы фактически инкапсулируем общий компонент (на самом деле, независимо от того, является ли он общим или нет) является компонентом, но в угловой он является директивой, потому что контроллер в угловом может только создать область применения $. Это можно просто задуматься в Vue Directive = Angular Directive + Controller. Как упоминалось ранее, многие дизайны VUE похожи на Angular2. Директива в Vue может быть в основном эквивалентна директиве в Angular2, но не путайте с директивой в Angular.
Чтобы избежать в заблуждения, угловая директива больше не будет сравниваться позже.
жизненный цикл
Жизненный цикл разделен на три шага:
• Связывайте триггеры, когда он связан с элементом DOM в первый раз
• Привязка обновления будет запускаться сразу после завершения и будет запускаться всякий раз, когда параметры будут обновлены в будущем.
• Несоблюдение триггеров при рассеянном и DOM -элементах непредвзято
API так кратко. Полем Полем
Среди них обновление является наиболее важной вещью, то есть, когда директива получает обновление значения, будет выполнен соответствующий код. Параметры, полученные функцией обновления, - это значения, передаваемые пользователем через ATTR.
Давайте реализуем простую директиву ниже, которая используется для проверки ввода контента по списку TODO (проверка формы). Основная структура директивы заключается в следующем:
Vue.directive ("minlength", {bind: function () {}, update: function (value) {}, unbind: function () {}});Затем нам нужно выполнить проверку, когда пользователь вводит. Здесь мы реализуем простую проверку minlength, код заключается в следующем:
Vue.directive ("minlength", {bind: function () {var self = this; var el = this.el; el.addeventlister ("keydown", function (e) {if (e.keycode === 13) {if (el.value.length <self.minlength) {e.preventDef ();}}}});); el.parentnode.queryselector ("Кнопка, [type = 'uppert']"); {}});Основная логика связывает события на стадии связывания, а затем делает суждения на основе значения Minlength, передаваемого во время обновления.
В настоящее время директива должна быть для достижения аналогичных функций, и, конечно, есть еще много деталей использования, поэтому я не буду вдаваться в подробности. Директива не является очень важной частью в VUE. Люди обычно пишут компонент при написании кода.
Фильтр и микшины выглядят относительно просто, пропустите его.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.