База
В дополнение к встроенным директивам Vue.js также разрешает регистрацию пользовательских директив. Пользовательские директивы предоставляют механизм для картирования изменений в данных в поведение DOM.
Глобальная пользовательская директива может быть зарегистрирована с использованием метода vue.directive (id, определение), который получает два идентификатора инструкции по параметрам и объекты определения. Вы также можете зарегистрировать локальную пользовательскую директиву, используя опцию директивы компонента.
Функция крюка
Определение объекта может предоставить несколько функций крюка (все необязательно):
• Привязка: вызывается только один раз, и вызывается, когда инструкция связана с элементом впервые.
• Обновление: первый вызов вызывается сразу после связывания с начальным значением в качестве параметра, а затем, когда изменяется граничное значение, параметры являются новым значением и старым значением.
• Несмотря на то, что вы называете только один раз, когда инструкция не снята из элемента.
Пример
Vue.directive('my-directive', { bind: function () { // Preparation work // For example, adding an event processor or a high-consuming task that only needs to be run once}, update: function (newValue, oldValue) { // Work when value is updated// It will also be called once with the initial value as a parameter}, unbind: function () { // Cleaning work // For example, Удалить слушатель событий, добавленный bind ()}})После регистрации вы можете использовать его в шаблоне Vue.js (не забудьте добавить префикс V-):
<div v-my-directive = "somevalue"> </div>
Когда необходима только функция обновления, вы можете передать функцию вместо объекта определения:
Vue.directive ('my-directive', function (value) {// Эта функция используется как Update ()})Свойства директивы экземпляра
Все функции крючка будут скопированы в фактический объект директивы, и это внутри крючка указывает на этот объект директивы. Этот объект раскрывает некоторые полезные свойства:
• EL: элемент, связанный с директивой.
• VM: контекст ViewModel, которая владеет инструкцией.
• Выражение: выражение директивы, исключая параметры и фильтры.
• ARG: параметры директивы.
• Имя: имя директивы, без префикса.
• Модификаторы: объект, содержащий модификаторы для директив.
• Дескриптор: объект, содержащий результаты диапазона директивы.
Вы должны рассматривать эти свойства как только для чтения и не изменять их. Вы также можете добавить пользовательские свойства к объекту директивы, но будьте осторожны, чтобы не перезаписать существующие внутренние свойства.
Пример:
<div id = "demo" v-demo: hello.ab = "msg"> </div>
Vue.directive ('demo', {bind: function () {console.log ('demo bound!')}, Обновление: function (value) {this.el.innerhtml = 'name -' + this.name + '<br>' + 'Expression -' + this.expression + '<br>' + ' + thise.Arg +' <brzer> Json.stringify (this.modifiers) + '<br>' + 'value -' + value}}) var demo = new Vue ({el: '#demo', data: {msg: 'hello!'}})Объект буквального
Если директива требует нескольких значений, вы можете пройти в буквальном языке JavaScript. Помните, что директивы могут использовать любое законное выражение JavaScript:
<div v-demo = "{color: 'белый', текст:" Привет! " } "> </div>
Vue.directive ('demo', function (value) {console.log (value.color) // "белая" console.log (value.text) // "Привет!"})Буквальный модификатор
Когда директива использует буквальный модификатор, его значение будет обрабатываться как обычная строка и передавать методу обновления. Метод обновления будет вызван только один раз, потому что нормальная строка не может отвечать на изменения данных.
<div v-demo.literal = "foo bar baz">
Vue.directive ('demo', function (value) {console.log (value) // "foo bar baz"})Элементная директива
Иногда мы хотим использовать директивы в виде пользовательских элементов, а не в виде функций. Это очень похоже на директиву Angular "E". Инструкции по элементам можно рассматривать как легкий компонент. Вы можете зарегистрировать пользовательскую директиву элемента, например, следующее:
Vue.elementDirective ('my-directive', {// api bind: function () {// Работа this.el ...}})Не пишите так:
<div v-my-directive> </div>
Напишите так:
<my-girective> </my-directive>
Инструкция элемента не может принять параметры или выражения, но она может прочитать характеристики элемента, чтобы определить его поведение.
В отличие от обычных инструкций, инструкции по элементам являются окончательными, что означает, что, как только Vue столкнется с инструкцией элемента, она пропустит элемент и его детские элементы - только сама инструкция элемента может действовать на элементе и его детских элементах.
Расширенные варианты
параметры
Пользовательские директивы могут получать массив параметров, указав список функций, а компилятор Vue автоматически извлечет эти функции связанных элементов. Например:
<div v-example a = "hi"> </div>
Vue.directive ('Пример', {params: ['a'], bind: function () {console.log (this.params.a) // -> "hi"}})Этот API также поддерживает динамические свойства. this.params [ключ] будет автоматически обновлена. Кроме того, можно указать обратный вызов для вызова при изменении значения:
<div v-example v-bind: a = "somevalue"> </div>
Vue.directive ('Пример', {params: ['a'], paramwatchers: {a: function (val, oldval) {console.log ('a Изменен!')}}})Подобно реквизиту, имя директивного параметра использует стиль Camelcase в JavaScript, а стиль кебаба соответствует HTML. Например, предположим, что в шаблоне есть параметр «Отключить», доступ к нему в JavaScript с `disableFect`.
глубокий
Если на объекте используется пользовательская директива, а обновление запускается при изменении внутренних свойств объекта, укажите Deep: true в объекте определения директивы.
<div v-my-directive = "obj"> </div>
Vue.directive ('my-directive', {deep: true, update: function (obj) {// вызывается, когда вложенные свойства `obj` reame}})двойной
Если директива хочет написать данные в экземпляр Vue, укажите Twoway: True в объекте определения директивы. Эта опция позволяет использовать это. Set (значение) будет использоваться в директивах:
Vue.directive ('Пример', {twoway: true, bind: function () {this.handler = function () {// записать данные обратно в vm // Если директива связывает v-example = "abc" this.handler)}, unbind: function () {this.el.removeeventlistener ('input', this.handler)}})Принятие
Прохождение Acceptatement: True позволяет пользовательским директивам принимать встроенные заявления, как V-on:
<div v-my-directive = "a ++"> </div>
Vue.directive ('my-directive', {acceptStatement: true, update: function (fn) {// Входящее значение-это функция // оператор "a ++" будет рассчитываться в рамках экземпляра принадлежности, когда оно называется}})Используйте мудро, потому что обычно вы хотите избежать побочных эффектов в своем шаблоне.
Терминал
1.0.19+
VUE собирает модули, рекурсивно пересекая дерево DOM. Но когда он сталкивается с терминальной директивой, он перестает пересекать элементы потока этого элемента. Эта директива возьмет на себя задачу составления этого элемента и его потомков. V-IF и V-FOR являются терминальными директивами.
Написание пользовательских директив терминала является темой высокого уровня и требует лучшего понимания процесса компиляции Vue, но это не означает, что невозможно написать пользовательские директивы терминала. Используйте терминал: true, чтобы указать пользовательскую директиву терминала, а также может потребоваться использовать Vue.FragmentFactory для компиляции частичной. Вот пользовательская директива терминала, которая составляет свой шаблон содержимого и вводит результаты в другое место на странице:
var FragmentFactory = vue.FragmentFactoryVar remove = vue.Util.removevar createanchor = vue.util.createanchorvue.directive ('inject', {terminal: true, bind: function () {var container = document.getelementbyid (this.Arg) this.Anchor = createAnchor (v-inej удалить (this.el) var factory = new FragmentFactory (this.vm, this.el) this.frag = factory.create (this._host, this._scope, this._frag) this.frag.before (this.anchor)}, unbind: function () {this.frag.Remove () remove (this.Anchor)}}})<div id = "modal"> </div> ... <div v-inject: modal> <h1> заголовок </h1> <p> body </p> <p> нижний колонтитул </p> </div>
Если вы хотите написать пользовательские директивы терминала, рекомендуется прочитать исходный код встроенных директив терминалов, таких как V-IF и V-For, чтобы лучше понять внутренние механизмы Vue.
приоритет
Вы можете назначить приоритет инструкции. Если не указано, команда по умолчанию для обычной команды составляет 1000, а по умолчанию команда терминала составляет 2000. Инструкции с более высоким приоритетом на том же элементе будут обрабатываться раньше, чем другие инструкции. Директивы с одинаковым приоритетом обрабатываются в том порядке, в котором они появляются в списке свойств элемента, но нельзя гарантировать, что этот порядок согласуется в разных браузерах.
Приоритет встроенных директив можно посмотреть в API. Кроме того, инструкции по управлению процессом V-IF и V-FOR всегда имеют самый высокий приоритет в процессе компиляции.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.