Nano Hash - криптовалюты, майнинг, программирование

Vue.js назвал хуки javascript

Я пытаюсь подключить Vue.js к скорости.js. Руководство дает пример, но не использует именованный переход. В настоящее время мой переход выглядит так:

<transition name="collapse">

https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

Пример, приведенный в документации Vue.js, устанавливает элемент перехода следующим образом:

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>

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

Предпочтительно, чтобы методы в моем компоненте Vue.js выглядели примерно так:

collapseEnter, collapseEnterCancelled, etc.

Но это, похоже, не работает. Мне действительно нужно настроить все директивы или есть более простой способ?

javascript vue.js vuejs2 vue-component
21.04.2017

Ответы:


1

Тебе нужно. Но можно автоматически связать эти функции ловушек, создав абстрактный компонент, который будет обертывать <transition>.

Это взломано, но должно работать.

Сначала мы регистрируем компонент с именем autoTransition:

Vue.component('autoTransition', {
  props: ['name', 'vm'],
  functional: true,
  abstract: true,
  render (h, ctx) {
    return h('transition', {
      name: ctx.props.name,
      on: {
        'before-enter': ctx.props.vm.beforeEnter,
        'enter': ctx.props.vm.enter,
        // ... other hooks
      }
    }, ctx.children)
  }
})

И вы используете его как обычный переход, но вместо того, чтобы передавать все хуки, теперь вы можете просто передать весь vm (на который может ссылаться $root) и name, если вам нужно:

<auto-transition name="myTransition" :vm="$root">
  <h1 v-show="someBool">hello</h1>
</auto-transition>
21.04.2017

2

Насколько я знаю, это имя используется только тогда, когда вы применяете классы CSS для перехода. Это не имеет ничего общего с хуками javascript. Так что да, вам нужно явно определить все хуки.

21.04.2017
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..