[Перевод] Очарование пользовательских директив vue

внешний интерфейс Командная строка Vue.js Angular.js

Эта статья была одновременно опубликована в блоге команды веб-разработчиков Futu.Изображение.IM/статья/vUE…

Когда вы впервые познакомитесь с новой средой Javascript, вы впервые почувствуете себя ребенком в кондитерской. Получайте то, за что платите, и, если быть более точным, есть вещи, которые облегчают вам работу разработчика. Неизбежно, когда мы используем фреймворк, у всех нас возникает одинаковое чувство, что всегда есть некоторые сценарии, которые фреймворк не может нам помочь выполнить.

VueПрелесть фреймворка в том, что он очень мощный.Хотя директивы этого фреймворка недостаточно полны, он также может помочь вам в разработке, потому что очень легко создать пользовательскую директиву.

Что такое заказ?

я здесьVue.js guideОдна из инструкций, написанных встатья, а теперь просмотрите его вместе.

Директивы — это небольшие команды, которые можно написать на элементах DOM, они начинаются сv-префикс, vue может распознать, что это инструкция, и поддерживать согласованность синтаксиса. Это полезно, если вам нужно выполнять низкоуровневые манипуляции с HTML.

Если вы использовали vue или angular, дляv-if,v-else,v-showВы будете знакомы с инструкциями после ожидания, но я все еще должен ввести некоторые базовые знания.Если вы хотите увидеть пример непосредственно, вы можете просто прочитать следующий текст.

Вот несколько способов использования директив, а также примеры, это не спецификации, это просто примеры. здесьexampleвместо реальной инструкции.

v-example- создаст экземпляр директивы, но директива не имеет параметров. Если вы не передаете параметры, это будет менее гибко, но таким образом у вас есть возможность манипулировать элементами DOM.

v-example="value"- Таким образом, вы можете передать значение команде, и командаvalueзначение для управления html.

<div v-if="stateExample">stateExample为true时会显示</div>

v-example="'string'"- Используйте строки в качестве выражений.

<p v-html="'<strong>this is an example of a string in some text<strong> '"></p>

v-example:arg="value"- Здесь можно передать параметры (arg), в следующем примере мы связываемclass, то дайте этоclassУстановите стиль.

<div v-bind:class="someClassObject"></div>

v-example:arg.modifier="value"- используйте модификатор (modifier), следующий пример можно найти вclickпозвонить на мероприятиеpreventDefault();

<button v-on:submit.prevent="onSubmit"></button>

Узнать о пользовательских директивах

Теперь, когда у нас есть общее представление о директивах, давайте научимся создавать собственные директивы. Типичным примером пользовательской директивы является созданиеscrollКоманда события, давайте посмотрим на это вместе.

Сначала создайте чистую глобальную директиву (она еще ничего не делает).

vue.directive('tack');

В соответствии с этой директивой HTML выглядит так:

<p v-tack>This element has a directive on it</p>

Функция определения директивы предоставляет несколько функций ловушек (необязательно):

  1. bind- Вызывается только один раз, когда директива впервые привязывается к элементу.
  2. insert- Вызывается, когда связанный элемент вставляется в родительский узел.
  3. update- Вызов, когда находится обновление VNODE, но может произойти до обновления Vnode его дочерних элементов.
  4. componentUpdated- Вызывается при обновлении VNode компонента и VNode его дочерних элементов.
  5. unbind- Вызывается только один раз, когда директива не привязана к элементу.

hookArguments

Я думаю, что среди этих пяти хуковbindа такжеupdateявляется самым полезным.

Каждый из них доступенel,bindingа такжеvnodeпараметры, кромеupdateа такжеcomponentUpdatedКроме того, это также выявитoldVnode, чтобы различать старые и новые переданные значения.

  • elЭлемент, к которому привязана директива, может использоваться для прямого управления DOM.
  • bindingОбъект со следующими свойствами:name,value,oldValue,expression,argа такжеmodifiers.
  • vnodeВиртуальный узел, сгенерированный компиляцией Vue.

