-
-
-
-
-
diff --git a/docs/.vuepress/components/PassingPropsChild.vue b/docs/.vuepress/components/PassingPropsChild.vue
deleted file mode 100644
index 3a44bd1..0000000
--- a/docs/.vuepress/components/PassingPropsChild.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
-
diff --git a/docs/.vuepress/components/SFCButton.vue b/docs/.vuepress/components/SFCButton.vue
deleted file mode 100644
index fcb9a5d..0000000
--- a/docs/.vuepress/components/SFCButton.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-
- {{title}}
-- -
- - - - - diff --git a/docs/.vuepress/components/ThemeButton.vue b/docs/.vuepress/components/ThemeButton.vue deleted file mode 100644 index 64d1e62..0000000 --- a/docs/.vuepress/components/ThemeButton.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - - - diff --git a/docs/.vuepress/components/ThemeProvider.vue b/docs/.vuepress/components/ThemeProvider.vue deleted file mode 100644 index d69c1f0..0000000 --- a/docs/.vuepress/components/ThemeProvider.vue +++ /dev/null @@ -1,13 +0,0 @@ - diff --git a/docs/.vuepress/components/ThrowError.vue b/docs/.vuepress/components/ThrowError.vue deleted file mode 100644 index 085e429..0000000 --- a/docs/.vuepress/components/ThrowError.vue +++ /dev/null @@ -1,25 +0,0 @@ - -- -
- - - diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js deleted file mode 100644 index 7dd32fe..0000000 --- a/docs/.vuepress/config.js +++ /dev/null @@ -1,244 +0,0 @@ -module.exports = { - base: '/vue-patterns/', - locales: { - '/': { - lang: 'en-US', - title: 'Vue Patterns', - description: - 'Useful Vue patterns, techniques, tips and tricks and curated helpful links.', - }, - '/ru/': { - lang: 'ru', - title: 'Паттерны Vue', - description: 'Полезные паттерны, методы, советы и рекомендации, а также тщательно подобранный список ссылок по Vue' - }, - '/es/': { - lang: 'es', - title: 'Patrones de Vue', - description: 'Patrones útiles de Vue, técnicas, consejos, trucos y enlaces seleccionados.' - } - }, - head: [ - [ - 'link', - { - rel: 'apple-touch-icon', - sizes: '57x57', - href: '/icons/apple-icon-57x57.png', - }, - ], - [ - 'link', - { - rel: 'apple-touch-icon', - sizes: '60x60', - href: '/icons/apple-icon-60x60.png', - }, - ], - [ - 'link', - { - rel: 'apple-touch-icon', - sizes: '72x72', - href: '/icons/apple-icon-72x72.png', - }, - ], - [ - 'link', - { - rel: 'apple-touch-icon', - sizes: '76x76', - href: '/icons/apple-icon-76x76.png', - }, - ], - [ - 'link', - { - rel: 'apple-touch-icon', - sizes: '114x114', - href: '/icons/apple-icon-114x114.png', - }, - ], - [ - 'link', - { - rel: 'apple-touch-icon', - sizes: '120x120', - href: '/icons/apple-icon-120x120.png', - }, - ], - [ - 'link', - { - rel: 'apple-touch-icon', - sizes: '144x144', - href: '/icons/apple-icon-144x144.png', - }, - ], - [ - 'link', - { - rel: 'apple-touch-icon', - sizes: '152x152', - href: '/icons/apple-icon-152x152.png', - }, - ], - [ - 'link', - { - rel: 'apple-touch-icon', - sizes: '180x180', - href: '/icons/apple-icon-180x180.png', - }, - ], - [ - 'link', - { - rel: 'icon', - type: 'image/png', - sizes: '192x192', - href: '/icons/android-icon-192x192.png', - }, - ], - [ - 'link', - { - rel: 'icon', - type: 'image/png', - sizes: '32x32', - href: '/icons/favicon-32x32.png', - }, - ], - [ - 'link', - { - rel: 'icon', - type: 'image/png', - sizes: '96x96', - href: '/icons/favicon-96x96.png', - }, - ], - [ - 'link', - { - rel: 'icon', - type: 'image/png', - sizes: '16x16', - href: '/icons/favicon-16x16.png', - }, - ], - ['link', { rel: 'manifest', href: '/manifest.json' }], - [ - 'script', - { defer: true, async: true, src: 'https://buttons.github.io/buttons.js' }, - ], - ], - plugins: [ - [ - '@vuepress/pwa', - { - serviceWorker: true, - updatePopup: true - } - ], - [ - '@vuepress/google-analytics', - { - 'ga': 'UA-175336794-1' - } - ] - ], - themeConfig: { - displayAllHeaders: true, - lastUpdated: 'Last Updated', - repo: 'learn-vuejs/vue-patterns', - docsDir: 'docs', - editLinks: true, - locales: { - '/': { - lastUpdated: 'Last Updated', - nav: [ - { text: 'Home', link: '/' }, - { text: 'Docs', link: '/patterns/' }, - { - text: 'Translations', - items: [ - { - text: '简体中文', - link: 'https://github.com/ZYSzys/vue-patterns-cn', - }, - { - text: '繁體中文', - link: 'https://github.com/yoyoys/vue-patterns-cht', - }, - ], - }, - ], - sidebar: [ - ['/patterns/', 'Patterns'], - ['/useful-links/', 'Useful Links'], - ['/sponsors/', 'Fullstack Vue Book'], - ['/translations/', 'Translations'], - ], - }, - '/ru/': { - label: 'Русский', - selectText: 'Переводы', - lastUpdated: 'Последнее обновление', - editLinkText: 'Изменить эту страницу на GitHub', - nav: [ - { text: 'Главная', link: '/ru/' }, - { text: 'Документация', link: '/ru/patterns/' }, - { - text: 'Внешние переводы', - items: [ - { - text: '简体中文', - link: 'https://github.com/ZYSzys/vue-patterns-cn', - }, - { - text: '繁體中文', - link: 'https://github.com/yoyoys/vue-patterns-cht', - }, - ], - }, - ], - sidebar: [ - ['/ru/patterns/', 'Паттерны'], - ['/ru/useful-links/', 'Полезные ссылки'], - ['/ru/sponsors/', 'Книга Fullstack Vue'], - ['/ru/translations/', 'Переводы'], - ], - }, - '/es/': { - label: 'Español', - selectText: 'Idiomas', - lastUpdated: 'Última actualización', - editLinkText: 'Modificar esta página en GitHub', - nav: [ - { text: 'Inicio', link: '/es/' }, - { text: 'Docs', link: '/es/patterns/' }, - { - text: 'Traducciones', - items: [ - { - text: '简体中文', - link: 'https://github.com/ZYSzys/vue-patterns-cn', - }, - { - text: '繁體中文', - link: 'https://github.com/yoyoys/vue-patterns-cht', - }, - ], - }, - ], - sidebar: [ - ['/es/patterns/', 'Patrones'], - ['/es/useful-links/', 'Enlaces útiles'], - ['/es/sponsors/', 'Libro Fullstack Vue'], - ['/es/translations/', 'Traducciones'], - ], - }, - }, - }, -}; diff --git a/docs/.vuepress/override.styl b/docs/.vuepress/override.styl deleted file mode 100644 index c802d6d..0000000 --- a/docs/.vuepress/override.styl +++ /dev/null @@ -1,24 +0,0 @@ -.btn { - display: inline-block; - font-size: 1.2rem; - color: #212121; - padding: 0.8rem 1.6rem; - border-radius: 4px; - transition: background-color 0.1s ease; - box-sizing: border-box; -} - -.btn-primary { - color: #fff; - background-color: #3eaf7c; -} - -.btn-danger { - color: #fff; - background-color: #da5961; -} - -.bg-danger { - color: #fff; - background-color: #da5961; -} diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index 286c2ac..0000000 --- a/docs/README.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -home: true -heroImage: /learn-vue-logo.png -actionText: Get Started → -actionLink: /patterns/ ---- - -
- 
-
-
diff --git a/docs/es/README.md b/docs/es/README.md
deleted file mode 100644
index 19e5925..0000000
--- a/docs/es/README.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-home: true
-heroImage: /learn-vue-logo.png
-actionText: Empezar →
-actionLink: /es/patterns/
----
-
-
-
-
-
-
-
-
diff --git a/docs/es/patterns/README.md b/docs/es/patterns/README.md
deleted file mode 100644
index b82a687..0000000
--- a/docs/es/patterns/README.md
+++ /dev/null
@@ -1,1017 +0,0 @@
-## Declaración de componentes
-
-### [Componentes de un Solo archivo (alias — SFC)](https://es.vuejs.org/v2/guide/single-file-components.html) - Más común
-
-<<< @/docs/.vuepress/components/SFCButton.vue
-
-
-
-
-Render only if v-if condition is true
-``` - -`v-if` y `v-else` - -```vue -Render only if v-if condition is true
-Render only if v-if condition is false
-``` - -`v-else-if` - -```vue -Render only if `type` is equal to `A`
-Render only if `type` is equal to `B`
-Render only if `type` is equal to `C`
-Render if `type` is not `A` or `B` or `C`
-```
-
-`v-show`
-
-```vue
-- Always rendered, but it should be visible only if `v-show` conditions is true -
-``` - -Si necesitas renderizar condicionalmente más de un elemento, puedes usar las directivas (`v-if` / `v-else` / `v-else-if` /`v-show`) en un elemento ``. -Ten en cuenta que el elemento `` no se renderiza en el DOM. Es un contenedor invisible. - -```vue - -All the elements
-will be rendered into DOM
-except `template` element
- -``` - -### Función de Renderizado o JSX - -Si usas funciones de renderizado o JSX en tu aplicación vue, puedes aplicar todas las técnicas, tales como declaraciones `if else` y `switch case` y operadores `ternarios` y `logicos`. - -Declaración `if else` - -```jsx -export default { - data() { - return { - isTruthy: true, - }; - }, - render(h) { - if (this.isTruthy) { - returnRender value is true
; - } else { - returnRender value is false
; - } - }, -}; -``` - -Declaración `switch case` - -```jsx -import Info from './Info'; -import Warning from './Warning'; -import Error from './Error'; -import Success from './Success'; - -export default { - data() { - return { - type: 'error', - }; - }, - render(h) { - switch (this.type) { - case 'info': - return
- {this.isTruthy ? (
-
- );
- },
-};
-```
-
-Operador `lógico`
-
-```jsx
-export default {
- data() {
- return {
- isLoading: true,
- };
- },
- render(h) {
- return Render value is true
- ) : ( -Render value is false
- )} -{this.isLoading &&
;
- },
-};
-```
-
-#### Referencias
-
-- [🇪🇸 Documentación - Renderización condicional](https://es.vuejs.org/v2/guide/conditional.html)
-- [🇺🇸 Diferencia entre v-if y v-show [Con video al final]](https://dzone.com/articles/difference-between-v-if-and-v-show-with-a-video)
-
-## Componentes Dinámico
-
-### `Loading ...
}{{ props.title }}
-{{ props.description }}
- -``` -**index.vue** -```vue - -{{ name }}
-
- {{ text }}
-
-
-
-
-
-```
-
-#### Referencias:
-
-- [🇪🇸 Documentación - mixins](https://es.vuejs.org/v2/guide/mixins.html)
-- [🇺🇸 Uso práctico de Componentes y Mixins en Vue JS](http://www.qcode.in/practical-use-of-components-and-mixins-in-vue-js/)
-
-
-> 2.6.0+
-
-> Si usas Vue en la versión 2.6.0 o mayor, Vue introdujo una nueva y unificada api para slots, que es `v-slot`.
-> Reemplaza los atributos slot y slot-scope, que son obsoletos, pero no han sido removidos y se encuentran todavía documentados aquí.
-> Puedes hacer referencia la API obsoleta [aquí](https://es.vuejs.org/v2/guide/components-slots.html#Slots-con-Scope).
-
-### Slots (Por defecto)
-
-```vue
-
-
-
-
-
-```
-
-```vue
-
-
-
-
-
-
-
-
-```
-
-App.vue
-
-```vue
-Here might be a page title
- - -A paragraph for the main content.
-And another one.
- - -Here's some contact info
- --
-
-
-
-
-
{{ todo.text }} -
-
- {this.$props.render(this)}
-
- );
- },
-};
-
-export default Mouse;
-```
-
-#### Referencias:
-
-- [🇪🇸 Documentación - Funciones de renderizado y JSX](https://es.vuejs.org/v2/guide/render-function.html)
-- [🇺🇸 Aprovechando Props de Renderizado en Vue](https://medium.com/@dillonchanis/leveraging-render-props-in-vue-7eb9a19c262d)
-- [🇺🇸 Utilizando Callback Props estilo React con Vue: Pros y Contras](https://medium.com/js-dojo/using-react-style-callback-props-with-vue-pros-and-cons-e0ee7455695b)
-
-## Pasando Props y Listeners
-
-En ciertas ocasiones, es posible que quieras pasar props y listeners a un componente hijo sin tener que declarar todas las props del componente hijo.
-Puedes ligar `$attrs` y `$listeners` en el componente hijo y establecer [`inheritAttrs` como `false`](https://es.vuejs.org/v2/api/index.html#inheritAttrs) (de lo contrario, `div` y child-component` recibiran los atributos)
-
-#### PassingProps.vue
-
-<<< @/docs/.vuepress/components/PassingProps.vue
-
-Desde el componente padre, puedes hacer esto:
-
-#### PassedProps.vue
-
-<<< @/docs/.vuepress/components/PassedProps.vue
-
-#### Ejemplo:
-
-
-
-
-
-
-```
-
-`Provider.vue` es responsable de contener la lógica de estado, estamos separándola de la presentación. Podemos hacer uso de la `API de Slots` como proveedor de la información.
-
-**Consumer.vue**
-
-```html
-
-
-
-
-```
-
-`Consumer.vue` es responsable de contener la presentación, toma en cuenta que estamos utilizando un [Componente Funcional](#functional-component).
-
-**App.vue**
-
-```html
-
- {{ props.state.label }}
- -
-
-
-
-
Render only if v-if condition is true
-``` - -`v-if` and `v-else` - -```vue -Render only if v-if condition is true
-Render only if v-if condition is false
-``` - -`v-else-if` - -```vue -Render only if `type` is equal to `A`
-Render only if `type` is equal to `B`
-Render only if `type` is equal to `C`
-Render if `type` is not `A` or `B` or `C`
-```
-
-`v-show`
-
-```vue
-- Always rendered, but it should be visible only if `v-show` conditions is true -
-``` - -If you want to conditionally render more than one element, -you can use directives(`v-if` / `v-else` / `v-else-if` /`v-show`) on a `` element. -Notice that the `` element is not actually rendered into the DOM. It is an invisible wrapper. - -```vue - -All the elements
-will be rendered into DOM
-except `template` element
- -``` - -### Render Function or JSX - -If you use render functions or JSX in your vue application, you can apply all the techniques, such as the `if else` and `switch case` statements and `ternary` and `logical` operators. - -`if else` statement - -```jsx -export default { - data() { - return { - isTruthy: true, - }; - }, - render(h) { - if (this.isTruthy) { - returnRender value is true
; - } else { - returnRender value is false
; - } - }, -}; -``` - -`switch case` statement - -```jsx -import Info from './Info'; -import Warning from './Warning'; -import Error from './Error'; -import Success from './Success'; - -export default { - data() { - return { - type: 'error', - }; - }, - render(h) { - switch (this.type) { - case 'info': - return
- {this.isTruthy ? (
-
- );
- },
-};
-```
-
-`logical` operator
-
-```jsx
-export default {
- data() {
- return {
- isLoading: true,
- };
- },
- render(h) {
- return Render value is true
- ) : ( -Render value is false
- )} -{this.isLoading &&
;
- },
-};
-```
-
-#### References
-
-- [Official - Conditional Rendering](https://vuejs.org/v2/guide/conditional.html)
-- [Difference Between v-if and v-show [With Video at End]](https://dzone.com/articles/difference-between-v-if-and-v-show-with-a-video)
-
-## Dynamic Component
-
-### `Loading ...
}{{ props.title }}
-{{ props.description }}
- -``` -**index.vue** -```vue - -{{ name }}
-
- {{ text }}
-
-
-
-
-
-```
-
-#### References:
-
-- [Official - mixins](https://vuejs.org/v2/guide/mixins.html)
-- [Practical use of Components and Mixins in Vue JS](http://www.qcode.in/practical-use-of-components-and-mixins-in-vue-js/)
-
-
-> 2.6.0+
-
-> If you use Vue version above 2.6.0, Vue introduces new unified slot api, which is `v-slot`.
-> It replaces the slot and slot-scope attributes, which are deprecated, but have not been removed and are still documented here.
-> You can refer to deprecated API [here](https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax).
-
-### Slots (Default)
-
-```vue
-
-
-
-
-
-```
-
-```vue
-
-
-
-
-
-
-
-
-```
-
-App.vue
-
-```vue
-Here might be a page title
- - -A paragraph for the main content.
-And another one.
- - -Here's some contact info
- --
-
-
-
-
-
{{ todo.text }} -
-
- {this.$props.render(this)}
-
- );
- },
-};
-
-export default Mouse;
-```
-
-#### References:
-
-- [Official - Render Functions & JSX](https://vuejs.org/v2/guide/render-function.html)
-- [Leveraging Render Props in Vue](https://medium.com/@dillonchanis/leveraging-render-props-in-vue-7eb9a19c262d)
-- [Using React-Style Callback Props With Vue: Pros and Cons](https://medium.com/js-dojo/using-react-style-callback-props-with-vue-pros-and-cons-e0ee7455695b)
-
-## Passing Props & Listeners
-
-Sometimes, you may want to pass props and listeners to a child component without having to declare all props for the child component.
-You can bind `$attrs` and `$listeners` in the child component and set [`inheritAttrs` to `false`](https://vuejs.org/v2/api/#inheritAttrs) (otherwise both, `div` and `child-component` will receive the attributes)
-
-#### PassingProps.vue
-
-<<< @/docs/.vuepress/components/PassingProps.vue
-
-From the parent component, you can do this:
-
-#### PassedProps.vue
-
-<<< @/docs/.vuepress/components/PassedProps.vue
-
-#### Working Example:
-
-
-
-
-
-
-```
-
-`Provider.vue` is responsible for containing all the stateful logic, we are successfully separating it from the presentation. We are making use of the `Slots API` as a data provider.
-
-**Consumer.vue**
-
-```html
-
-
-
-
-```
-
-`Consumer.vue` is responsible for containing the presentation, note that we are using a [Functional Component](#functional-component).
-
-**App.vue**
-
-```html
-
- {{ props.state.label }}
- -
-
-
-
-
-
-
-
diff --git a/docs/ru/patterns/README.md b/docs/ru/patterns/README.md
deleted file mode 100644
index 911ce06..0000000
--- a/docs/ru/patterns/README.md
+++ /dev/null
@@ -1,852 +0,0 @@
-## Объявление компонентов
-
-### [Однофайловый компонент (сокращенно — SFC)](https://ru.vuejs.org/v2/guide/single-file-components.html) — наиболее распространённый
-
-<<< @/docs/.vuepress/components/SFCButton.vue
-
-
-
-
-Рендеринг только, если условие v-if равняется true
-``` - -Использование `v-if` и `v-else` - -```html -Рендеринг только, если условие v-if равняется true
-Рендеринг только, если условие v-if равняется false
-``` - -Использование `v-else-if` - -```html -Рендеринг только, если `type` равняется `A`
-Рендеринг только, если `type` равняется `B`
-Рендеринг только, если `type` равняется `C`
-Рендеринг если `type` не равен ни `A`, ни `B`, ни `C`
-```
-
-Использование `v-show`
-
-```html
-Всегда рендерится, но виден только в том случае, если условия `v-show` равняются true
-``` - -Если вы хотите по условию отобразить более одного элемента, вы можете использовать директивы (`v-if` / `v-else` / `v-else-if` /`v-show`) на элементе ``. Обратите внимание, что элемент `` фактические не будет отображаться в DOM. Это как невидимая обёртка. - -```html - -Все элементы
-будут отрендерены в DOM,
-за исключением элемента `template`
- -``` - -### Render-функция или JSX - -Если вы используете JSX в своем Vue-приложении, то можете применять все техники, например использования выражения `if else` и `switch case`, а также тернарные и логические операторы. - -Использование выражения `if else` - -```jsx -export default { - data() { - return { - isTruthy: true, - }; - }, - render(h) { - if (this.isTruthy) { - returnРендеринг, если значение равно true
; - } else { - returnРендеринг, если значение равно false
; - } - }, -}; -``` - -Использование выражения `switch case` - -```jsx -import Info from './Info'; -import Warning from './Warning'; -import Error from './Error'; -import Success from './Success'; - -export default { - data() { - return { - type: 'error', - }; - }, - render(h) { - switch (this.type) { - case 'info': - return
- {this.isTruthy ? (
-
- );
- },
-};
-```
-
-Использование логического оператора
-
-```jsx
-export default {
- data() {
- return {
- isLoading: true,
- };
- },
- render(h) {
- return Рендеринг, если значение равно true
- ) : ( -Рендеринг, если значение равно false
- )} -{this.isLoading &&
;
- },
-};
-```
-#### Ссылки
-
-- [🇷🇺 Официальная документация — Условный рендеринг](https://vuejs.org/v2/guide/conditional.html)
-- [🇺🇸 Разница между v-if и v-show [с видео в конце]](https://dzone.com/articles/difference-between-v-if-and-v-show-with-a-video)
-
-## Динамический компонент
-
-### `Загрузка ...
}
-
-
-
-
-```
-
-#### Ссылки
-
-- [🇷🇺 Официальная документация — Разбиение приложения на компоненты](https://ru.vuejs.org/v2/guide/index.html#%D0%A0%D0%B0%D0%B7%D0%B1%D0%B8%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%B0-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B)
-
-### Расширение компонента
-
-Если вы хотите расширить один Vue-компонент, можно поступить следующим образом:
-
-```html
-
-
-
-
-
-```
-
-#### Ссылки:
-
-- [🇷🇺 Официальная документация — extends](https://ru.vuejs.org/v2/api/#extends)
-- [🇺🇸 Расширение компонентов VueJS](https://medium.com/js-dojo/extending-vuejs-components-42fefefc688b)
-
-### Примеси
-
-```js
-// closableMixin.js
-export default {
- props: {
- isOpen: {
- default: true
- }
- },
- data: function() {
- return {
- shown: this.isOpen
- }
- },
- methods: {
- hide: function() {
- this.shown = false;
- },
- show: function() {
- this.shown = true;
- },
- toggle: function() {
- this.shown = !this.shown;
- }
- }
-}
-```
-
-```html
-
-
- {{ text }}
-
-
-
-
-
-```
-
-#### Ссылки:
-
-- [🇷🇺 Официальная документация — mixins](https://ru.vuejs.org/v2/guide/mixins.html)
-- [🇺🇸 Практическое использование компонентов и примисей в Vue JS](http://www.qcode.in/practical-use-of-components-and-mixins-in-vue-js/)
-
-### Слоты (по умолчанию)
-
-```html
-
-
-
-
-
-```
-
-```html
-
-
-
-
-
-
-
-
-```
-
-App.vue
-
-```html
-Здесь может быть заголовок страницы
- - -Абзац для основного контента.
-И еще один.
- - -Здесь некоторые контактные данные
- --
-
-
-
-
-
- {{ todo.text }} - -
-
-
-
-
-
-
-```
-
-С использованием `JSX`
-
-```js
-const Mouse = {
- name: 'Mouse',
- props: {
- render: {
- type: Function,
- required: true,
- },
- },
- data() {
- return {
- x: 0,
- y: 0,
- };
- },
- methods: {
- handleMouseMove(event) {
- this.x = event.clientX;
- this.y = event.clientY;
- },
- },
- render(h) {
- return (
-
- {this.$props.render(this)}
-
- );
- },
-};
-
-export default Mouse;
-```
-
-#### Ссылки:
-
-- [🇷🇺 Официальная документация — Render Functions & JSX](https://vuejs.org/v2/guide/render-function.html)
-- [🇺🇸 Использование рендеринга входных параметров в Vue](https://medium.com/@dillonchanis/leveraging-render-props-in-vue-7eb9a19c262d)
-- [🇺🇸 Использование рендеринга входных параметров Vue.js!](https://medium.com/js-dojo/use-a-vue-js-render-prop-98880bc44e05)
-
-## Передача входных параметров
-
-Иногда вам может понадобиться передать входные параметры и обработчики дочернему компоненту, не объявляя всех входных параметров дочернего компонента. Вы можете привязать `$attrs` и `$listeners` в дочернем компоненте и установить [`inheritAttrs` на `false`](https://ru.vuejs.org/v2/api/#inheritAttrs) (в противном случае `div` и `child-component` получат атрибуты).
-
-#### PassingProps.vue
-
-<<< @/docs/.vuepress/components/PassingProps.vue
-
-Из родительского компонента вы можете сделать следующее:
-
-#### PassedProps.vue
-
-<<< @/docs/.vuepress/components/PassedProps.vue
-
-#### Рабочий пример:
-
-
+ Patrones de Vue +
+ Patrones útiles de Vue, técnicas, consejos, trucos y enlaces seleccionados. +
Declaración de componentes
Componentes de un Solo archivo (alias — SFC) - Más común
<template>
+ <p class="demo">
+ <button class="btn-primary" @click.prevent="handleClick">
+ <slot></slot>(clicked - {{count}})
+ </button>
+ </p>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ methods: {
+ handleClick() {
+ this.count++;
+ console.log('clicked', this.count);
+ },
+ },
+};
+</script>
+
+<style scoped>
+.btn-primary {
+ display: inline-block;
+ font-size: 1.2rem;
+ color: #fff;
+ background-color: #3eaf7c;
+ padding: 0.8rem 1.6rem;
+ border-radius: 4px;
+ transition: background-color 0.1s ease;
+ box-sizing: border-box;
+ border-bottom: 1px solid #389d70;
+}
+</style>
+Plantilla de cadena de texto
Vue.component('my-btn', {
+ template: `
+ <button class="btn-primary" @click.prevent="handleClick">
+ <slot></slot>(clicked - {{count}})
+ </button>
+ `,
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ methods: {
+ handleClick() {
+ this.count++;
+ console.log('clicked', this.count);
+ },
+ },
+});
+Función de renderizado
Vue.component('my-btn', {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ methods: {
+ handleClick() {
+ this.count++;
+ console.log('clicked', this.count);
+ },
+ },
+ render(h) {
+ return h(
+ 'button',
+ {
+ attrs: {
+ class: 'btn-primary',
+ },
+ on: {
+ click: this.handleClick,
+ },
+ },
+ this.$slots.default
+ );
+ },
+});
+JSX
Vue.component('my-btn', {
+ data() {
+ return {
+ text: 'Click me',
+ };
+ },
+ methods: {
+ handleClick() {
+ console.log('clicked');
+ },
+ },
+ render() {
+ return (
+ <button class="btn-primary" @click.prevent="handleClick">
+ {this.$slots.default}(clicked - {{count}})
+ </button>
+ );
+ },
+});
+vue-class-component
<template>
+ <button class="btn-primary" @click.prevent="handleClick">
+ <slot></slot>(clicked - {{ count }})
+ </button>
+</template>
+
+<script>
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+@Component
+export default MyBtn extends Vue {
+ count = 0;
+
+ handleClick() {
+ this.count++;
+ console.log('clicked', this.count);
+ }
+}
+</script>
+
+<style scoped>
+.btn-primary {
+ background-color: blue;
+}
+</style>
+Referencias:
- 🇪🇸 Documentación - Componentes de un Solo archivo
- 🇪🇸 Documentación - Funciones de renderizado y JSX
- 🇺🇸 7 Maneras de definir una plantilla de componente en VueJS
- 🇺🇸 Escribir múltiple componentes de Vue en un solo archivo
Comunicación de componentes
Propiedades y Eventos
Básicamente, los componentes de vue siguen un flujo en un sólo sentido, esto es propiedades hacia los hijos (Ver la guía oficial) y eventos hacia el padre.
+Las props son información de solo lectura, así que es imposible cambiar las props desde un componente hijo.
+Cuando las props cambian, los componentes hijo serán renderizados de nuevo automáticamente (las props son una fuente de información reactiva).
+Los componentes hijo solo pueden emitir eventos a sus padres directos, de tal manera que el componente padre puede cambiar su data, que está asignada a las props del componente hijo.
<template>
+ <button @click="$emit('click');">{{ text }}</button>
+</template>
+
+<script>
+export default {
+ name: 'v-btn',
+ props: {
+ text: String,
+ },
+};
+</script>
+<template>
+ <v-btn :text="buttonText" @click="handleClick"></v-btn>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ clickCount: 0,
+ buttonText: 'initial button text',
+ };
+ },
+ methods: {
+ handleClick() {
+ this.buttonText = `Button clicked ${++this.clickCount}`;
+ console.log('clicked', this.buttonText);
+ },
+ },
+};
+</script>
+Referencias:
- 🇪🇸 Documentación - Propiedades
- 🇺🇸 Patrones de comunicacion de componentes Vue.js
- 🇺🇸 Crear controles de entrada personalizados con Vue.js
- 🇺🇸 Comunicación de componentes hermanos en Vue
- 🇺🇸 Manejar el Estado en Vue.js
- 🇺🇸 Comunicación de Vue.js parte 2: componentes padre-hijo
- 🇺🇸 Patrones de diseño para comunicación entre componentes de Vue.js
Eventos personalizados
Referencias:
- 🇪🇸 Documentación - Eventos personalizados
- 🇺🇸 Aprovechar los eventos de Vue para reducir declaraciones de propiedades
- 🇺🇸 Hooks de componentes de Vue.js como Eventos
- 🇺🇸 Crear un Bus de eventos global con Vue.js
- 🇺🇸 Bus de eventos de Vue.js + Promesas
- 🇺🇸 Modificar la data de un componente con emisores de eventos en Vue.js
Renderización Condicional de Componentes
Directivas (v-if / v-else / v-else-if / v-show)
v-if
<h1 v-if="true">Render only if v-if condition is true</h1>
+v-if y v-else
<h1 v-if="true">Render only if v-if condition is true</h1>
+<h1 v-else>Render only if v-if condition is false</h1>
+v-else-if
<div v-if="type === 'A'">Render only if `type` is equal to `A`</div>
+<div v-else-if="type === 'B'">Render only if `type` is equal to `B`</div>
+<div v-else-if="type === 'C'">Render only if `type` is equal to `C`</div>
+<div v-else>Render if `type` is not `A` or `B` or `C`</div>
+v-show
<h1 v-show="true">
+ Always rendered, but it should be visible only if `v-show` conditions is true
+</h1>
+Si necesitas renderizar condicionalmente más de un elemento, puedes usar las directivas (v-if / v-else / v-else-if /v-show) en un elemento <template>.
+Ten en cuenta que el elemento <template> no se renderiza en el DOM. Es un contenedor invisible.
<template v-if="true">
+ <h1>All the elements</h1>
+ <p>will be rendered into DOM</p>
+ <p>except `template` element</p>
+</template>
+Función de Renderizado o JSX
Si usas funciones de renderizado o JSX en tu aplicación vue, puedes aplicar todas las técnicas, tales como declaraciones if else y switch case y operadores ternarios y logicos.
Declaración if else
export default {
+ data() {
+ return {
+ isTruthy: true,
+ };
+ },
+ render(h) {
+ if (this.isTruthy) {
+ return <h1>Render value is true</h1>;
+ } else {
+ return <h1>Render value is false</h1>;
+ }
+ },
+};
+Declaración switch case
import Info from './Info';
+import Warning from './Warning';
+import Error from './Error';
+import Success from './Success';
+
+export default {
+ data() {
+ return {
+ type: 'error',
+ };
+ },
+ render(h) {
+ switch (this.type) {
+ case 'info':
+ return <Info text={text} />;
+ case 'warning':
+ return <Warning text={text} />;
+ case 'error':
+ return <Error text={text} />;
+ default:
+ return <Success text={text} />;
+ }
+ },
+};
+o puedes utilizar un objeto diccionario para simplificar el switch case
import Info from './Info';
+import Warning from './Warning';
+import Error from './Error';
+import Success from './Success';
+
+const COMPONENT_MAP = {
+ info: Info,
+ warning: Warning,
+ error: Error,
+ success: Success,
+};
+
+export default {
+ data() {
+ return {
+ type: 'error',
+ };
+ },
+ render(h) {
+ const Comp = COMPONENT_MAP[this.type || 'success'];
+
+ return <Comp />;
+ },
+};
+Operador ternario
export default {
+ data() {
+ return {
+ isTruthy: true,
+ };
+ },
+ render(h) {
+ return (
+ <div>
+ {this.isTruthy ? (
+ <h1>Render value is true</h1>
+ ) : (
+ <h1>Render value is false</h1>
+ )}
+ </div>
+ );
+ },
+};
+Operador lógico
export default {
+ data() {
+ return {
+ isLoading: true,
+ };
+ },
+ render(h) {
+ return <div>{this.isLoading && <h1>Loading ...</h1>}</div>;
+ },
+};
+Referencias
Componentes Dinámico
<component> con atributo is
<component :is="currentTabComponent"></component>
+Con el ejemplo de código de arriba, el componente renderizado será destruido si un componente diferente es asignado en la propiedad is. Si deseas que los componentes mantengan sus instancias y su estado sin ser destruido, puedes envolver la etiqueta <component> en otra etiqueta <keep-alive> de la siguiente manera:
<keep-alive> <component :is="currentTabComponent"></component> </keep-alive>
+Referencias
- 🇪🇸 Documentación - Componentes Dinámicos
- 🇪🇸 Documentación - Componentes Dinámicos & Asíncronos
- 🇺🇸 Plantillas de Componentes Dinámicos con Vue.js
Componente Funcional
Un componente funcional es un SFC especial, es básicamente un componente sin estado (es decir, sin etiqueta de script). Solamente acepta props para mostrar datos.
Para poder hacer un SFC un componente funcional, necesitas agregar el atributo functional a la etiqueta de <template> de la siguiente manera <template functional>
fp-component.vue
<template functional>
+ <h1>{{ props.title }}</h1>
+ <p>{{ props.description }}</p>
+</template>
+index.vue
<template>
+ <fp-component v-bind="{ title: 'FP Component', description: 'Only takes props' }" />
+</template>
+
+<script>
+import FPComponent from './fp-component';
+
+export default {
+ components: {
+ FPComponent
+ }
+}
+</script>
+Beneficios de usar un Componente Funcional sobre un Componente con Estado:
- Renderizado más rápido
- Menor uso de memoria
Componente sin renderizado
Un componente sin renderizado es básicamente un componente que no renderiza ningún HTML en el DOM pero proporciona lógica JavaScript reutilizable abstraída en un SFC.
Un componente sin renderizado utiliza la API de Slots para lograr lo que queremos.
Renderless.vue
<script>
+export default {
+ render() {
+ return this.$scopedSlots.default({ name: 'John' });
+ }
+};
+</script>
+El único trabajo de Renderless.vue es proporcionar la prop name
App.vue
<template>
+ <renderless v-slot="{ name }">
+ <p>{{ name }}</p>
+ </renderless>
+</template>
+
+<script>
+import Renderless from './Renderless.vue';
+
+export default {
+ components: {
+ Renderless,
+ }
+};
+</script>
+Lo bueno de utilizar Componentes sin renderizado es que nos permite separar nuestra lógica del HTML.
Composición
Librería
Composición básica
<template>
+ <div class="component-b"><component-a></component-a></div>
+</template>
+
+<script>
+import ComponentA from './ComponentA';
+
+export default {
+ components: {
+ ComponentA,
+ },
+};
+</script>
+Referencias
Extends
Cuando quieres extender un solo componente de vue
<template>
+ <button class="button-primary" @click.prevent="handleClick">
+ {{ buttonText }}
+ </button>
+</template>
+
+<script>
+import BaseButton from './BaseButton';
+
+export default {
+ extends: BaseButton,
+ props: ['buttonText'],
+};
+</script>
+References:
Mixins
// closableMixin.js
+export default {
+ props: {
+ isOpen: {
+ default: true,
+ },
+ },
+ data: function() {
+ return {
+ shown: this.isOpen,
+ };
+ },
+ methods: {
+ hide: function() {
+ this.shown = false;
+ },
+ show: function() {
+ this.shown = true;
+ },
+ toggle: function() {
+ this.shown = !this.shown;
+ },
+ },
+};
+<template>
+ <div
+ v-if="shown"
+ class="alert alert-success"
+ :class="'alert-' + type"
+ role="alert"
+ >
+ {{ text }}
+ <i class="pull-right glyphicon glyphicon-remove" @click="hide"></i>
+ </div>
+</template>
+
+<script>
+import closableMixin from './mixins/closableMixin';
+
+export default {
+ mixins: [closableMixin],
+ props: ['text'],
+};
+</script>
+Referencias:
2.6.0+
Si usas Vue en la versión 2.6.0 o mayor, Vue introdujo una nueva y unificada api para slots, que es
v-slot. +Reemplaza los atributos slot y slot-scope, que son obsoletos, pero no han sido removidos y se encuentran todavía documentados aquí. +Puedes hacer referencia la API obsoleta aquí.
Slots (Por defecto)
<template>
+ <button class="btn btn-primary">
+ <slot></slot>
+ </button>
+</template>
+
+<script>
+export default {
+ name: 'VBtn',
+};
+</script>
+<template>
+ <v-btn>
+ <span class="fa fa-user"></span> Login
+ </v-btn>
+</template>
+
+<script>
+import VBtn from './VBtn';
+
+export default {
+ components: {
+ VBtn,
+ },
+};
+</script>
+References:
- 🇪🇸 Documentación - Contenido del slot
- 🇺🇸 Entendiendo los Slots en componentes con Vue.js
- 🇺🇸 Componiendo Elementos Personalizados con Slots y Slots nombrados
- 🇺🇸 Escribiendo Components Abstractos con Vue.js
Slots Nombrados
BaseLayout.vue
<div class="container">
+ <header>
+ <slot name="header"></slot>
+ </header>
+ <main>
+ <slot></slot>
+ </main>
+ <footer>
+ <slot name="footer"></slot>
+ </footer>
+</div>
+App.vue
<base-layout>
+ <template v-slot:header>
+ <h1>Here might be a page title</h1>
+ </template>
+
+ <p>A paragraph for the main content.</p>
+ <p>And another one.</p>
+
+ <template v-slot:footer>
+ <p>Here's some contact info</p>
+ </template>
+</base-layout>
+Vue proporciona una sintaxis abreviada para slots nombrados.
+Puedes remplazar v-slot: con #
Referencias
Slots con Scope
<template>
+ <ul>
+ <li v-for="todo in todos" v-bind:key="todo.id">
+ <!-- We have a slot for each todo, passing it the -->
+ <!-- `todo` object as a slot prop. -->
+ <slot v-bind:todo="todo"> {{ todo.text }} </slot>
+ </li>
+ </ul>
+</template>
+
+<script>
+export default {
+ name: 'TodoList',
+ props: {
+ todos: {
+ type: Array,
+ default: () => [],
+ },
+ },
+};
+</script>
+<template>
+ <todo-list v-bind:todos="todos">
+ <template v-slot:default="{ todo }">
+ <span v-if="todo.isComplete">✓</span>
+ {{ todo.text }}
+ </template>
+ </todo-list>
+</template>
+
+<script>
+import TodoList from "./TodoList";
+
+export default {
+ components: {
+ TodoList
+ },
+ data() {
+ return {
+ todos: [
+ { text: "todo 1", isComplete: true },
+ { text: "todo 2", isComplete: false },
+ { text: "todo 3", isComplete: false },
+ { text: "todo 4", isComplete: true }
+ ]
+ };
+ }
+};
+</script>
+Referencias:
- 🇪🇸 Documentación - Slots con Scope
- 🇺🇸 Comprende de pies a cabeza los Slots con Scope en Vue.js
- 🇺🇸 Entendiendo Slots con Scope en Vue.js
- 🇺🇸 Componentes y Slots con Scope en Vue.js
- 🇺🇸 El Truco para entender Slots con Scope en Vue.js
- 🇺🇸 El poder de Slots con Scope en Vue
- 🇺🇸 Construye un Componente lista con Vue.js y Slots con Scope
- 🇺🇸 Cómo finalmente comprendí los Slots con Scope en Vue
Props de Renderizado
En la mayoría de los casos, puedes usar slots con scope en vez de props de renderizado. Pero, puede llegar a ser util en algunas ocasiones.
con SFC
<template>
+ <div id="app"><Mouse :render="__render" /></div>
+</template>
+
+<script>
+import Mouse from './Mouse.js';
+export default {
+ name: 'app',
+ components: {
+ Mouse,
+ },
+ methods: {
+ __render({ x, y }) {
+ return (
+ <h1>
+ The mouse position is ({x}, {y})
+ </h1>
+ );
+ },
+ },
+};
+</script>
+<style>
+* {
+ margin: 0;
+ height: 100%;
+ width: 100%;
+}
+</style>
+con JSX
const Mouse = {
+ name: 'Mouse',
+ props: {
+ render: {
+ type: Function,
+ required: true,
+ },
+ },
+ data() {
+ return {
+ x: 0,
+ y: 0,
+ };
+ },
+ methods: {
+ handleMouseMove(event) {
+ this.x = event.clientX;
+ this.y = event.clientY;
+ },
+ },
+ render(h) {
+ return (
+ <div style={{ height: '100%' }} onMousemove={this.handleMouseMove}>
+ {this.$props.render(this)}
+ </div>
+ );
+ },
+};
+
+export default Mouse;
+Referencias:
- 🇪🇸 Documentación - Funciones de renderizado y JSX
- 🇺🇸 Aprovechando Props de Renderizado en Vue
- 🇺🇸 Utilizando Callback Props estilo React con Vue: Pros y Contras
Pasando Props y Listeners
En ciertas ocasiones, es posible que quieras pasar props y listeners a un componente hijo sin tener que declarar todas las props del componente hijo.
+Puedes ligar $attrs y $listeners en el componente hijo y establecer inheritAttrs como false (de lo contrario, div y child-component` recibiran los atributos)
PassingProps.vue
<template>
+ <div>
+ <h1>{{title}}</h1>
+ <passing-props-child v-bind="$attrs" v-on="$listeners"></passing-props-child>
+ </div>
+</template>
+
+<script>
+import PassingPropsChild from './PassingPropsChild';
+
+export default {
+ components: {
+ PassingPropsChild,
+ },
+ inheritAttrs: false,
+ props: {
+ title: {
+ type: String,
+ default: 'Hello, Vue!',
+ },
+ },
+};
+</script>
+Desde el componente padre, puedes hacer esto:
PassedProps.vue
<template>
+ <p class="demo">
+ <passing-props
+ title="This is from <passing-props />"
+ childPropA="This is from <passing-props-child />"
+ @click="handleClickPassingPropsChildComponent"
+ >
+ </passing-props>
+ </p>
+</template>
+
+<script>
+import PassingProps from './PassingProps';
+
+export default {
+ components: {
+ PassingProps,
+ },
+ methods: {
+ handleClickPassingPropsChildComponent() {
+ console.log('This event comes from `<passing-props-child />`');
+ alert('This event comes from `<passing-props-child />`');
+ },
+ },
+};
+</script>
+Ejemplo:
This is from <passing-props />
Referencias:
Componentes de orden superior (alias HOC)
Referencias:
- 🇺🇸 Componentes de orden superior en Vue.js
- 🇺🇸 ¿Son necesarios los Componentes de orden superior en Vue.js?
- 🇺🇸 Componentes de orden superior en Vue.js
Proveedor / Consumidor
El patrón Proveedor / Consumidor es muy sencillo, su objetivo es separar la lógica de la presentación. Necesitamos dos componentes para crear este patrón.
Provider.vue
<template>
+ <div>
+ <slot v-bind="{ state, actions }" />
+ </div>
+</template>
+
+<script>
+export default {
+ computed: {
+ state() {
+ return {
+ label: 'button',
+ };
+ },
+ actions() {
+ return {
+ click: this.click,
+ };
+ },
+ },
+ methods: {
+ click() {
+ console.log('Clicked');
+ },
+ },
+}
+</script>
+Provider.vue es responsable de contener la lógica de estado, estamos separándola de la presentación. Podemos hacer uso de la API de Slots como proveedor de la información.
Consumer.vue
<template functional>
+ <div>
+ <p>{{ props.state.label }}</p>
+ <button @click="props.actions.click">CLICK</button>
+ </div>
+</template>
+Consumer.vue es responsable de contener la presentación, toma en cuenta que estamos utilizando un Componente Funcional.
App.vue
<template>
+ <provider v-slot="{ state, actions }">
+ <consumer v-bind="{ state, actions }" />
+ </provider>
+</template>
+
+<script>
+import Provider from './Provider.vue';
+import Consumer from './Consumer.vue';
+
+export default {
+ components: {
+ Provider,
+ Consumer,
+ },
+};
+</script>
+Este patrón proporciona una buena manera que nos permite componer componentes limpios y desacoplados. Puedes ver los ejemplos en CodeSandbox
Inyección de Dependencia
Vue tiene un mecanismo para proveer / inyectar un objeto a todos sus descendientes, sin importar el nivel de profundidad de la jerarquía del componente, siempre y cuando se encuentre dentro de la misma cadena del padre. Vale mencionar que las ligaduras provide e inject no son reactivas, a menos que pasen un objeto observado.
<parent-component>
+ <child-component>
+ <grand-child-component></grand-child-component>
+ </child-component>
+</parent-component>
+En el ejemplo de la jerarquía de componentes de arriba, para poder derivar información desde parent-component, necesitas pasar el data(object) como props a child-component y a grand-child-component. Sin embargo, si parent-component utiliza provide con el data(object), el componente grand-child-component puede definir inject para inyectar el objeto que proviene de parent-component.
Referencias:
- 🇪🇸 Documentación - Provide / Inject
- 🇪🇸 Documentación- Inyección de dependencia
- 🇺🇸 Comunicación de Componentes
- 🇺🇸 Inyección de dependencia en una aplicación Vue.js App con TypeScript
Provide / Inject
TIP
Puedes usar también @Provide, @Inject de vue-property-decorator
ThemeProvider.vue
<script>
+export default {
+ provide: {
+ theme: {
+ primaryColor: '#3eaf7c',
+ secondaryColor: '#1FA2FF'
+ },
+ },
+ render(h) {
+ return this.$slots.default[0];
+ },
+};
+</script>
+ThemeButton.vue
<template>
+ <button class="btn" :style="{ color: '#fff', backgroundColor: (primary && theme.primaryColor) || (secondary && theme.secondaryColor) }">
+ <slot></slot>
+ </button>
+</template>
+
+<script>
+export default {
+ inject: {
+ theme: {
+ default: {},
+ },
+ },
+ props: {
+ primary: {
+ type: Boolean,
+ default: false,
+ },
+ secondary: {
+ type: Boolean,
+ default: false,
+ },
+ },
+};
+</script>
+<theme-provider>
+ <p class="demo">
+ <button class="btn">Normal Button</button>
+ <theme-button secondary>Themed Button</theme-button>
+ </p>
+</theme-provider>
+Ejemplo:
Manejando errores
Hook errorCaptured
ErrorBoundary.vue
<script>
+export default {
+ name: 'ErrorBoundary',
+ data() {
+ return {
+ error: false,
+ errorMessage: '',
+ };
+ },
+ errorCaptured(err, vm, info) {
+ this.error = true;
+ this.errorMessage = `Sorry, error occured in ${info}`;
+
+ return false;
+ },
+ render(h) {
+ if (this.error) {
+ return h('p', { class: 'demo bg-danger' }, this.errorMessage);
+ }
+
+ return this.$slots.default[0];
+ },
+};
+</script>
+ThrowError.vue
<template>
+ <p class="demo">
+ <button class="btn btn-danger" @click.prevent="throwError()">Error Thrown Button ({{count}})</button>
+ </p>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ watch: {
+ count() {
+ throw new Error('error');
+ },
+ },
+ methods: {
+ throwError() {
+ this.count++;
+ },
+ },
+};
+</script>
+<error-boundary> <throw-error></throw-error> </error-boundary>
+Ejemplo:
Referencias
Trucos de productividad
watch al crear un componente
// no hagas esto
+created() {
+ this.fetchUserList();
+},
+watch: {
+ searchText: 'fetchUserList',
+}
+// mejor haz esto
+watch: {
+ searchText: {
+ handler: 'fetchUserList',
+ immediate: true,
+ }
+}
++ Enlaces útiles + + → +
+ ← + + Enlaces útiles + + Traducciones + + → +
Guía de Estilo
Refactorización
- 🇺🇸 Refactorizando Vue: Limpiando una Lista de Artículos con mejor Separación de Componentes y más ES6
- 🇺🇸 Limpia tus módulos de Vue con Funciones Flecha de ES6
- 🇺🇸 Ejemplos de código limpio de Vue
- 🇺🇸 Optimizar Rendimiento con propiedades computadas
- 🇺🇸 Simplifica tus componentes con Setters computados
- 🇺🇸 Aprende como refactorizar Componentes de un solo archivo de Vue.js con un ejemplo del mundo real
Rendimiento
- 🇺🇸 Optimización de una aplicación de Vue.js: parte 1 — Carga diferida y división de código en Vue.js
- 🇺🇸 Optimización de una aplicación de Vue.js: parte 2 — Carga diferida de rutas del vue-router y trampas comunes
- 🇺🇸 Optimización de una aplicación de Vue.js: parte 3 — Carga diferida de rutas del vue-router y trampas comunes
- 🇺🇸 Cómo reducir drásticamente la Latencia de entrada estimada y el Tiempo para ser interactivo de Aplicaciones de Vue.js Renderizadas del lado del servidor o SSR
- 🇺🇸 Carga diferida de imágenes con directivas de Vue.js y el Observador de Intersección
Manejo del estado
Vuex
- 🇺🇸 Desacopla módulos de Vuex con el patrón de Mediador
- 🇺🇸 Los getters de Vuex son geniales, pero no los uses de más
- 🇺🇸 Funciones reutilizables de Mutaciones de Vuex
- 🇺🇸 Un patrón para manejar peticiones ajax en Vuex
- 🇺🇸 [Mutaciones de Vuex] Cambio sencillo contra Responsabilidad sencilla
- 🇺🇸 Componentes y como interactúan en Vue y Vuex
- 🇺🇸 Por qué Vuex es la interfaz perfecta entre Frontend y API
- 🇺🇸 Componiendo acciones con Vuex
- 🇺🇸 Como construir Aplicaciones de Vue.js complejas y a gran escala con Vuex
- 🇺🇸 ¿Debería almacenar esta información en Vuex?
- 🇺🇸 Pues, así es como se usa v-model con Vuex. Setter computado en acción.
- 🇺🇸 5 Plugins de Vuex para tu siguiente proyecto de Vue.js
- 🇺🇸 Escribir módulos de Vuex en ordenadas clases de Typescript
- 🇺🇸 Manejando multiples almacenamientos centrales con Vuex
- 🇺🇸 Vuex explicado visualmente
- 🇺🇸 Introducción rápida al ORM de Vuex
Mobx
Componentes sin Renderizado
- 🇺🇸 Componentes sin Renderizado en Vue.js
- 🇺🇸 Construye Componentes sin Renderizado para manejar operaciones CRUD en Vue.js
- 🇺🇸 Construye componentes de Vue "sin Renderizado"
- 🇺🇸 Por qué las librerías de componentes sin Renderizado harán el desarrollo web más fácil y más inclusivo
- 🇺🇸 Patrón de Vue.js para peticiones asíncronas: Usando Componentes sin Renderizado
Ejemplos
Arquitectura
- 🇺🇸 Crea una aplicación a gran escala con Vue.js (parte 1): modulariza tu almacenamiento!
- 🇺🇸 Crea una aplicación a gran escala con Vue.js (parte 2): un poco de Programación Orientada a Objetos.
- 🇺🇸 ¿Vue.js esta listo para aplicaciones empresariales? — Casos de uso de aplicaciones a gran escala
- 🇺🇸 Cómo evitar violaciones a los principios SOLID en aplicaciones de Vue.js
Estructura de carpetas
- 🇺🇸 Cómo puedes mejorar tu flujo de trabajo usando la consola de JavaScript
- 🇺🇸 Cómo estructurar un projecto de Vue.js
- 🇺🇸 Estructura de una aplicación a gran escala con Vuex
- 🇺🇸 Estructura de una aplicación Vue.js y arquitectura de CSS
- 🇺🇸 Estructurando Componentes de Vue
- 🇺🇸 Estructurando un proyecto de Vue con Autenticación
Consejos y Trucos
- 🇺🇸 Cómo construir componentes de Vue como un profesional 😎
- 🇺🇸 Cuatro consejos para trabajar con Vue.js
- 🇺🇸 Consejos de un humilde desarrollador VueJS
- 🇺🇸 Limitar y retardar eventos con Vue.js y lodash
- 🇺🇸 ¿Son posibles funciones parcialmente aplicadas en manejadores de eventos?
- 🇺🇸 Vue.js — Consideraciones y trucos
- 🇺🇸 Seis problemas al azar y sus soluciones en VueJS.
- 🇺🇸 Cuando VueJS no puede ayudarte
- 🇺🇸 Cosas que no funcionarán usando Vue
- 🇺🇸 Consejo#15 Retarda la ejecución con _.debounce
- 🇺🇸 Maneja llamadas API en Vue
- 🇺🇸 Diapositivas - Vue y Patrones de REST API
- 🇺🇸 Tipado de datos en Vue sin TypeScript
- 🇺🇸 Depurando la reactividad de Vue.js: El árbol computado
- 🇺🇸 Comportamiento auxiliar para Iframes bloqueados: AUna solución (Tosca) con Vue.js
- 🇺🇸 Simplifica tus componentes de Vue con Setters computados
- 🇺🇸 Construye aplicaciones desacopladas de Vue.js con Ganchos (Hooks)
- 🇺🇸 Cómo desbloquear todo el potencial del tipado de props en Vue
- 🇺🇸 Un ejemplo más de un componente abstracto en Vue.js
- 🇺🇸 Unos pocos trucos prácticos de Vue.js
Enrutador
- 🇺🇸 Documentación - Guardias de Navegación
- 🇺🇸 Guardias de Navegación del enrutador de Vue con Vuex
- 🇺🇸 Implementando un Middleware sencillo con el enrutador de Vue
- 🇺🇸 Enrutador de Vue — El manual perdido
- 🇺🇸 Las maravillosas y menos conocidas cosas que el Enrutador de Vue puede hacer
- 🇺🇸 Almacenando y usando la última ruta conocida en Vue
- 🇺🇸 Ganchos (Hooks) de rutas de componentes de Vue
Anti Patrones
- 🇺🇸 Chris Fritz - Anti-Patrones de Vue.js (y como evitarlos)
- 🇺🇸 Errores comunes a evitar al trabajar con Vue.js
- 🇺🇸 Evita este anti-patrón común en aplicaciones Full-Stack Vue/Laravel
- 🇺🇸 [Video] - VueNYC - Tres olores de código de Vue, y que puedes hacer con ellos - Matt Rothenberg (@mattrothenberg)
- 🇺🇸 Por qué no debes utilizar Vue.component
Videos / Audios
- 🇺🇸 81: Evan You - Diseño Avanzado de componentes de Vue
- 🇺🇸 7 patrones secretos que los asesores no quieren que sepas
Repositorios
Pagado
- 🇺🇸 Diseño de componentes avanzado de Vue
- 🇺🇸 Características avanzadas de Vue.js desde abajo
- 🇺🇸 Vue Mastery
Typescript
- 🇺🇸 Vue + TypeScript: Un emparejamiento hecho en tu editor de código
- 🇺🇸 Escribiendo componentes basados en Clases con Vue.js y TypeScript
- 🇺🇸 Escribiendo módulos de Vuex en classes de Typescript ordenadas
Flowtype
GraphQL
Pruebas
- 🇺🇸 Probando acciones de Vuex correctamente con Jest
- 🇺🇸 Como utilizar datos simulados en aplicaciones de Vue
- 🇺🇸 Simulando objetos globales con las utilidades de pruebas de vue
- 🇺🇸 Probando aplicaciones de VueJs del mundo real
- 🇺🇸 Pruebas unitarias del enrutador de Vue
- 🇺🇸 Trabajando con una aplicación en Vue.js con Desarrollo conducido por Pruebas (TDD) — Una guía extensa para gente con tiempo - Parte 1
- 🇺🇸 Trabajando con una aplicación en Vue.js con Desarrollo conducido por Pruebas (TDD) — Una guía extensa para gente con tiempo - Parte 2
- 🇺🇸 Trabajando con una aplicación en Vue.js con Desarrollo conducido por Pruebas (TDD) — Una guía extensa para gente con tiempo - Parte 3
- 🇺🇸 Trabajando con una aplicación en Vue.js con Desarrollo conducido por Pruebas (TDD) — Una guía extensa para gente con tiempo - Parte 4
- 🇺🇸 Trabajando con una aplicación en Vue.js con Desarrollo conducido por Pruebas (TDD) — Una guía extensa para gente con tiempo - Parte 5
- 🇺🇸 Cómo usar datos simulados en aplicaciones Vue
Misceláneo
- 🇺🇸 Crear un componente separador de elementos en Vue desde una implementación con React
- 🇺🇸 Componiendo propiedades computadas en Vue.js
- 🇺🇸 4 Patrones de AJAX para aplicaciones Vue.js
- 🇺🇸 3 Patrones de división de código para VueJS y Webpack
- 🇺🇸 La manera más fácil de mejorar tu aplicación Vue.js. Parte 1
- 🇺🇸 Utilizar JSX con Vue y por qué te debería de importar
- 🇺🇸 Componentes compuestos
- 🇺🇸 Crea componentes de Vue.js con múltiples elementos raíces
- 🇺🇸 Entendiendo la reactividad de Vue.js a fondo con Object.defineProperty()
- 🇺🇸 Plantillas en Vue: ¿Separación de intereses or separación de tecnología or algo más?
- 🇺🇸 Almacenando información de componentes de Vue
- 🇺🇸 Creando transiciones reusables en Vue
- 🇺🇸 Taller avanzado de Vue
- 🇺🇸 Hazlo con elegancia: Cómo crear interfaces de usuario basadas en datos en Vue
- 🇺🇸 Creando instancias de componentes de Vue.js Programáticamente
- 🇺🇸 Manejo de permiso de usuarios en una aplicación de Vue.js
- 🇺🇸 Renderizado de componentes funcionales en Vue.js
- 🇺🇸 Iterar a través de propiedades de objetos
- 🇺🇸 Cancelar operaciones asíncronas en Vue.js
- 🇺🇸 Estilos con alcance a componentes con v-html
- 🇺🇸 Paginación con Vuejs
- 🇺🇸 ¿Qué significa la ‘h’ en el método de renderizado de Vue?
- 🇺🇸 Cómo construir componentes de Vue que se llevan bien
- 🇺🇸 Hacer componentes responsivos con Vue usando ResizeObserver
- 🇺🇸 Una guía imperativa para crear formularios en Vue.js
- 🇺🇸 Vue.js: the bueno, lo mediocre, y lo feo
- 🇺🇸 Componentes de plantillas dinámicas de Vue.js
- 🇺🇸 Conceptos avanzados de Vue.js: mixins, directivas personalizadas, filtros, transiciones, y manejo de estado
- 🇺🇸 Introducción al patrón de un solo elemento
- 🇺🇸 Controla el DOM fuera de tu aplicación Vue.js con portal-vue
- 🇺🇸 Agrega internacionalización y gestiona traducciones de un sitio en Vue.js
- 🇺🇸 Gestiona experiencias complejas de interfaces de usuarios
- 🇺🇸 Vue.js — Formularios, componentes y consideraciones
- 🇺🇸 Reutilizando lógica en componentes de Vue
- 🇺🇸 Recursividad para componentes de Vue anidados en una estructura de árbol
- 🇺🇸 Puntos a seguir para escribir componentes altamente reusables en React y Vue
- 🇺🇸 Construye una SPA de Vue optimizada para buscadores con pre-renderizado y otros consejos
- 🇺🇸 Hoja de referencia para eliminar bugs en Vue.js (y Vuex)
- 🇺🇸 Estructura de código para una aplicación universal en Nuxt.js
- 🇺🇸 7 lecciones de arquitectura de Frontend de Nuxt.js
- 🇺🇸 ¿De qué van los componentes funcionales en Vue.js?
- 🇺🇸 Llamadas en Vue a una API de una manera inteligente
- 🇺🇸 Cómo crear una aplicación Vue.js utilizando Componentes de un solo archivo, sin usar la interfaz de línea de comandos (CLI).
- 🇺🇸 Un patrón de Vue que quizás no sepas para registro idiomático y eficiente de componentes
- 🇺🇸 Reacciona a Promesas escuchando eventos en Vue.js
- 🇺🇸 Fábrica de componentes de un solo archivo de Vue.js
- 🇺🇸 Componiendo componentes en Vue.js
+ ← + + Patrones + + Libro Fullstack Vue + + → +
+ Vue Patterns +
+ Useful Vue patterns, techniques, tips and tricks and curated helpful links. +
Component Declaration
Single File Component (a.k.a. SFC) - Most Common
<template>
+ <p class="demo">
+ <button class="btn-primary" @click.prevent="handleClick">
+ <slot></slot>(clicked - {{count}})
+ </button>
+ </p>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ methods: {
+ handleClick() {
+ this.count++;
+ console.log('clicked', this.count);
+ },
+ },
+};
+</script>
+
+<style scoped>
+.btn-primary {
+ display: inline-block;
+ font-size: 1.2rem;
+ color: #fff;
+ background-color: #3eaf7c;
+ padding: 0.8rem 1.6rem;
+ border-radius: 4px;
+ transition: background-color 0.1s ease;
+ box-sizing: border-box;
+ border-bottom: 1px solid #389d70;
+}
+</style>
+String Template (or ES6 Template Literal)
Vue.component('my-btn', {
+ template: `
+ <button class="btn-primary" @click.prevent="handleClick">
+ <slot></slot>(clicked - {{count}})
+ </button>
+ `,
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ methods: {
+ handleClick() {
+ this.count++;
+ console.log('clicked', this.count);
+ },
+ },
+});
+Render Function
Vue.component('my-btn', {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ methods: {
+ handleClick() {
+ this.count++;
+ console.log('clicked', this.count);
+ },
+ },
+ render(h) {
+ return h(
+ 'button',
+ {
+ attrs: {
+ class: 'btn-primary',
+ },
+ on: {
+ click: this.handleClick,
+ },
+ },
+ this.$slots.default
+ );
+ },
+});
+JSX
Vue.component('my-btn', {
+ data() {
+ return {
+ text: 'Click me',
+ };
+ },
+ methods: {
+ handleClick() {
+ console.log('clicked');
+ },
+ },
+ render() {
+ return (
+ <button class="btn-primary" @click.prevent="handleClick">
+ {this.$slots.default}(clicked - {{count}})
+ </button>
+ );
+ },
+});
+vue-class-component
<template>
+ <button class="btn-primary" @click.prevent="handleClick">
+ <slot></slot>(clicked - {{ count }})
+ </button>
+</template>
+
+<script>
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+@Component
+export default MyBtn extends Vue {
+ count = 0;
+
+ handleClick() {
+ this.count++;
+ console.log('clicked', this.count);
+ }
+}
+</script>
+
+<style scoped>
+.btn-primary {
+ background-color: blue;
+}
+</style>
+References:
- Official - Single File Component
- Official - Render Functions & JSX
- 7 Ways To Define A Component Template in VueJS
- Writing multiple Vue components in a single file
Component Communication
Props and Events
Basically, vue components follow one-way data flow, that is props down (See official guide) and events up.
+Props are read-only data, so it's impossible to change props from child components.
+When props change, child components will be rerendered automatically (props are a reactive data source).
+Child components can only emit events to their direct parent, so that the parent component may change data, mapped to the child component's props.
<template>
+ <button @click="$emit('click');">{{ text }}</button>
+</template>
+
+<script>
+export default {
+ name: 'v-btn',
+ props: {
+ text: String,
+ },
+};
+</script>
+<template>
+ <v-btn :text="buttonText" @click="handleClick"></v-btn>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ clickCount: 0,
+ buttonText: 'initial button text',
+ };
+ },
+ methods: {
+ handleClick() {
+ this.buttonText = `Button clicked ${++this.clickCount}`;
+ console.log('clicked', this.buttonText);
+ },
+ },
+};
+</script>
+References:
- Official - Props
- Vue.js Component Communication Patterns
- Creating Custom Inputs With Vue.js
- Vue Sibling Component Communication
- Managing State in Vue.js
- Vue.js communication part 2: parent-child components
- Design Patterns for Communication Between Vue.js Components
Component Events Handling
References:
- Official - Custom Events
- Leveraging Vue events to reduce prop declarations
- Vue.js Component Hooks as Events
- Creating a Global Event Bus with Vue.js
- Vue.js Event Bus + Promises
- Modifying component data with event emitters in Vue.js
Component Conditional Rendering
Directives (v-if / v-else / v-else-if / v-show)
v-if
<h1 v-if="true">Render only if v-if condition is true</h1>
+v-if and v-else
<h1 v-if="true">Render only if v-if condition is true</h1>
+<h1 v-else>Render only if v-if condition is false</h1>
+v-else-if
<div v-if="type === 'A'">Render only if `type` is equal to `A`</div>
+<div v-else-if="type === 'B'">Render only if `type` is equal to `B`</div>
+<div v-else-if="type === 'C'">Render only if `type` is equal to `C`</div>
+<div v-else>Render if `type` is not `A` or `B` or `C`</div>
+v-show
<h1 v-show="true">
+ Always rendered, but it should be visible only if `v-show` conditions is true
+</h1>
+If you want to conditionally render more than one element,
+you can use directives(v-if / v-else / v-else-if /v-show) on a <template> element.
+Notice that the <template> element is not actually rendered into the DOM. It is an invisible wrapper.
<template v-if="true">
+ <h1>All the elements</h1>
+ <p>will be rendered into DOM</p>
+ <p>except `template` element</p>
+</template>
+Render Function or JSX
If you use render functions or JSX in your vue application, you can apply all the techniques, such as the if else and switch case statements and ternary and logical operators.
if else statement
export default {
+ data() {
+ return {
+ isTruthy: true,
+ };
+ },
+ render(h) {
+ if (this.isTruthy) {
+ return <h1>Render value is true</h1>;
+ } else {
+ return <h1>Render value is false</h1>;
+ }
+ },
+};
+switch case statement
import Info from './Info';
+import Warning from './Warning';
+import Error from './Error';
+import Success from './Success';
+
+export default {
+ data() {
+ return {
+ type: 'error',
+ };
+ },
+ render(h) {
+ switch (this.type) {
+ case 'info':
+ return <Info text={text} />;
+ case 'warning':
+ return <Warning text={text} />;
+ case 'error':
+ return <Error text={text} />;
+ default:
+ return <Success text={text} />;
+ }
+ },
+};
+or you can use object map to simplify switch case
import Info from './Info';
+import Warning from './Warning';
+import Error from './Error';
+import Success from './Success';
+
+const COMPONENT_MAP = {
+ info: Info,
+ warning: Warning,
+ error: Error,
+ success: Success,
+};
+
+export default {
+ data() {
+ return {
+ type: 'error',
+ };
+ },
+ render(h) {
+ const Comp = COMPONENT_MAP[this.type || 'success'];
+
+ return <Comp />;
+ },
+};
+ternary operator
export default {
+ data() {
+ return {
+ isTruthy: true,
+ };
+ },
+ render(h) {
+ return (
+ <div>
+ {this.isTruthy ? (
+ <h1>Render value is true</h1>
+ ) : (
+ <h1>Render value is false</h1>
+ )}
+ </div>
+ );
+ },
+};
+logical operator
export default {
+ data() {
+ return {
+ isLoading: true,
+ };
+ },
+ render(h) {
+ return <div>{this.isLoading && <h1>Loading ...</h1>}</div>;
+ },
+};
+References
Dynamic Component
<component> with is attribute
<component :is="currentTabComponent"></component>
+With the above code example, the rendered component will be destroyed if a different component is rendered in <component>. If you want components to keep their instances without being destroyed within the <component> tag, you can wrap the <component> tag in a <keep-alive> tag like so:
<keep-alive> <component :is="currentTabComponent"></component> </keep-alive>
+References
- Official - Dynamic Components
- Official - Dynamic & Async Components
- Dynamic Component Templates with Vue.js
Functional Component
A functional component is a special SFC, it is basically a component that is stateless (meaning no script tag). It only accepts props in order to display data.
In order to make a SFC a functional one you add the the functional attribute to the <template> tag like this: <template functional>
fp-component.vue
<template functional>
+ <h1>{{ props.title }}</h1>
+ <p>{{ props.description }}</p>
+</template>
+index.vue
<template>
+ <fp-component v-bind="{ title: 'FP Component', description: 'Only takes props' }" />
+</template>
+
+<script>
+import FPComponent from './fp-component';
+
+export default {
+ components: {
+ FPComponent
+ }
+}
+</script>
+The benefits of using a Functional Component over a Stateful Component:
- Faster rendering
- Lighter memory usage
Renderless Component
A renderless component is basically a component that does not render any HTML to the DOM but inside provides reusable JavaScript logic abstracted into a SFC.
A renderless component makes use of the Slots API in order to achieve what we want.
Renderless.vue
<script>
+export default {
+ render() {
+ return this.$scopedSlots.default({ name: 'John' });
+ }
+};
+</script>
+The only job of Renderless.vue is to provide the prop name
App.vue
<template>
+ <renderless v-slot="{ name }">
+ <p>{{ name }}</p>
+ </renderless>
+</template>
+
+<script>
+import Renderless from './Renderless.vue';
+
+export default {
+ components: {
+ Renderless,
+ }
+};
+</script>
+The neat thing about using a Renderless Component is that we can seperate our logic from our markup.
Composition
Library
Basic Composition
<template>
+ <div class="component-b"><component-a></component-a></div>
+</template>
+
+<script>
+import ComponentA from './ComponentA';
+
+export default {
+ components: {
+ ComponentA,
+ },
+};
+</script>
+References
Extends
When you want to extend a single vue component
<template>
+ <button class="button-primary" @click.prevent="handleClick">
+ {{ buttonText }}
+ </button>
+</template>
+
+<script>
+import BaseButton from './BaseButton';
+
+export default {
+ extends: BaseButton,
+ props: ['buttonText'],
+};
+</script>
+References:
Mixins
// closableMixin.js
+export default {
+ props: {
+ isOpen: {
+ default: true,
+ },
+ },
+ data: function() {
+ return {
+ shown: this.isOpen,
+ };
+ },
+ methods: {
+ hide: function() {
+ this.shown = false;
+ },
+ show: function() {
+ this.shown = true;
+ },
+ toggle: function() {
+ this.shown = !this.shown;
+ },
+ },
+};
+<template>
+ <div
+ v-if="shown"
+ class="alert alert-success"
+ :class="'alert-' + type"
+ role="alert"
+ >
+ {{ text }}
+ <i class="pull-right glyphicon glyphicon-remove" @click="hide"></i>
+ </div>
+</template>
+
+<script>
+import closableMixin from './mixins/closableMixin';
+
+export default {
+ mixins: [closableMixin],
+ props: ['text'],
+};
+</script>
+References:
2.6.0+
If you use Vue version above 2.6.0, Vue introduces new unified slot api, which is
v-slot. +It replaces the slot and slot-scope attributes, which are deprecated, but have not been removed and are still documented here. +You can refer to deprecated API here.
Slots (Default)
<template>
+ <button class="btn btn-primary">
+ <slot></slot>
+ </button>
+</template>
+
+<script>
+export default {
+ name: 'VBtn',
+};
+</script>
+<template>
+ <v-btn>
+ <span class="fa fa-user"></span> Login
+ </v-btn>
+</template>
+
+<script>
+import VBtn from './VBtn';
+
+export default {
+ components: {
+ VBtn,
+ },
+};
+</script>
+References:
- Official - Slot Content
- Understanding Component Slots with Vue.js
- Composing Custom Elements With Slots And Named Slots
- Writing Abstract Components with Vue.js
Named Slots
BaseLayout.vue
<div class="container">
+ <header>
+ <slot name="header"></slot>
+ </header>
+ <main>
+ <slot></slot>
+ </main>
+ <footer>
+ <slot name="footer"></slot>
+ </footer>
+</div>
+App.vue
<base-layout>
+ <template v-slot:header>
+ <h1>Here might be a page title</h1>
+ </template>
+
+ <p>A paragraph for the main content.</p>
+ <p>And another one.</p>
+
+ <template v-slot:footer>
+ <p>Here's some contact info</p>
+ </template>
+</base-layout>
+Vue provides shorthand syntax for named slots.
+You can replace v-slot: with #.
References
Scoped Slots
<template>
+ <ul>
+ <li v-for="todo in todos" v-bind:key="todo.id">
+ <!-- We have a slot for each todo, passing it the -->
+ <!-- `todo` object as a slot prop. -->
+ <slot v-bind:todo="todo"> {{ todo.text }} </slot>
+ </li>
+ </ul>
+</template>
+
+<script>
+export default {
+ name: 'TodoList',
+ props: {
+ todos: {
+ type: Array,
+ default: () => [],
+ },
+ },
+};
+</script>
+<template>
+ <todo-list v-bind:todos="todos">
+ <template v-slot:default="{ todo }">
+ <span v-if="todo.isComplete">✓</span>
+ {{ todo.text }}
+ </template>
+ </todo-list>
+</template>
+
+<script>
+import TodoList from "./TodoList";
+
+export default {
+ components: {
+ TodoList
+ },
+ data() {
+ return {
+ todos: [
+ { text: "todo 1", isComplete: true },
+ { text: "todo 2", isComplete: false },
+ { text: "todo 3", isComplete: false },
+ { text: "todo 4", isComplete: true }
+ ]
+ };
+ }
+};
+</script>
+References:
- Official - Scoped Slots
- Getting Your Head Around Vue.js Scoped Slots
- Understanding scoped slots in Vue.js
- Scoped Component Slots in Vue.js
- The Trick to Understanding Scoped Slots in Vue.js
- The Power of Scoped Slots in Vue
- Building a list keyboard control component with Vue.js and scoped slots
- How I finally got my head around Scoped Slots in Vue
Render Props
In most cases, you can use scoped slots instead of render props. But, it might be useful in some cases.
with SFC
<template>
+ <div id="app"><Mouse :render="__render" /></div>
+</template>
+
+<script>
+import Mouse from './Mouse.js';
+export default {
+ name: 'app',
+ components: {
+ Mouse,
+ },
+ methods: {
+ __render({ x, y }) {
+ return (
+ <h1>
+ The mouse position is ({x}, {y})
+ </h1>
+ );
+ },
+ },
+};
+</script>
+<style>
+* {
+ margin: 0;
+ height: 100%;
+ width: 100%;
+}
+</style>
+with JSX
const Mouse = {
+ name: 'Mouse',
+ props: {
+ render: {
+ type: Function,
+ required: true,
+ },
+ },
+ data() {
+ return {
+ x: 0,
+ y: 0,
+ };
+ },
+ methods: {
+ handleMouseMove(event) {
+ this.x = event.clientX;
+ this.y = event.clientY;
+ },
+ },
+ render(h) {
+ return (
+ <div style={{ height: '100%' }} onMousemove={this.handleMouseMove}>
+ {this.$props.render(this)}
+ </div>
+ );
+ },
+};
+
+export default Mouse;
+References:
- Official - Render Functions & JSX
- Leveraging Render Props in Vue
- Using React-Style Callback Props With Vue: Pros and Cons
Passing Props & Listeners
Sometimes, you may want to pass props and listeners to a child component without having to declare all props for the child component.
+You can bind $attrs and $listeners in the child component and set inheritAttrs to false (otherwise both, div and child-component will receive the attributes)
PassingProps.vue
<template>
+ <div>
+ <h1>{{title}}</h1>
+ <passing-props-child v-bind="$attrs" v-on="$listeners"></passing-props-child>
+ </div>
+</template>
+
+<script>
+import PassingPropsChild from './PassingPropsChild';
+
+export default {
+ components: {
+ PassingPropsChild,
+ },
+ inheritAttrs: false,
+ props: {
+ title: {
+ type: String,
+ default: 'Hello, Vue!',
+ },
+ },
+};
+</script>
+From the parent component, you can do this:
PassedProps.vue
<template>
+ <p class="demo">
+ <passing-props
+ title="This is from <passing-props />"
+ childPropA="This is from <passing-props-child />"
+ @click="handleClickPassingPropsChildComponent"
+ >
+ </passing-props>
+ </p>
+</template>
+
+<script>
+import PassingProps from './PassingProps';
+
+export default {
+ components: {
+ PassingProps,
+ },
+ methods: {
+ handleClickPassingPropsChildComponent() {
+ console.log('This event comes from `<passing-props-child />`');
+ alert('This event comes from `<passing-props-child />`');
+ },
+ },
+};
+</script>
+Working Example:
This is from <passing-props />
References:
Higher Order Component (a.k.a. HOC)
References:
- Higher Order Components in Vue.js
- Do we need Higher Order Components in Vue.js?
- Higher-Order Components in Vue.js
Provider / Consumer
The Provider / Consumer pattern is very simple, it aims at separating stateful logic from the presentation. We need two components to create this pattern.
Provider.vue
<template>
+ <div>
+ <slot v-bind="{ state, actions }" />
+ </div>
+</template>
+
+<script>
+export default {
+ computed: {
+ state() {
+ return {
+ label: 'button',
+ };
+ },
+ actions() {
+ return {
+ click: this.click,
+ };
+ },
+ },
+ methods: {
+ click() {
+ console.log('Clicked');
+ },
+ },
+}
+</script>
+Provider.vue is responsible for containing all the stateful logic, we are successfully separating it from the presentation. We are making use of the Slots API as a data provider.
Consumer.vue
<template functional>
+ <div>
+ <p>{{ props.state.label }}</p>
+ <button @click="props.actions.click">CLICK</button>
+ </div>
+</template>
+Consumer.vue is responsible for containing the presentation, note that we are using a Functional Component.
App.vue
<template>
+ <provider v-slot="{ state, actions }">
+ <consumer v-bind="{ state, actions }" />
+ </provider>
+</template>
+
+<script>
+import Provider from './Provider.vue';
+import Consumer from './Consumer.vue';
+
+export default {
+ components: {
+ Provider,
+ Consumer,
+ },
+};
+</script>
+This pattern provides a neat way of allowing us to compose clean and decoupled components. Check out the example on CodeSandbox
Dependency injection
Vue supports provide / inject mechanism to provide object into all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain. Notice that provide and inject bindings are not reactive, unless you pass down an observed object.
<parent-component>
+ <child-component>
+ <grand-child-component></grand-child-component>
+ </child-component>
+</parent-component>
+With the above example component hierarchy, in order to derive data from parent-component, you should pass down data(object) as props to child-component and grand-child-component. However, if parent-component provide data(object), grand-child-component can just define inject provided object from parent-component.
References:
- Official API
- Official Guide
- Component Communication
- Dependency Injection in Vue.js App with TypeScript
Provide / Inject
TIP
You can also use vue-property-decorator's @Provide, @Inject
ThemeProvider.vue
<script>
+export default {
+ provide: {
+ theme: {
+ primaryColor: '#3eaf7c',
+ secondaryColor: '#1FA2FF'
+ },
+ },
+ render(h) {
+ return this.$slots.default[0];
+ },
+};
+</script>
+ThemeButton.vue
<template>
+ <button class="btn" :style="{ color: '#fff', backgroundColor: (primary && theme.primaryColor) || (secondary && theme.secondaryColor) }">
+ <slot></slot>
+ </button>
+</template>
+
+<script>
+export default {
+ inject: {
+ theme: {
+ default: {},
+ },
+ },
+ props: {
+ primary: {
+ type: Boolean,
+ default: false,
+ },
+ secondary: {
+ type: Boolean,
+ default: false,
+ },
+ },
+};
+</script>
+<theme-provider>
+ <p class="demo">
+ <button class="btn">Normal Button</button>
+ <theme-button secondary>Themed Button</theme-button>
+ </p>
+</theme-provider>
+Working Example:
Handling Errors
errorCaptured Hook
ErrorBoundary.vue
<script>
+export default {
+ name: 'ErrorBoundary',
+ data() {
+ return {
+ error: false,
+ errorMessage: '',
+ };
+ },
+ errorCaptured(err, vm, info) {
+ this.error = true;
+ this.errorMessage = `Sorry, error occured in ${info}`;
+
+ return false;
+ },
+ render(h) {
+ if (this.error) {
+ return h('p', { class: 'demo bg-danger' }, this.errorMessage);
+ }
+
+ return this.$slots.default[0];
+ },
+};
+</script>
+ThrowError.vue
<template>
+ <p class="demo">
+ <button class="btn btn-danger" @click.prevent="throwError()">Error Thrown Button ({{count}})</button>
+ </p>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ watch: {
+ count() {
+ throw new Error('error');
+ },
+ },
+ methods: {
+ throwError() {
+ this.count++;
+ },
+ },
+};
+</script>
+<error-boundary> <throw-error></throw-error> </error-boundary>
+Working Example:
References
Productivity Tips
watch on create
// don't
+created() {
+ this.fetchUserList();
+},
+watch: {
+ searchText: 'fetchUserList',
+}
+// do
+watch: {
+ searchText: {
+ handler: 'fetchUserList',
+ immediate: true,
+ }
+}
++ Useful Links + + → +
+ Паттерны Vue +
+ Полезные паттерны, методы, советы и рекомендации, а также тщательно подобранный список ссылок по Vue +
Объявление компонентов
Однофайловый компонент (сокращенно — SFC) — наиболее распространённый
<template>
+ <p class="demo">
+ <button class="btn-primary" @click.prevent="handleClick">
+ <slot></slot>(clicked - {{count}})
+ </button>
+ </p>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ methods: {
+ handleClick() {
+ this.count++;
+ console.log('clicked', this.count);
+ },
+ },
+};
+</script>
+
+<style scoped>
+.btn-primary {
+ display: inline-block;
+ font-size: 1.2rem;
+ color: #fff;
+ background-color: #3eaf7c;
+ padding: 0.8rem 1.6rem;
+ border-radius: 4px;
+ transition: background-color 0.1s ease;
+ box-sizing: border-box;
+ border-bottom: 1px solid #389d70;
+}
+</style>
+Шаблонные строки (или литералы шаблонов в ES6)
Vue.component('my-btn', {
+ template: `
+ <button class="btn-primary" @click.prevent="handleClick">
+ <slot></slot>(clicked - {{count}})
+ </button>
+ `,
+ data() {
+ return {
+ text: 'Click me',
+ };
+ },
+ methods: {
+ handleClick() {
+ this.count++;
+ console.log('clicked', this.count);
+ }
+ }
+});
+Render-функция
Vue.component('my-btn', {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ methods: {
+ handleClick() {
+ this.count++;
+ console.log('clicked', this.count);
+ },
+ },
+ render(h) {
+ return h(
+ 'button',
+ {
+ attrs: {
+ class: 'btn-primary',
+ },
+ on: {
+ click: this.handleClick,
+ },
+ },
+ this.$slots.default
+ );
+ },
+});
+JSX
Vue.component('my-btn', {
+ data() {
+ return {
+ text: 'Click me',
+ };
+ },
+ methods: {
+ handleClick() {
+ console.log('clicked');
+ },
+ },
+ render() {
+ return (
+ <button class="btn-primary" @click.prevent="handleClick">
+ {this.$slots.default}(clicked - {{count}})
+ </button>
+ );
+ },
+});
+vue-class-component
<template>
+ <button class="btn-primary" @click.prevent="handleClick">
+ <slot></slot>(clicked - {{count}})
+ </button>
+</template>
+
+<script>
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+@Component
+export default MyBtn extends Vue {
+ count = 0;
+
+ handleClick() {
+ this.count++;
+ console.log('clicked', this.count);
+ }
+}
+</script>
+
+<style scoped>
+.btn-primary {
+ background-color: blue;
+}
+</style>
+Ссылки:
- 🇷🇺 Официальная документация — Однофайловые компоненты
- 🇷🇺 Официальная документация — Render-функции и JSX
- 🇺🇸 7 способов определения шаблона компонента в VueJS
Взаимодействие компонента
Входные параметры и события
В целом, компонент Vue следует однонаправленному потоку данных, то есть входные параметры передаются вниз (см. официальное руководство), а события — наверх. Входные параметры — это данные только для чтения, поэтому невозможно изменить входные параметры дочерних компонентов. При изменении входных параметров, дочерние компоненты будут автоматически повторно отрендерены (входные параметры являются реактивными источниками данных). Дочерние компоненты могут генерировать событие только к непосредственному родительскому компоненту, так что он может изменять data, сопоставляемые с props дочернего компонента.
<template>
+ <button @click="$emit('click')">{{text}}</button>
+</template>
+
+<script>
+export default {
+ name: 'v-btn',
+ props: {
+ text: String,
+ },
+};
+</script>
+<template>
+ <v-btn :text="buttonText" @click="handleClick"></v-btn>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ clickCount: 0,
+ buttonText: 'initial button text',
+ };
+ },
+ methods: {
+ handleClick() {
+ this.buttonText = `Button clicked ${++this.clickCount}`;
+ console.log('clicked', this.buttonText);
+ },
+ },
+};
+</script>
+Ссылки:
- 🇷🇺 Официальная документация — Входные параметры
- 🇺🇸 Паттерны взаимодействия компонента Vue.js
- 🇺🇸 Создание пользовательских полей ввода с помощью Vue.js
- 🇺🇸 Взаимодействие дочерних компонентов Vue
- 🇺🇸 Управление состоянием во Vue.js
- 🇺🇸 Взаимодействие во Vue.js, часть 2: родительский и дочерний компоненты
Обработка событий компонента
Ссылки:
- 🇷🇺 Официальная документация — Пользовательские события
- 🇺🇸 Использование событий Vue для сокращения объявлений входных параметров
- 🇺🇸 Хуки компонента Vue.js как события
- 🇺🇸 Создание глобальной шины событий с помощью Vue.js
- 🇺🇸 Шина событий Vue.js + Промисы
Условный рендеринг компонента
Директивы (v-if / v-else / v-else-if / v-show)
v-if
<h1 v-if="true">Рендеринг только, если условие v-if равняется true</h1>
+Использование v-if и v-else
<h1 v-if="true">Рендеринг только, если условие v-if равняется true</h1>
+<h1 v-else>Рендеринг только, если условие v-if равняется false</h1>
+Использование v-else-if
<div v-if="type === 'A'">Рендеринг только, если `type` равняется `A`</div>
+<div v-else-if="type === 'B'">Рендеринг только, если `type` равняется `B`</div>
+<div v-else-if="type === 'C'">Рендеринг только, если `type` равняется `C`</div>
+<div v-else>Рендеринг если `type` не равен ни `A`, ни `B`, ни `C`</div>
+Использование v-show
<h1 v-show="true">Всегда рендерится, но виден только в том случае, если условия `v-show` равняются true</h1>
+Если вы хотите по условию отобразить более одного элемента, вы можете использовать директивы (v-if / v-else / v-else-if /v-show) на элементе <template>. Обратите внимание, что элемент <template> фактические не будет отображаться в DOM. Это как невидимая обёртка.
<template v-if="true">
+ <h1>Все элементы</h1>
+ <p>будут отрендерены в DOM,</p>
+ <p>за исключением элемента `template`</p>
+</template>
+Render-функция или JSX
Если вы используете JSX в своем Vue-приложении, то можете применять все техники, например использования выражения if else и switch case, а также тернарные и логические операторы.
Использование выражения if else
export default {
+ data() {
+ return {
+ isTruthy: true,
+ };
+ },
+ render(h) {
+ if (this.isTruthy) {
+ return <h1>Рендеринг, если значение равно true</h1>;
+ } else {
+ return <h1>Рендеринг, если значение равно false</h1>;
+ }
+ },
+};
+Использование выражения switch case
import Info from './Info';
+import Warning from './Warning';
+import Error from './Error';
+import Success from './Success';
+
+export default {
+ data() {
+ return {
+ type: 'error',
+ };
+ },
+ render(h) {
+ switch (this.type) {
+ case 'info':
+ return <Info text={text} />;
+ case 'warning':
+ return <Warning text={text} />;
+ case 'error':
+ return <Error text={text} />;
+ default:
+ return <Success text={text} />;
+ }
+ },
+};
+Или можно использовать сопоставление с помощью объекта для упрощения выражений switch case
import Info from './Info';
+import Warning from './Warning';
+import Error from './Error';
+import Success from './Success';
+
+const COMPONENT_MAP = {
+ info: Info,
+ warning: Warning,
+ error: Error,
+ success: Success,
+};
+
+export default {
+ data() {
+ return {
+ type: 'error',
+ };
+ },
+ render(h) {
+ const Comp = COMPONENT_MAP[this.type || 'success'];
+
+ return <Comp />;
+ },
+};
+Использование тернарного оператора
export default {
+ data() {
+ return {
+ isTruthy: true,
+ };
+ },
+ render(h) {
+ return (
+ <div>
+ {this.isTruthy ? (
+ <h1>Рендеринг, если значение равно true</h1>
+ ) : (
+ <h1>Рендеринг, если значение равно false</h1>
+ )}
+ </div>
+ );
+ },
+};
+Использование логического оператора
export default {
+ data() {
+ return {
+ isLoading: true,
+ };
+ },
+ render(h) {
+ return <div>{this.isLoading && <h1>Загрузка ...</h1>}</div>;
+ },
+};
+Ссылки
Динамический компонент
<component> с атрибутом is
<component :is="currentTabComponent"></component>
+В приведённом выше примере отрендеренный компонент будет уничтожаться, если другой компонент должен будет рендериться в <component>. Если необходимо, чтобы компоненты сохраняли свои экземпляры без их уничтожения в теге <component>, можно обернуть <component> в тег <keep-alive>:
<keep-alive>
+ <component :is="currentTabComponent"></component>
+</keep-alive>
+Ссылки
- 🇷🇺 Официальная документация — Динамические компоненты
- 🇷🇺 Официальная документация — Динамические и асинхронные компоненты
- 🇺🇸 Шаблоны динамических компонентов с Vue.js
Композиция
Библиотека
Простой пример композиции
<template>
+ <div class="component-b">
+ <component-a></component-a>
+ </div>
+</template>
+
+<script>
+import ComponentA from './ComponentA';
+
+export default {
+ components: {
+ ComponentA,
+ },
+};
+</script>
+Ссылки
Расширение компонента
Если вы хотите расширить один Vue-компонент, можно поступить следующим образом:
<template>
+ <button class="button-primary" @click.prevent="handleClick">
+ {{buttonText}}
+ </button>
+</template>
+
+<script>
+import BaseButton from './BaseButton';
+
+export default {
+ extends: BaseButton,
+ props: ['buttonText'],
+};
+</script>
+Ссылки:
Примеси
// closableMixin.js
+export default {
+ props: {
+ isOpen: {
+ default: true
+ }
+ },
+ data: function() {
+ return {
+ shown: this.isOpen
+ }
+ },
+ methods: {
+ hide: function() {
+ this.shown = false;
+ },
+ show: function() {
+ this.shown = true;
+ },
+ toggle: function() {
+ this.shown = !this.shown;
+ }
+ }
+}
+<template>
+ <div v-if="shown" class="alert alert-success" :class="'alert-' + type" role="alert">
+ {{ text }}
+ <i class="pull-right glyphicon glyphicon-remove" @click="hide"></i>
+ </div>
+</template>
+
+<script>
+import closableMixin from './mixins/closableMixin';
+
+export default {
+ mixins: [closableMixin],
+ props: ['text']
+};
+</script>
+Ссылки:
Слоты (по умолчанию)
<template>
+ <button class="btn btn-primary">
+ <slot></slot>
+ </button>
+</template>
+
+<script>
+export default {
+ name: 'VBtn',
+};
+</script>
+<template>
+ <v-btn>
+ <span class="fa fa-user"></span>
+ Логин
+ </v-btn>
+</template>
+
+<script>
+import VBtn from './VBtn';
+
+export default {
+ components: {
+ VBtn,
+ }
+};
+</script>
+Ссылки:
- 🇷🇺 Официальная документация — Содержимое слотов
- 🇺🇸 Понимание слотов компонентов с помощью Vue.js
- 🇺🇸 Составление пользовательских элементов с помощью слотов и именованными слотами
- 🇺🇸 Написание абстрактных компонентов во Vue.js +(🇷🇺 перевод)
Именованные слоты
BaseLayout.vue
<div class="container">
+ <header>
+ <slot name="header"></slot>
+ </header>
+ <main>
+ <slot></slot>
+ </main>
+ <footer>
+ <slot name="footer"></slot>
+ </footer>
+</div>
+App.vue
<base-layout>
+ <template slot="header">
+ <h1>Здесь может быть заголовок страницы</h1>
+ </template>
+
+ <p>Абзац для основного контента.</p>
+ <p>И еще один.</p>
+
+ <template slot="footer">
+ <p>Здесь некоторые контактные данные</p>
+ </template>
+</base-layout>
+Ссылки
Слоты с ограниченной областью видимости
<template>
+ <ul>
+ <li
+ v-for="todo in todos"
+ v-bind:key="todo.id"
+ >
+ <!-- У нас есть слот для каждого todo, передавая его -->
+ <!-- в объект `todo` в виде входного параметра для слота. -->
+ <slot v-bind:todo="todo">
+ {{ todo.text }}
+ </slot>
+ </li>
+ </ul>
+</template>
+
+<script>
+export default {
+ name: 'TodoList',
+ props: {
+ todos: {
+ type: Array,
+ default: () => ([]),
+ }
+ },
+};
+</script>
+<template>
+ <todo-list v-bind:todos="todos">
+ <template slot-scope="{ todo }">
+ <span v-if="todo.isComplete">✓</span>
+ {{ todo.text }}
+ </template>
+ </todo-list>
+</template>
+
+<script>
+import TodoList from './TodoList';
+
+export default {
+ components: {
+ TodoList,
+ },
+ data() {
+ return {
+ todos: [
+ { todo: 'todo 1', isComplete: true },
+ { todo: 'todo 2', isComplete: false },
+ { todo: 'todo 3', isComplete: false },
+ { todo: 'todo 4', isComplete: true },
+ ];
+ };
+ },
+};
+</script>
+Ссылки:
- 🇷🇺 Официальная документация — Слоты с ограниченной областью видимости
- 🇺🇸 Разбираемся со слотами с ограниченной областью видимости
- 🇺🇸 Понимание слотов с ограниченной областью видимости во Vue.js
- 🇺🇸 Слоты с ограниченной областью видимости компонента во Vue.js
- 🇺🇸 Трюк к пониманию слотов с ограниченной областью видимости во Vue.js
- 🇺🇸 Мощность слотов в Vue
- 🇺🇸 Создание компонента, управляемого с клавиатуры, списка с помощью Vue.js и слотов с ограниченной областью видимости
Render Props
В большинстве случаев вы можете использовать слоты с ограниченной областью видимости вместо рендеринга входных параметров. Но в некоторых случаях это может быть полезно.
С однофайловым компонентом SFC
<template>
+ <div id="app">
+ <Mouse :render="__render"/>
+ </div>
+</template>
+
+<script>
+import Mouse from './Mouse.js';
+export default {
+ name: 'app',
+ components: {
+ Mouse,
+ },
+ methods: {
+ __render({ x, y }) {
+ return (
+ <h1>
+ The mouse position is ({x}, {y})
+ </h1>
+ );
+ },
+ },
+};
+</script>
+<style>
+- {
+ margin: 0;
+ height: 100%;
+ width: 100%;
+}
+</style>
+С использованием JSX
const Mouse = {
+ name: 'Mouse',
+ props: {
+ render: {
+ type: Function,
+ required: true,
+ },
+ },
+ data() {
+ return {
+ x: 0,
+ y: 0,
+ };
+ },
+ methods: {
+ handleMouseMove(event) {
+ this.x = event.clientX;
+ this.y = event.clientY;
+ },
+ },
+ render(h) {
+ return (
+ <div style={{ height: '100%' }} onMousemove={this.handleMouseMove}>
+ {this.$props.render(this)}
+ </div>
+ );
+ },
+};
+
+export default Mouse;
+Ссылки:
- 🇷🇺 Официальная документация — Render Functions & JSX
- 🇺🇸 Использование рендеринга входных параметров в Vue
- 🇺🇸 Использование рендеринга входных параметров Vue.js!
Передача входных параметров
Иногда вам может понадобиться передать входные параметры и обработчики дочернему компоненту, не объявляя всех входных параметров дочернего компонента. Вы можете привязать $attrs и $listeners в дочернем компоненте и установить inheritAttrs на false (в противном случае div и child-component получат атрибуты).
PassingProps.vue
<template>
+ <div>
+ <h1>{{title}}</h1>
+ <passing-props-child v-bind="$attrs" v-on="$listeners"></passing-props-child>
+ </div>
+</template>
+
+<script>
+import PassingPropsChild from './PassingPropsChild';
+
+export default {
+ components: {
+ PassingPropsChild,
+ },
+ inheritAttrs: false,
+ props: {
+ title: {
+ type: String,
+ default: 'Hello, Vue!',
+ },
+ },
+};
+</script>
+Из родительского компонента вы можете сделать следующее:
PassedProps.vue
<template>
+ <p class="demo">
+ <passing-props
+ title="This is from <passing-props />"
+ childPropA="This is from <passing-props-child />"
+ @click="handleClickPassingPropsChildComponent"
+ >
+ </passing-props>
+ </p>
+</template>
+
+<script>
+import PassingProps from './PassingProps';
+
+export default {
+ components: {
+ PassingProps,
+ },
+ methods: {
+ handleClickPassingPropsChildComponent() {
+ console.log('This event comes from `<passing-props-child />`');
+ alert('This event comes from `<passing-props-child />`');
+ },
+ },
+};
+</script>
+Рабочий пример:
This is from <passing-props />
Ссылки:
Компоненты высшего порядка (они же HOC)
Ссылки:
- 🇺🇸 Компоненты высшего порядка Vue.js
- 🇺🇸 Нужны ли нам компоненты высшего порядка порядка во Vue.js?
- 🇺🇸 Компоненты высшего порядка во Vue.js
Внедрение зависимостей
Vue поддерживает механизм предоставления и внедрения объекта во всех потомки, независимо от глубины иерархии компонентов, при условии, что компоненты находятся в одной и той же цепочке родителей. Обратите внимание, что привязки provide и inject *не являются- реактивными, пока вы не передадите наблюдаемый объект.
<parent-component>
+ <child-component>
+ <grand-child-component></grand-child-component>
+ </child-component>
+</parent-component>
+С приведенной выше иерархией компонентов в качестве примера для получения данных из parent-component вам нужно передавать данные (объект) в качестве props компоненту child-component и компоненту grand-child-component. Однако, если parent-component предоставляет (provide) данные (объект), grand-child-component может просто определить свойство inject для получения объекта, предоставляемого parent-component.
Ссылки:
- 🇷🇺 Официальный API
- 🇷🇺 Официальное руководство
- 🇺🇸 Взаимодействие компонента
- 🇺🇸 Внедрение зависимостей в приложении Vue.js с TypeScript
Provide / Inject
TIP
Вы также можете использовать @Provide, @Inject из vue-property-decorator
ThemeProvider.vue
<script>
+export default {
+ provide: {
+ theme: {
+ primaryColor: '#3eaf7c',
+ secondaryColor: '#1FA2FF'
+ },
+ },
+ render(h) {
+ return this.$slots.default[0];
+ },
+};
+</script>
+ThemeButton.vue
<template>
+ <button class="btn" :style="{ color: '#fff', backgroundColor: (primary && theme.primaryColor) || (secondary && theme.secondaryColor) }">
+ <slot></slot>
+ </button>
+</template>
+
+<script>
+export default {
+ inject: {
+ theme: {
+ default: {},
+ },
+ },
+ props: {
+ primary: {
+ type: Boolean,
+ default: false,
+ },
+ secondary: {
+ type: Boolean,
+ default: false,
+ },
+ },
+};
+</script>
+<theme-provider>
+ <theme-button secondary>Themed Button</theme-button>
+</theme-provider>
+Working Example:
Обработка ошибок
Хук errorCaptured
ErrorBoundary.vue
<script>
+export default {
+ name: 'ErrorBoundary',
+ data() {
+ return {
+ error: false,
+ errorMessage: '',
+ };
+ },
+ errorCaptured(err, vm, info) {
+ this.error = true;
+ this.errorMessage = `Sorry, error occured in ${info}`;
+
+ return false;
+ },
+ render(h) {
+ if (this.error) {
+ return h('p', { class: 'demo bg-danger' }, this.errorMessage);
+ }
+
+ return this.$slots.default[0];
+ },
+};
+</script>
+ThrowError.vue
<template>
+ <p class="demo">
+ <button class="btn btn-danger" @click.prevent="throwError()">Error Thrown Button ({{count}})</button>
+ </p>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ count: 0,
+ };
+ },
+ watch: {
+ count() {
+ throw new Error('error');
+ },
+ },
+ methods: {
+ throwError() {
+ this.count++;
+ },
+ },
+};
+</script>
+<error-boundary>
+ <throw-error></throw-error>
+</error-boundary>
+Рабочий пример:
References
Советы по продуктивности
Наблюдение при создании
// don't
+created() {
+ this.fetchUserList();
+},
+watch: {
+ searchText: 'fetchUserList',
+}
+// do
+watch: {
+ searchText: {
+ handler: 'fetchUserList',
+ immediate: true,
+ }
+}
++ Полезные ссылки + + → +
+ ← + + Полезные ссылки + + Переводы + + → +
Руководство по стилю
Рефакторинг
- 🇺🇸 Рефакторинг Vue: очистка списка сообщений с лучшим разделением компонентов и с большим количеством ES6
- 🇺🇸 Очистка модулей Vue с помощью стрелочных функций ES6
- 🇺🇸 Примеры чистого кода Vue
- 🇺🇸 Оптимизация производительности с помощью вычисляемых свойств
- 🇺🇸 Упрощение компонентов с помощью вычисляемых сеттеров
Управление состоянием
Vuex
- 🇺🇸 Разделение модулей Vuex с паттерном «Посредник»
- 🇺🇸 Геттеры Vuex великолепны, но не злоупотребляйте ими
- 🇺🇸 Повторное использование функций-мутаций Vuex
- 🇺🇸 Паттерн для обработки AJAX-запросов в Vuex
- 🇺🇸 Одиночные изменения мутацией Vuex vs. принципа единственной ответственности
- 🇺🇸 Компоненты и способы взаимодействия в Vue и Vuex
- 🇺🇸 Почему VueX — идеальный интерфейс между фронтендом и API
- 🇺🇸 Композиция действий с Vuex
- 🇺🇸 Как создавать сложные, крупномасштабные приложения Vue.js с Vuex
- 🇺🇸 Должен ли я хранить данные в Vuex?
- 🇺🇸 В общем, это как использовать v-model с Vuex. Вычисляемый сеттер в действии.
- 🇺🇸 5 Vuex-плагинов для вашего следующего проекта на VueJS
MobX
Компоненты без рендеринга
- 🇺🇸 Компоненты без рендеринга во Vue.js (🇷🇺 перевод)
- 🇺🇸 Создание компонентов без рендеринга для обработки CRUD-операций во Vue.js
Примеры
Структура каталогов
- 🇺🇸 Как улучшить рабочий процесс с помощью консоли JavaScript (🇷🇺 перевод)
- 🇺🇸 Как структурировать проект Vue.js
- 🇺🇸 Крупномасштабная структура приложения Vuex
- 🇺🇸 Структура приложения Vue.js и архитектура CSS
- 🇺🇸 Создание структуры Vue-компонентов
Советы и хитрости
- 🇺🇸 Как создать Vue-компоненты, как и профессионал 😎
- 🇺🇸 4 совета по работе с Vue.js (🇷🇺 перевод)
- 🇺🇸 Советы для непритязательного разработчика VueJS
- 🇺🇸 Throttle и debounce событий с помощью Vue и lodash
- 🇺🇸 Возможны ли частично применимые функции в обработчиках событий?
- 🇺🇸 Vue.js — соображения и трюки (🇷🇺 перевод)
- 🇺🇸 Шесть случайных проблем и их решения в VueJS
- 🇺🇸 Когда VueJS не может помочь вам
- 🇺🇸 То, что не будет работать с использованием Vue
- 🇺🇸 Трюк#15 Отложенное выполнение с _.debounce
- 🇺🇸 Обработка API-вызовов во Vue
- 🇺🇸 Слайды - Паттерны Vue & REST API
Маршрутизатор
- 🇷🇺 Навигационные хуки - Официальная документация
- 🇺🇸 Навигационные хуки Vue-маршрутизатора с Vuex
- 🇺🇸 Реализация простого мидлвара с Vue Router
Антипаттерны
- 🇺🇸 Крис Фриц (Chris Fritz) - Антипаттерны Vue.js (и как их избежать)
- 🇺🇸 Распространённые ошибки, которые следует избегать при работе с Vue.js
- 🇺🇸 Избегайте этого распространённого антипаттерна в приложениях с полным стеком Vue / Laravel
- 🇺🇸 [Видео] - VueNYC - Три запаха кода Vue, и что вы можете с ними поделать- Matt Rothenberg (@mattrothenberg)
Видео / Аудио
- 🇺🇸 81: Evan You - Продвинутый дизайн Vue-компонента
- 🇺🇸 7 секретных шаблонов, про которые Vue-консультанты не хотели бы, чтобы вы о них знали
Репозитории
Платное
TypeScript
- 🇺🇸 Vue + TypeScript: A Match Made in Your Code Editor
- 🇺🇸 Написание компонентов на основе классов с помощью Vue.js и TypeScript
- 🇺🇸 Написание модулей Vuex в аккуратных классах Typescript
Flowtype
GraphQL
Тестирование
Разное
- 🇺🇸 Создание Vue-компонента Interpose на основе реализации из React
- 🇺🇸 Составление вычисляемых свойств в Vue.js
- 🇺🇸 4 AJAX-паттерна для приложений Vue.js
- 🇺🇸 3 паттерна разделения кода для VueJS и Webpack
- 🇺🇸 Самый простой способ улучшить ваше приложение Vue.js. Часть 1
- 🇺🇸 Использование JSX с Vue и почему вам должно быть не всё равно
- 🇺🇸 Составные компоненты
- 🇺🇸 Создание многоуровневых компонентов Vue.js
- 🇺🇸 Понимание реактивности Vue.js в подробностях с помощью Object.defineProperty()
- 🇺🇸 Шаблонизация в Vue: разделение проблем или разделение технологий или что-то еще?
- 🇺🇸 Хранение данных компонентов Vue
- 🇺🇸 Создание многоразовых переходов во Vue
- 🇺🇸 vue-advanced-workshop
- 🇺🇸 Сделайте элегантно: Как создать пользовательские интерфейсы, основанные на данных во Vue
- 🇺🇸 Создание экземпляров компонентов Vue.js программным путём
- 🇺🇸 Управление разрешениями пользователей в приложении Vue.js
- 🇺🇸 Рендеринг функциональных компонентов во Vue.js
- 🇺🇸 Проход по свойствам объекта
- 🇺🇸 Отмена асинхронных операций в Vue.js
- 🇺🇸 Стили с ограниченной областью видимости с помощью v-html
- 🇺🇸 Постраничная навигация с помощью с Vuejs
- 🇺🇸 Функция render() — что такое аргумент h (🇷🇺 перевод)
- 🇺🇸 Как писать Vue-компоненты, которые хорошо взаимодействуют (🇷🇺 перевод)
- 🇺🇸 Создание адаптивных компонентов Vue с помощью ResizeObserver
- 🇺🇸 Обязательное руководство по формам во Vue.js
- 🇺🇸 Хороший, спорный, злой Vue.js (🇷🇺 перевод)
- 🇺🇸 Динамические компоненты шаблона Vue.js
- 🇺🇸 Продвинутые концепты Vue.js: примиси, пользовательские директивы, фильтры, переходы и управление состоянием
- 🇺🇸 Введение паттерна одиночного элемента
- 🇺🇸 Управление DOM за пределами вашего приложения Vue.js с помощью portal-vue
- 🇺🇸 Добавление i18n и управление переводами сайта на Vue.js
- 🇺🇸 Управление сложными ожиданиями в пользовательских веб-интерфейсах
- 🇺🇸 Vue.js — Формы, компоненты и соображения
- 🇺🇸 Повторно используемая логика во Vue-компонентах
- 🇺🇸 Рекурсия вложенных с древовидной структурой компонентов во Vue
- 🇺🇸 Чек-лист для написания повторно используемых компонентов в React и во Vue
+ ← + + Паттерны + + Книга Fullstack Vue + + → +
+ ← + + Useful Links + + Translations + + → +
Style Guide
Refactoring
- Refactoring Vue: Cleaning Up a List of Posts With Better Component Splitting and More ES6
- Clean up your Vue modules with ES6 Arrow Functions
- Examples of Vue’s Clean Code
- Optimizing Performance with Computed Properties
- Simplify Your Components with Computed Setters
- Learn how to refactor Vue.js Single File Components with a real-world example
Performance
- Vue.js App Performance Optimization: part 1 — Lazy loading and code splitting in Vue.js
- Vue.js App Performance Optimization: part 2 — Lazy loading of vue-router routes and common gotchas
- Vue.js App Performance Optimization: part 3 — Lazy loading of vue-router routes and common gotchas
- How to Drastically Reduce Estimated Input Latency and Time to Interactive of SSR Vue.js Applications
- Lazy Loading images with Vue.js directives and IntersectionObserver
State Management
Vuex
- Decouple Vuex modules with the Mediator pattern
- Vuex getters are great, but don’t overuse them
- Reusable Vuex Mutation Functions
- A pattern to handle ajax requests in Vuex
- [vuex Mutations] Single Changes vs. Single Responsibility
- Components and How They Interact in Vue and Vuex
- Why VueX Is The Perfect Interface Between Frontend and API
- Composing actions with Vuex
- How to Build Complex, Large-Scale Vue.js Apps With Vuex
- Should I Store This Data in Vuex?
- Anyway, this is how to use v-model with Vuex. Computed setter in action.
- 5 Vuex Plugins For Your Next VueJS Project
- Writing Vuex modules in neat Typescript classes
- Managing multiple central stores with Vuex
- Vuex Explained Visually
- Quick Intro to Vuex ORM
Mobx
Renderless Component
- Renderless Components in Vue.js
- Building Renderless Components to Handle CRUD Operations in Vue.js
- Building “Renderless” Vue Components
- Renderless or Bust! Why Renderless Component Libraries will Make Web Dev Easier and More Inclusive
- Vue.js Pattern for Async Requests: Using Renderless Components
Examples
Architecture
- Making a large scale app with vue.js (part 1): modularize your store!
- Making a large scale app with vue.js (part 2): a little bit of Object Oriented Programming.
- Is Vue.js Enterprise-Ready?—Large Scale Apps Use Cases
- How to avoid SOLID principles violations in Vue. JS application
Folder Structure
- How you can improve your workflow using the JavaScript console
- How to Structure a Vue.js Project
- Large-scale Vuex application structures
- Vue.js Application Structure and CSS Architecture
- Structuring Vue Components
- Structuring a Vue project — Authentication
Tips & Tricks
- How To Build Vue Components Like A Pro 😎
- Four tips for working with Vue.js
- Tips from a Lowly VueJS Developer
- Throttling and Debouncing Events with Vue.js and lodash
- Are partially applied functions in event handlers possible?
- Vue.js — Considerations and Tricks
- Six random issues and their solutions in VueJS.
- When VueJS Can't Help You
- Things that won’t work using Vue
- Tip#15 Delay execution with _.debounce
- Handling API calls in Vue
- Slide - Vue & REST API Patterns
- Type Vue without TypeScript
- Tracing or Debugging Vue.js Reactivity: The computed tree
- Fallback for Blocked Iframes: A (Crude) Solution with Vue.js
- Simplify Your Vue Components with Computed Setters
- Build Decoupled Vue.js Applications with Hooks
- How to Unlock the Full Potential of Prop Types in Vue
- One more example of abstract component in Vue.js
- A few handy Vue.js tricks
Router
- Navigation Guards - Official
- Vue Router Navigation Guards with Vuex
- Implementing a Simple Middleware with Vue Router
- Vue Router — The Missing Manual
- The lesser known amazing things VueRouter can do
- Storing and Using the Last Known Route in Vue
- Vue Route Component Hooks
Anti Patterns
- Chris Fritz - Vue.js Anti-Patterns (and How to Avoid Them)
- Common mistakes to avoid while working with Vue.js
- Avoid This Common Anti-Pattern In Full-Stack Vue/Laravel Apps
- [Video] - VueNYC - Three Vue code smells, and what you can do about them - Matt Rothenberg (@mattrothenberg)
- Why You Shouldn’t Use Vue.component
Videos / Audios
- 81: Evan You - Advanced Vue Component Design
- 7 Secret Patterns Vue Consultants Don’t Want You to Know
Repos
Paid
Typescript
- Vue + TypeScript: A Match Made in Your Code Editor
- Writing Class-Based Components with Vue.js and TypeScript
- Writing Vuex modules in neat Typescript classes
- Vue.js + Typescript best practices #1: How to create a modal service in Vue.js that is handling dialogs as a Promise to gain reusability of a modal components
- Vue.js + Typescript best practices #2: Using fully typed Vuex mutations with vuex-typescript
- Vue.js + Typescript best practices #3: Create a custom hook component like mounted or created
- Vue.js + Typescript best practices #4: create better $emit()
- Vue.js + Typescript best practices #5: Class-based fetching with Axios using DTO architecture
GraphQL
Test
- Testing Vuex Actions Correctly with Jest
- How to Use Mock Data in Vue Apps
- Mocking global objects in vue test utils
- Testing real world VueJs apps
- Unit Testing Vue-Router
- Working an application in Vue.js with TDD — An extensive guide for people who have time — part 1
- Working an application in Vue.js with TDD — An extensive guide for people who have time — part 2
- Working an application in Vue.js with TDD — An extensive guide for people who have time — part 3
- Working an application in Vue.js with TDD — An extensive guide for people who have time — part 4
- Working an application in Vue.js with TDD — An extensive guide for people who have time — part 5
- How to Use Mock Data in Vue Apps
Misc
- Creating an Interpose Vue component from a React implementation
- Composing computed properties in Vue.js
- 4 AJAX Patterns For Vue.js Apps
- 3 Code Splitting Patterns For VueJS and Webpack
- The easiest way to improve your Vue.js application. Part 1
- Using JSX with Vue and Why You Should Care
- Compound components
- Creating Multi-root Vue.js Components
- Understanding Vue.js Reactivity in Depth with Object.defineProperty()
- Templating in Vue: Separation of Concerns or Separation of Technology or something else?
- Stashing Vue components data
- Creating Reusable Transitions in Vue
- vue-advanced-workshop
- Do it with Elegance: How to Create Data-Driven User Interfaces in Vue
- Creating Vue.js Component Instances Programmatically
- Managing User Permissions in a Vue.js App
- Render Functional Components in Vue.js
- Looping through Object Properties
- Cancelling async operations in Vue.js
- Scoped styles with v-html
- Pagination With Vuejs
- What does the ‘h’ stand for in Vue’s render method?
- How To Build Vue Components That Play Nice
- Making responsive Vue components with ResizeObserver
- An imperative guide to forms in Vue.js
- Vue.js: the good, the meh, and the ugly
- Dynamic Vue.js Layout Components
- Advanced Vue.js concepts: mixins, custom directives, filters, transitions, and state management
- Introducing the Single Element Pattern
- Control DOM Outside Your Vue.js App with portal-vue
- Add i18n and manage translations of a Vue.js powered website
- Managing Complex Waiting Experiences on Web UIs
- Vue.js — Forms, components and considerations
- Reusing Logic in Vue Components
- Recursion for Nested, Tree-Structure Components in Vue
- Checklist for Writing Highly Reusable Components in React and Vue
- Build a Vue.js SEO-Friendly SPA with Prerender & Other Tips
- Vue.js (and Vuex) bug squasher cheatsheet
- Universal application code structure in Nuxt.js
- 7 Frontend Architecture Lessons From Nuxt.js
- What’s the deal with functional components in Vue.js?
- Vue API calls in a smart way
- How to create a Vue.js app using Single-File Components, without the CLI.
- A Vue pattern for idiomatic, performant component registration you might not know about
- Reacting to Promises from event listeners in Vue.js
- Vue.js Single File Component Factory
- Composing Components in Vue.js
- What to do when Vue hydration fails
- 7 Vue Patterns That You Should Be Using More Often
- Vue Enterprise Patterns - How to Build Components With Design System Variants And Share Variant Styles Using Variant Style Provider +
+ ← + + Patterns + + Fullstack Vue Book + + → +
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: