Автор: Саймон Холдорф.
Переводчик: Front-end Xiaozhi
Источник: телерик
Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статья
GitHubGitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.
Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.
Введение
Я предпочитаю использовать Vue для разработки, поэтому иногда вникаю в его функции и возможности. В этой статье я познакомлю вас с десятью крутыми советами и приемами, которые помогут вам стать лучшим разработчиком Vue.
Синтаксис слота красивее
С введением Vue 2.6 было введено сокращение для слотов, которое ранее было доступно для событий (например,@clickвыражатьv-on:clickсобытие) или двоеточие для привязки (:src). Например, если у вас есть табличный компонент, вы можете использовать эту функциональность следующим образом:
$на('крюк:')
если вы хотитеcreatedилиmountedметод для определения пользовательских прослушивателей событий или сторонних плагинов и необходимоbeforeDestroyметод, чтобы избежать утечек памяти, вы можете использовать эту функцию. использовать$on(‘hook:’)мы можем определять/удалять события, используя только один метод жизненного цикла (вместо двух).
проверка реквизита
Вы, наверное, уже знаете, что можетеpropsПроверяйте примитивные типы, такие как строки, числа или даже объекты. Мы также можем использовать собственные валидаторы, например, если мы хотим проверить список строк:
Параметры динамической команды
Одна из самых крутых особенностей Vue 2.6 — возможность динамически передавать директивные параметры компонентам. Предположим, у вас есть компонент кнопки, и в некоторых случаях вы хотите прослушивать события щелчка, а в других случаях вы хотите прослушивать события двойного щелчка. Здесь пригодятся динамические директивы:
Компоненты, повторно использующие один и тот же маршрут
Иногда, когда мы делимся чем-то с разными маршрутами, если мы переключаемся между этими маршрутами, общий компонент не будет повторно отображаться по умолчанию, потому что Vue повторно использует компонент из соображений производительности. Однако, если мы все еще хотим повторно отобразить эти компоненты, мы можем сделать это, указав в компоненте представления маршрутизатора:keyсвойство для реализации повторного рендеринга.
Все реквизиты от родительского класса к дочернему классу
Это действительно крутая функция, которая сочетает в себе всеpropПередается от родительского компонента к дочернему компоненту. Это особенно удобно, если у нас есть компонент-оболочка для другого компонента. Потому что нам не нужно ставить один за другимpropперейти к дочерним компонентам, а не передать все сразуprop:
Вышеупомянутое можно заменить следующим
Все прослушиватели событий от родительского класса к дочернему классу
Если дочерний компонент не находится в корне родительского компонента, вы можете передать все прослушиватели событий из родительского компонента в дочерний компонент следующим образом:
Если дочерний компонент находится в корне своего родителя, он получит эти компоненты по умолчанию, поэтому этот маленький трюк не нужен.
$createElement
По умолчанию каждый экземпляр Vue имеет доступ к$createElementметоды для создания и возврата виртуальных узлов. Например, его можно использовать вv-htmlМаркеры используются в методах, передаваемых директивами. В функциональном компоненте к этому методу можно обращаться как к первому параметру функции рендеринга.
Использование JSX
Поскольку Vue CLI 3 по умолчанию поддерживает использование JSX, теперь мы можем (если захотим) писать код в JSX (например, можно удобно писать функциональные компоненты). Если вы еще не используете Vue CLI 3, вы можете использоватьbabel-plugin-transform-vue-jsxПолучите поддержку JSX.
пользовательская v-модель
по умолчанию,v-modelда@inputпрослушиватели событий и:valueСинтаксический сахар в реквизите. Однако мы можем указать свойство модели в компоненте Vue, чтобы определить, какое событие и значение использовать.
Суммировать
Я надеюсь, что эти советы и рекомендации будут вам полезны, если вы тоже знаете, какие из них, пожалуйста, оставьте сообщение.
Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.
оригинал:ООО, ООО .tel erik.com/blogs/12- У нас есть ...
общаться с
Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.