bindingа такжеvnodeВсе доступны только для чтения.

Создать пользовательскую директиву

После понимания концепции пользовательских директив давайте посмотрим, как использовать пользовательскую директиву.Давайте воспользуемся примером для реализации того, что мы только что сказали:

Vue.directive('tack',{
    bind(el,binding,vnode){
        el.style.position = 'fixed'
    }
})

Соответствующий HTML:

<p v-tack>I will now be tacked onto the page</p>

Это хорошо, но недостаточно гибко. Он будет более гибким, если сможет принимать параметры для последующего обновления производительности или повторного использования. Давайте посмотрим, как сделать этот элемент на определенном расстоянии от верха страницы:

Vue.directive('tack',{
    bind(el,binding,vnode){
        el.style.position = 'fixed';
        el.style.top = binding.value + 'px';
    }
})

<div id="app">
    <p>向下滚动页面</p>
    <p v-tack="70">我固定在离顶部70px的地方</p>
</div>

Завершенный дисплей CodePen: (Если эффект не отображается, нажмитеСвязьПроверить)

Предположим, мы хотим различать, находится ли смещение 70px сверху или слева, что может быть достигнуто путем передачи параметра:

<p v-tack:left="70">现在我会在距离左侧70px的地方</p>

Vue.directive('tack',{
    bind(el,binding,vnode){
        el.style.position = 'fixed';
        const s = (binding.arg == 'left'?'left':top);
        el.style[s] = binding.value + 'px';
    }
})

Завершенный дисплей CodePen: (Если эффект не отображается, нажмитеСвязьПроверить)

Вы также можете использовать несколько значений, как встроенная директива:

<p v-tack="{top:'40',left:'100'}">我固定在离顶部40px、左侧100px的地方</p>

Тогда оба значения вступят в силу в директиве одновременно:

Vue.directive('tack',{
    bind(el,binding,vnode){
        el.style.position = 'fixed';
        el.style.top = binding.value.top+'px';
        el.style.left = binding.value.left+'px';
    }
})

Завершенный дисплей CodePen: (Если эффект не отображается, нажмитеСвязьПроверить)

Мы также можем писать более сложные вещи, мы можем создавать и изменять методы на основе пользовательских директив. Здесь мы просто создаем небольшой пример анимации прокрутки:

Vue.directive('scroll',{
    inserted:function(el,binding){
        let f = function(evt){
            if(binding.value(evt,el)){
                 window.removeEventListener('scroll',f);
            }
        }
        window.addEventListener('scroll',f);
    }
});

//main app

new Vue({
    el:'#app',
    methods:{
        handleScroll:function(evt,el){
            if(window.scrollY>50){
                TweenMax.to(el,1.5,{
                    y:-10,
                    opacity:1,
                    ease:sine.easeOut
                })
            }
            return window.scrollY>100;
        }
    }
});

<div class="box" v-scroll="handleScroll">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.</p>
</div>

Завершенный дисплей CodePen: (Если эффект не отображается, нажмитеСвязьПроверить)

Все вышеперечисленное — очень простые коды для достижения эффекта.В реальной разработке вы можете создавать более продвинутые и гибкие пользовательские инструкции.

В реальной сборке я бы поместил код инструкции вmain.js, этот файл находится вsrcкаталог (если вы используете такой инструмент, как vue-cli), напримерApp.vueи с.vueФайлы с суффиксами можно импортировать и использовать. Конечно, вы можете использовать и другие способы, но я считаю, что это наиболее гибкий способ реализации всего приложения.

Если вы хотите узнать больше о платформе Vue, ознакомьтесь сguide.

оригинал:The Power of Custom Directives in Vue

автор:SARAH DRASNER

Переводчик: Диандиан

Категории