From 9057ce4fcc30f11f2483e848860303732e4e82fc Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Fri, 23 Jun 2017 15:05:03 +0800
Subject: [PATCH 01/30] :ok_hand: Sync to keep it up-to-date with the upstream
 repository

- Update translation due to upstream changes.
- Adjust the link for tracking changes to better show differences.
---
 README-CN.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/README-CN.md b/README-CN.md
index 1e36851..518e10e 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -1,6 +1,6 @@
 # Vue.js 组件编码规范
 
-> 这个 [链接](https://github.com/pablohpsilva/vuejs-component-style-guide/compare/6c5831912f9926a447f4d4531e745d53609aeb33...pablohpsilva:master) 用来查看本翻译与英文版是否有差别（如果你没有看到 README.md 发生变化，那就意味着这份翻译文档是最新的）。
+> 这个 [链接](https://github.com/sqrthree/vuejs-component-style-guide/compare/master...pablohpsilva:master) 用来查看本翻译与英文版是否有差别（如果你没有看到 README.md 发生变化，那就意味着这份翻译文档是最新的）。
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/img/logo.png"/>
@@ -28,7 +28,6 @@
 
 * [基于模块开发](#基于模块开发)
 * [vue 组件命名](#vue-组件命名)
-<!-- * [使用 `*.vue` 扩展名](#使用-vue-后缀作为扩展名) -->
 * [组件表达式简单化](#组件表达式简单化)
 * [组件 props 原子化](#组件-props-原子化)
 * [验证组件的 props](#验证组件的-props)
@@ -42,6 +41,7 @@
 * [提供组件 demo](#提供组件-demo)
 * [对组件文件进行代码校验](#对组件文件进行代码校验)
 * [只在需要时创建组件](#只在需要时创建组件)
+<!-- * [使用 `*.vue` 扩展名](#使用-vue-后缀作为扩展名) -->
 <!-- * [为你的项目添加徽章标识](#为你的项目添加徽章标识) -->
 
 ## 基于模块开发
@@ -218,11 +218,13 @@ Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很
 
 在 Vue.js 组件上下文中，`this`指向了组件实例。因此当你切换到了不同的上下文时，要确保 `this` 指向一个可用的 `component` 变量。
 
-换句话说，不要在编写这样的代码 `const self = this;` ，而是应该直接使用变量 `component`。
+换句话说，如果你正在使用 **ES6** 的话，就不要再编写 `var self = this;` 这样的代码了，您可以安全地使用 Vue 组件。
 
 ### 为什么？
 
-* 将组件 `this` 赋值给变量 `component`可用让开发者清楚的知道任何一个被使用的地方，它代表的是组件实例。
+* 使用 **ES6**，就不再需要将 `this` 保存到一个变量中了。
+* 一般来说，当你使用箭头函数时，会保留 `this` 的作用域。（译者注：箭头函数没有它自己的 this 值，箭头函数内的 this 值继承自外围作用域。）
+* 如果你没有使用 **ES6**，当然也就不会使用 `箭头函数` 啦，那你必须将 “this” 保存到到某个变量中。这是唯一的例外。
 
 ### 怎么做？
 

From 6dbea2c080a1d1eba3d02d14d1baa83c7eb1e82b Mon Sep 17 00:00:00 2001
From: Emil Valeev <emil.musician@gmail.com>
Date: Thu, 6 Jul 2017 21:29:07 +0300
Subject: [PATCH 02/30] Fix type and Update README-RU

---
 README-RU.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README-RU.md b/README-RU.md
index d1d92eb..2b23b96 100644
--- a/README-RU.md
+++ b/README-RU.md
@@ -168,9 +168,9 @@
 
 [↑ наверх](#Содержание)
 
-## Ограничивайте используйте свойства компонента
+## Ограничивайте использование свойств компонента
 
-В Vue свойства компонента (`props`) являются отражением его API. Ясное и понятное API делает ваши компоненты более простыми для использования другими разработчиками.
+Во Vue свойства компонента (`props`) это его API. Ясное и понятное API делает ваши компоненты более простыми для использования другими разработчиками.
 
 Свойства передаются с использованием специальных атрибутов тега. Эти атрибуты могут быть либо указаны как пустые значения (`:attr`), либо присвоены строкам (`:attr="value"` или `v-bind:attr="value"`). Обратите внимание на подобные возможности при описании свойств.
 

From 3b032ec72d5722b93aefd425a6cc3230bc5956b2 Mon Sep 17 00:00:00 2001
From: cetaju <kontakt@julian-claus.de>
Date: Sat, 29 Jul 2017 10:19:29 +0200
Subject: [PATCH 03/30] added recommend usage of mixins

---
 README.md | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)

diff --git a/README.md b/README.md
index 494cc98..0256348 100644
--- a/README.md
+++ b/README.md
@@ -628,6 +628,106 @@ Vue.js is a component framework based. Not knowing when to create components can
 
 [↑ back to Table of Contents](#table-of-contents)
 
+## Use mixins wherever possible
+
+### Why?
+
+Mixins encapsulate reusable code and avoid duplication. If two components share the same functionality, a mixin can be used. With mixins, you can focus on the individual component task and abstract common code. This helps to better maintain your application.
+
+### How?
+
+Let's say you have a mobile and desktop menu component whose share some functionality. First, let's see how the mobile component looks like.
+
+```html
+<template>
+  <ul class="mobile">
+    <li @click="changeLanguage">Change language</li>
+  </ul>  
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        language: 'EN'
+      }
+    },
+
+    methods: {
+      changeLanguage () {
+        if (this.language === 'DE') this.$set(this, 'language', 'EN')
+        if (this.language === 'EN') this.$set(this, 'language', 'DE')
+      }
+    }
+  }
+</script>
+```
+
+Now let's investigate the desktop menu component.
+
+```html
+<template>
+  <button @click="changeLanguage">Change language</button>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        language: 'EN'
+      }
+    },
+
+    methods: {
+      changeLanguage () {
+        if (this.language === 'DE') this.$set(this, 'language', 'EN')
+        if (this.language === 'EN') this.$set(this, 'language', 'DE')
+      }
+    }
+  }
+</script>
+```
+
+We can abstract the core functionalities of both into a mixin like this.
+
+```js
+const MenuMixin = {
+  data () {
+    return {
+      language: 'EN'
+    }
+  },
+
+  methods: {
+    changeLanguage () {
+      if (this.language === 'DE') this.$set(this, 'language', 'EN')
+      if (this.language === 'EN') this.$set(this, 'language', 'DE')
+    }
+  }
+}
+
+export default MenuMixin
+```
+
+To use the mixin, simply import into both components (I only show the mobile component).
+
+```html
+<template>
+  <ul class="mobile">
+    <li @click="changeLanguage">Change language</li>
+  </ul>  
+</template>
+
+<script>
+  import MenuMixin from './MenuMixin'
+
+  export default {
+    mixin: [MenuMixin]
+  }
+</script>
+
+[↑ back to Table of Contents](#table-of-contents)
+
 ---
 
 ## Wanna help?

From 7cb6e8727d1e03183f9113c173609c52ccd9b0fa Mon Sep 17 00:00:00 2001
From: cetaju <kontakt@julian-claus.de>
Date: Sat, 29 Jul 2017 10:21:58 +0200
Subject: [PATCH 04/30] fixed wording and code example markdown

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0256348..ba5df82 100644
--- a/README.md
+++ b/README.md
@@ -709,7 +709,7 @@ const MenuMixin = {
 export default MenuMixin
 ```
 
-To use the mixin, simply import into both components (I only show the mobile component).
+To use the mixin, simply import it into both components (I only show the mobile component).
 
 ```html
 <template>
@@ -725,6 +725,7 @@ To use the mixin, simply import into both components (I only show the mobile com
     mixin: [MenuMixin]
   }
 </script>
+```
 
 [↑ back to Table of Contents](#table-of-contents)
 

From 9954c2bf38760994f7390757aa6c419d31fdb9e5 Mon Sep 17 00:00:00 2001
From: cetaju <kontakt@julian-claus.de>
Date: Sat, 29 Jul 2017 10:23:35 +0200
Subject: [PATCH 05/30] fixed mixin to mixins

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ba5df82..812c779 100644
--- a/README.md
+++ b/README.md
@@ -722,7 +722,7 @@ To use the mixin, simply import it into both components (I only show the mobile
   import MenuMixin from './MenuMixin'
 
   export default {
-    mixin: [MenuMixin]
+    mixins: [MenuMixin]
   }
 </script>
 ```

From 89416902e73b7f014ce29d349fcb85fa76ef0af6 Mon Sep 17 00:00:00 2001
From: tobigumo <tobigumo@users.noreply.github.com>
Date: Wed, 2 Aug 2017 22:21:55 +0900
Subject: [PATCH 06/30] Update README-JP.md

Add backquote
---
 README-JP.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README-JP.md b/README-JP.md
index 2b395ba..5684022 100644
--- a/README-JP.md
+++ b/README-JP.md
@@ -564,7 +564,7 @@ Lintersはコードの一貫性を高め、構文エラーの追跡に役立ち
 
 ### 方法
 
-lintersがあなたの`*.vue`ファイルからスクリプトを抽出するためには, [スクリプトを<script>コンポーネントの中に置き](#use-script-inside-component)、 [コンポーネントの記述をシンプルに保つ](#keep-component-expressions-simple)ようにしてください (lintersはそれらを理解できないので)。 グローバル変数`vue`とコンポーネントの`props`を許可するようにリンターを設定します。
+lintersがあなたの`*.vue`ファイルからスクリプトを抽出するためには, [スクリプトを`<script>`コンポーネントの中に置き](#use-script-inside-component)、 [コンポーネントの記述をシンプルに保つ](#keep-component-expressions-simple)ようにしてください (lintersはそれらを理解できないので)。 グローバル変数`vue`とコンポーネントの`props`を許可するようにリンターを設定します。
 
 #### ESLint
 

From f5e480e8af50be0286405439f95813db5f06d6ab Mon Sep 17 00:00:00 2001
From: cetaju <kontakt@julian-claus.de>
Date: Fri, 11 Aug 2017 06:41:22 +0200
Subject: [PATCH 07/30] simplified examples using only mobile component as an
 example

---
 README.md | 55 ++-----------------------------------------------------
 1 file changed, 2 insertions(+), 53 deletions(-)

diff --git a/README.md b/README.md
index 812c779..093c868 100644
--- a/README.md
+++ b/README.md
@@ -636,59 +636,8 @@ Mixins encapsulate reusable code and avoid duplication. If two components share
 
 ### How?
 
-Let's say you have a mobile and desktop menu component whose share some functionality. First, let's see how the mobile component looks like.
-
-```html
-<template>
-  <ul class="mobile">
-    <li @click="changeLanguage">Change language</li>
-  </ul>  
-</template>
-
-<script>
-  export default {
-    data () {
-      return {
-        language: 'EN'
-      }
-    },
-
-    methods: {
-      changeLanguage () {
-        if (this.language === 'DE') this.$set(this, 'language', 'EN')
-        if (this.language === 'EN') this.$set(this, 'language', 'DE')
-      }
-    }
-  }
-</script>
-```
-
-Now let's investigate the desktop menu component.
-
-```html
-<template>
-  <button @click="changeLanguage">Change language</button>
-</template>
-
-<script>
-  export default {
-    data () {
-      return {
-        language: 'EN'
-      }
-    },
-
-    methods: {
-      changeLanguage () {
-        if (this.language === 'DE') this.$set(this, 'language', 'EN')
-        if (this.language === 'EN') this.$set(this, 'language', 'DE')
-      }
-    }
-  }
-</script>
-```
-
-We can abstract the core functionalities of both into a mixin like this.
+Let's say you have a mobile and desktop menu component whose share some functionality. We can abstract the core 
+functionalities of both into a mixin like this.
 
 ```js
 const MenuMixin = {

From 1633cb8681a21a01f8f582f8f90d0e6e332b8fd5 Mon Sep 17 00:00:00 2001
From: capaci <rafaelcp123@gmail.com>
Date: Mon, 28 Aug 2017 14:55:25 -0300
Subject: [PATCH 08/30] removed english texts from brazilian portuguese
 translation

---
 README-PTBR.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/README-PTBR.md b/README-PTBR.md
index 90f38fb..a19a7bf 100644
--- a/README-PTBR.md
+++ b/README-PTBR.md
@@ -56,8 +56,7 @@ Módulos pequenos são fáceis de aprender, compreender, manter, reusar e debuga
 
 Cada componente Vue (como qualquer outro módulo) deve ser [FIRST](https://addyosmani.com/first/): *Focused* ([single responsibility](http://en.wikipedia.org/wiki/Single_responsibility_principle)), *Independent*, *Reusable*, *Small* e *Testable*.
 
-Se o seu componente faz muitas coisas ou está grande demais, quebre-o em componentes menores, cada um fazendo uma única coisa. Como uma regra
-If your component does too much or gets too big, split it up into smaller components which each do just one thing. Como um princípio básico, tente manter o componente com menos de 100 linhas de código.
+Se o seu componente faz muitas coisas ou está grande demais, quebre-o em componentes menores, cada um fazendo uma única coisa. Como um princípio básico, tente manter o componente com menos de 100 linhas de código.
 Assegure que o componente Vue funcione isoladamente, como por exemplo, se somente ele é necessário para uma demonstração dele mesmo.
 
 [↑ voltar para o Índice](#indice)
@@ -456,7 +455,6 @@ Elementos dos componentes Vue.js são elementos customizados que podem ser usado
 
 ### Porque?
 
-* Scoping styles to a component element improves predictability as its prevents styles leaking outside the component element;
 * Usar `<style scope>` num componente, melhora a previsibilidade e previne os estilos de vazar fora do componente;
 * Usando o mesmo nome para o diretório do módulo, o componente Vue.js e o estilo ficam mais fáceis de serem vistos e entendidos de onde eles surgiram.
 

From b615b7bc085ee92be9e7e177f2f050fa2ed4c72e Mon Sep 17 00:00:00 2001
From: Adriano Resende <zullcore@gmail.com>
Date: Thu, 7 Sep 2017 19:56:42 -0300
Subject: [PATCH 09/30] Update README-PTBR.md

Correct the words
---
 README-PTBR.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README-PTBR.md b/README-PTBR.md
index a19a7bf..bc4ebb8 100644
--- a/README-PTBR.md
+++ b/README-PTBR.md
@@ -354,7 +354,7 @@ Vue.js suporta componentes aninhados, assim como acesso ao contexto do pai deste
 ### Como?
 
 * Passe os valores do pai para o componente via props;
-* Passe os métodos definidos no componente pao para o componente filho usando callbacks em expressões;
+* Passe os métodos definidos no componente pai para o componente filho usando callbacks em expressões;
 * Emita eventos do componente filho e escute-os no componente pai.
 
 [↑ voltar para o Índice](#indice)
@@ -375,7 +375,7 @@ Componente em Vue.js permite o acesso do contexto de outros componentes e elemen
 * Nunca escreva código muito específico. Se voce precisa escrever um código específico dentro de um componente genérico, significa que a API ainda não está genérica o suficiente ou talvez você precise de um outro componente;
 * Cheque todas as props para ver se falta alguma coisa. Se esse for o caso, melhore-o ou crie uma issue com a proposta de melhoria;
 * Cheque todos os eventos. Na maioria dos casos, desenvolvedores esquecem a comunicação entre Pai-Filho (eventos);
-* **Props down, events up!** Melhore o seu compoennte quando for necessário com uma boa API e tenha isolamento como um objetivo;
+* **Props down, events up!** Melhore o seu componente quando for necessário com uma boa API e tenha isolamento como um objetivo;
 * Usando `this.$refs` em componentes, deveria ser usado somente quando props e eventos não podem mais ser usados ou quando faz mais sentido (veja o exemplo abaixo);
 * Usando `this.$refs` para acessar elementos DOM (ao invés de usar `jQuery`, `document.getElement*`, `document.queryElement`) é tranquilo, quando o elemento não pode ser manipulado com data binding ou com uma diretiva.
 

From 0e51f841c158900545dd7ee3a04e6a9aab6b1189 Mon Sep 17 00:00:00 2001
From: choznerol <b02611002@ntu.edu.tw>
Date: Wed, 27 Sep 2017 21:32:51 +0800
Subject: [PATCH 10/30] fix broken link

---
 README-CN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README-CN.md b/README-CN.md
index 518e10e..fdadfad 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -337,7 +337,7 @@ Vue.js 提供的处理函数和表达式都是绑定在 ViewModel 上的，组
 
 ## 避免 this.$parent
 
-Vue.js 支持组件嵌套，并且子组件可访问父组件的上下文。访问组件之外的上下文违反了[基于模块开发](基于模块开发)的[第一原则](https://addyosmani.com/first/)。因此你应该尽量避免使用 **`this.$parent`**。
+Vue.js 支持组件嵌套，并且子组件可访问父组件的上下文。访问组件之外的上下文违反了[基于模块开发](#基于模块开发)的[第一原则](https://addyosmani.com/first/)。因此你应该尽量避免使用 **`this.$parent`**。
 
 ### 为什么？
 

From ada13c0fb0733d7ec608106f06b187a118b1c88d Mon Sep 17 00:00:00 2001
From: Joshua Coquelle <joshuacoquelle@gmail.com>
Date: Thu, 28 Sep 2017 12:16:46 -0700
Subject: [PATCH 11/30] update english README to include mixins in component
 structure

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 093c868..ea6f9ee 100644
--- a/README.md
+++ b/README.md
@@ -299,6 +299,8 @@ Component structure:
   export default {
     // Do not forget this little guy
     name: 'RangeSlider',
+    // share common functionality with component mixins
+    mixins: [],
     // compose new components
     extends: {},
     // component properties/variables

From 1c63ff883bc1989d53297ceb02936becfb3f14da Mon Sep 17 00:00:00 2001
From: k-miyoshi <miyoshiez22@gmail.com>
Date: Fri, 20 Oct 2017 13:37:08 +0900
Subject: [PATCH 12/30] Update README-JP.md

Add contents. because there was a difference between English and Japanese
---
 README-JP.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README-JP.md b/README-JP.md
index 5684022..84f5205 100644
--- a/README-JP.md
+++ b/README-JP.md
@@ -239,7 +239,9 @@ Vue.jsコンポーネントのコンテキスト内では、 `this`はコンポ
 
 ### 理由
 
-* `this`を`component`という名前の変数に代入することにより、この変数が使用されているコンポーネントインスタンスにバインドされていることが開発者に伝わります。
+* ES6を使っている場合、`this`を変数に保存しておく必要はありません。
+* 通常、アロー関数を使用すれば静的スコープは保持されます。
+* ES6を使用して**いない**ために、`アロー関数`を使用できない場合は、`this`を変数に格納する必要があります。それが唯一の例外です。
 
 ### 方法
 

From 52b8d5faf37172df3805d2456ae0bccc8d739705 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= <marcelo@precisaosistemas.com.br>
Date: Fri, 20 Oct 2017 08:47:11 -0200
Subject: [PATCH 13/30] fix: Typos in PT-BR

---
 README-PTBR.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README-PTBR.md b/README-PTBR.md
index bc4ebb8..2206fd8 100644
--- a/README-PTBR.md
+++ b/README-PTBR.md
@@ -337,7 +337,7 @@ Vue.js liga todas as funções e expressões estritamente ligadas ao ViewModel d
 ### Como?
 
 * Eventos devem ser nomeados usando kebab-cased;
-* Um único evento deve ser emitido para cada ação no seu componente que pode ser interessante como uma API, por eemplo: upload-success, upload-error ou até mesmo dropzone-upload-success, dropzone-upload-error (se você acha que ter um escopo como prefixo seja necessário);
+* Um único evento deve ser emitido para cada ação no seu componente que pode ser interessante como uma API, por exemplo: upload-success, upload-error ou até mesmo dropzone-upload-success, dropzone-upload-error (se você acha que ter um escopo como prefixo seja necessário);
 * Eventos devem terminar em verbos e usar a nomes no infinitivo (exemplo, client-api-load) ou usar substantivos (exemplo, drive-upload-success) ([source](https://github.com/GoogleWebComponents/style-guide#events));
 
 [↑ voltar para o Índice](#indice)
@@ -455,7 +455,7 @@ Elementos dos componentes Vue.js são elementos customizados que podem ser usado
 
 ### Porque?
 
-* Usar `<style scope>` num componente, melhora a previsibilidade e previne os estilos de vazar fora do componente;
+* Usar `<style scope>` num componente, melhora a previsibilidade e previne os estilos de vazar para fora do componente;
 * Usando o mesmo nome para o diretório do módulo, o componente Vue.js e o estilo ficam mais fáceis de serem vistos e entendidos de onde eles surgiram.
 
 ### Como?
@@ -537,7 +537,7 @@ Adicione um `index.html` que tenha demonstrações do componente com configuraç
 
 ### Porque?
 
-* Uma demontração do componente prova que o component funciona isoladamente;
+* Uma demontração do componente prova que o componente funciona isoladamente;
 * Uma demontração do componente dá aos desenvolvedores uma prévia antes de entrar na documentação ou no código;
 * Demonstrações ilustram todas as possíveis configurações e variações que um componente pode ser usado.
 
@@ -555,7 +555,7 @@ Linters melhoram a consistência de código e ajudam a rastrear erros de sintaxe
 
 ### Como?
 
-Para fazer com que linters estraiam o script dos seus arquivos `*.vue`, configure o seu linter para acessar variáveis globais `vue` e props de componentes.
+Para fazer com que linters extraiam o script dos seus arquivos `*.vue`, configure o seu linter para acessar variáveis globais `vue` e props de componentes.
 
 #### ESLint
 

From 6ee05194b6f84612582c8a7300173dcf65129fab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcelo=20Augusto=20Vieira=20Forment=C3=A3o?=
 <marceloavf3@hotmail.com>
Date: Fri, 27 Oct 2017 12:57:50 -0200
Subject: [PATCH 14/30] fix: typos in PT-BR

---
 README-PTBR.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README-PTBR.md b/README-PTBR.md
index 2206fd8..284a0d2 100644
--- a/README-PTBR.md
+++ b/README-PTBR.md
@@ -537,8 +537,8 @@ Adicione um `index.html` que tenha demonstrações do componente com configuraç
 
 ### Porque?
 
-* Uma demontração do componente prova que o componente funciona isoladamente;
-* Uma demontração do componente dá aos desenvolvedores uma prévia antes de entrar na documentação ou no código;
+* Uma demonstração do componente prova que o componente funciona isoladamente;
+* Uma demonstração do componente dá aos desenvolvedores uma prévia antes de entrar na documentação ou no código;
 * Demonstrações ilustram todas as possíveis configurações e variações que um componente pode ser usado.
 
 [↑ voltar para o Índice](#indice)

From a18e60361ebea52a0b8b04948d6f037bc09980b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=9F=E5=AD=90=E5=BD=93=E5=A6=82=E5=93=88=E5=A3=AB?=
 =?UTF-8?q?=E5=A5=87?= <592364224@qq.com>
Date: Thu, 11 Jan 2018 11:11:55 +0800
Subject: [PATCH 15/30] =?UTF-8?q?modify=20translation=20error:=20=E5=BD=A2?=
 =?UTF-8?q?=E5=AE=B9=E8=AF=8D->=E5=90=8D=E8=AF=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README-CN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README-CN.md b/README-CN.md
index fdadfad..a9f0ba8 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -330,7 +330,7 @@ Vue.js 提供的处理函数和表达式都是绑定在 ViewModel 上的，组
 
 * 事件名也使用连字符命名。
 * 一个事件的名字对应组件外的一组意义操作，如：upload-success、upload-error 以及 dropzone-upload-success、dropzone-upload-error （如果需要前缀的话）。
-* 事件命名应该以动词（如 client-api-load） 或是 形容词（如 drive-upload-success）结尾。（[出处](https://github.com/GoogleWebComponents/style-guide#events)）
+* 事件命名应该以动词（如 client-api-load） 或是 名词（如 drive-upload-success）结尾。（[出处](https://github.com/GoogleWebComponents/style-guide#events)）
 
 
 [↑ 回到目录](#目录)

From 1a14d468b70fc0fbad42efac67765db59b10ea6f Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Thu, 25 Jan 2018 20:22:21 +0800
Subject: [PATCH 16/30] translate the new section about mixins due to 3b032ec

---
 README-CN.md | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/README-CN.md b/README-CN.md
index a9f0ba8..31d0ba1 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -7,6 +7,7 @@
 </p>
 
 ### 其它语言
+
 * [英文](https://pablohpsilva.github.io/vuejs-component-style-guide/#/)
 * [葡萄牙语](https://pablohpsilva.github.io/vuejs-component-style-guide/#/portuguese)
 * [日本](https://pablohpsilva.github.io/vuejs-component-style-guide/#/japanese)
@@ -288,7 +289,9 @@ export default {
   export default {
     // 不要忘记了 name 属性
     name: 'RangeSlider',
-    // 组合其它组件
+    // 使用组件 mixins 共享通用功能
+    mixins: [],
+    // 组成新的组件
     extends: {},
     // 组件属性、变量
     props: {
@@ -616,6 +619,56 @@ Vue.js 是一个基于组件的框架。如果你不知道何时创建组件可
 
 ---
 
+## 尽可能使用 mixins
+
+### 为什么?
+
+Mixins 封装可重用的代码，避免了重复。如果两个组件共享有相同的功能，则可以使用 mixin。通过 mixin，你可以专注于单个组件的任务和抽象的通用代码。这有助于更好地维护你的应用程序。
+
+### 怎么做?
+
+假设你有一个移动端和桌面端的菜单组件，它们共享一些功能。我们可以抽象出这两个组件的核心功能到一个 mixin 中，例如：
+
+```js
+const MenuMixin = {
+  data () {
+    return {
+      language: 'EN'
+    }
+  },
+
+  methods: {
+    changeLanguage () {
+      if (this.language === 'DE') this.$set(this, 'language', 'EN')
+      if (this.language === 'EN') this.$set(this, 'language', 'DE')
+    }
+  }
+}
+
+export default MenuMixin
+```
+要使用 mixin，只需将其导入到两个组件中（我只展示移动组件）。
+
+```html
+<template>
+  <ul class="mobile">
+    <li @click="changeLanguage">Change language</li>
+  </ul>
+</template>
+
+<script>
+  import MenuMixin from './MenuMixin'
+
+  export default {
+    mixins: [MenuMixin]
+  }
+</script>
+```
+
+[↑ 回到目录](#目录)
+
+---
+
 ### 如何提供帮助？
 
 Fork 和提 PR 以帮助我们改进或者可以给我们提 [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/new)。

From d738e1d50e62ce344ed3f55ac772e5b1ec687adb Mon Sep 17 00:00:00 2001
From: Chris Diana <cdiana.media@gmail.com>
Date: Thu, 19 Apr 2018 14:24:37 +0000
Subject: [PATCH 17/30] fix typo at vue component names

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ea6f9ee..f2fbed1 100644
--- a/README.md
+++ b/README.md
@@ -69,7 +69,7 @@ Each component name must be:
 
 * **Meaningful**: not over specific, not overly abstract.
 * **Short**: 2 or 3 words.
-* **Pronounceable**: we want to be able talk about them.
+* **Pronounceable**: we want to be able to talk about them.
 
 Vue component names must also be:
 

From 36e2c081d0363577d94e558e9a10d1892a501396 Mon Sep 17 00:00:00 2001
From: Hassan <usgitan@gmail.com>
Date: Sun, 29 Apr 2018 15:45:16 +0900
Subject: [PATCH 18/30] fix: Typo in README_JP.md

---
 README-JP.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README-JP.md b/README-JP.md
index 84f5205..c597733 100644
--- a/README-JP.md
+++ b/README-JP.md
@@ -162,7 +162,7 @@ Vue.jsは複雑なJavaScriptオブジェクトを渡せるようになってい
 
 * 各propの属性を別々に使用することにより、コンポーネントは明確で表現力豊かなAPIを持つことになります。
 * propsの値としてプリミティブとファンクションのみを使用することで、コンポーネントのAPIをネイティブHTML（5）のAPIに似たものにできます。
-* 各propの属性を使用することで、他の開発者がコンポネーントインスタンスに何が渡されるかを理解しやすくなります。
+* 各propの属性を使用することで、他の開発者がコンポーネントインスタンスに何が渡されるかを理解しやすくなります。
 * 複雑なオブジェクトが渡されると、そのオブジェクトのどのプロパティとメソッドが実際にカスタムコンポーネントで使われるかがわかりにくくなります。これによりコードのリファクタリングが難しくなり、腐敗を招くことになります。
 
 ### 方法

From decdee7c4d8217c4927c1b58c35ced62d160ce55 Mon Sep 17 00:00:00 2001
From: Hassan <usgitan@gmail.com>
Date: Sun, 29 Apr 2018 16:14:59 +0900
Subject: [PATCH 19/30] fix: anchor names

---
 README-JP.md | 66 ++++++++++++++++++++++++++--------------------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/README-JP.md b/README-JP.md
index c597733..49e1972 100644
--- a/README-JP.md
+++ b/README-JP.md
@@ -24,22 +24,22 @@
 
 ## 目次
 
-* [モジュールベースの開発](#module-based-development)
-* [Vueコンポーネントの名前](#vue-component-names)
+* [モジュールベースの開発](#モジュールベースの開発)
+* [Vueコンポーネントの名前](#vueコンポーネントの名前)
 <!-- * [Use `*.vue` extension](#use-vue-extension) -->
-* [コンポーネントの記述をシンプルに保つ](#keep-component-expressions-simple)
-* [コンポーネントのpropをプリミティブに保つ](#keep-component-props-primitive)
-* [コンポーネントのpropの利用](#harness-your-component-props)
-* [`this`を`component`に割り当てる](#assign-this-to-component)
-* [コンポーネント構成](#component-structure)
-* [コンポーネントイベント名](#component-event-names)
-* [`this.$parent`を避ける](#avoid-thisparent)
-* [`this.$refs`は注意して使用する](#use-thisrefs-with-caution)
-* [スタイルスコープとしてコンポーネント名を使用する](#use-component-name-as-style-scope)
-* [コンポーネントAPIをドキュメント化する](#document-your-component-api)
-* [コンポーネントデモの追加](#add-a-component-demo)
-* [コンポーネントファイルをLintする](#lint-your-component-files)
-* [必要に応じてコンポーネントを作成する](#create-components-when-needed)
+* [コンポーネントの記述をシンプルに保つ](#コンポーネントの記述をシンプルに保つ)
+* [コンポーネントのpropsをプリミティブに保つ](#コンポーネントのpropsをプリミティブに保つ)
+* [コンポーネントのpropsの利用](#コンポーネントのpropsの利用)
+* [`this`を`component`に割り当てる](#thisをcomponentに割り当てる)
+* [コンポーネント構成](#コンポーネント構成)
+* [コンポーネントイベント名](#コンポーネントイベント名)
+* [`this.$parent`を避ける](#thisparentを避ける)
+* [`this.$refs`は注意して使用する](#thisrefsは注意して使用する)
+* [スタイルスコープとしてコンポーネント名を使用する](#スタイルスコープとしてコンポーネント名を使用する)
+* [コンポーネントAPIをドキュメント化する](#コンポーネントapiをドキュメント化する)
+* [コンポーネントデモの追加](#コンポーネントデモの追加)
+* [コンポーネントファイルをLintする](#コンポーネントファイルをlintする)
+* [必要に応じてコンポーネントを作成する](#必要に応じてコンポーネントを作成する)
 <!-- * [Add badge to your project](#add-badge-to-your-project) -->
 
 
@@ -62,7 +62,7 @@
 経験則から言うと、各コンポーネントは１００行以下のコードになるようにするのがいいでしょう。また、例えばスタンドアローンのデモを追加することによって、
 Vueコンポーネントが独立して動作することを確認しましょう。
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 
 ## Vueコンポーネントの名前
@@ -100,7 +100,7 @@ Vueコンポーネントが独立して動作することを確認しましょ
 <slider></slider> <!-- カスタム要素仕様に準拠していません -->
 ```
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 
 ## コンポーネントの記述をシンプルに保つ
@@ -151,7 +151,7 @@ Vue.jsのインラインの記述は100％JavaScriptです。これは非常に
 </template>
 ```
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 
 ## コンポーネントのpropsをプリミティブに保つ
@@ -184,7 +184,7 @@ Vue.jsは複雑なJavaScriptオブジェクトを渡せるようになってい
 <range-slider :config="complexConfigObject"></range-slider>
 ```
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 
 ## コンポーネントのpropsの利用
@@ -227,7 +227,7 @@ Vue.jsでは、あなたのコンポーネントのpropsはあなたのAPIです
 </script>
 ```
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 
 ## `this`を`component`に割り当てる
@@ -275,7 +275,7 @@ export default {
 </script>
 ```
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 
 ## コンポーネント構成
@@ -288,7 +288,7 @@ export default {
 * props、data、computed、watches、そしてmethodsをアルファベット順に並べることで、見つけやすくなります。
 * 繰り返しになりますが, コンポーネントをグループ化することで読みやすくなります (name、extends、props、dataそしてcomputed、components、 watch、methods、lifecycle methods、など);
 * `name`属性を使いましょう. [vue devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en)とname属性を使うと、開発/テストが容易になります。
-* [BEM](https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw)、または [rscss](https://github.com/rstacruz/rscss)のようなCSSの命名方法論を使いましょう。 - [詳細?](#use-component-name-as-style-scope);
+* [BEM](https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw)、または [rscss](https://github.com/rstacruz/rscss)のようなCSSの命名方法論を使いましょう。 - [詳細?](#スタイルスコープとしてコンポーネント名を使用する);
 * Vue.jsの製作者Evan Youが推奨するように、テンプレートスクリプト形式の.vueファイル構成を使用しましょう。
 
 ### 方法
@@ -333,7 +333,7 @@ export default {
 </style>
 ```
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 ## コンポーネントイベント名
 
@@ -350,7 +350,7 @@ Vue.jsはすべてのVueハンドラ関数を提供し、式はViewModelに厳
 * あなたのコンポーネントで外部で関心を持つ独自のアクションのため、upload-success、upload-error、さらにはdropzone-upload-success、 dropzone-upload-errorのような固有の名前をつける必要があります。(スコープ付きプレフィックスを使用する必要がある場合は)
 * イベント名は末尾が不定形の動詞(例 client-api-load)、または名詞(例 drive-upload-success)で終わるべきです。([出典](https://github.com/GoogleWebComponents/style-guide#events));
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 ## `this.$parent`を避ける
 
@@ -367,7 +367,7 @@ Vue.jsは、親コンテキストにアクセスできるネストされたコ
 * 属性の式のコールバックを使用して、親コンポーネントで定義されたメソッドを子コンポーネントに渡します。
 * 子コンポーネントからイベントを発行し、それを親コンポーネントでキャッチします。
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 ## `this.$refs`は注意して使用する
 
@@ -456,7 +456,7 @@ Vue.jsは`ref`属性を介して他のコンポーネントや、基本的なHTM
 </script>
 ```
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 
 ## スタイルスコープとしてコンポーネント名を使用する
@@ -487,7 +487,7 @@ BEMとOOCSSに基づくネームスペースプレフィックスとしてコン
 </style>
 ```
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 
 ## コンポーネントAPIをドキュメント化する
@@ -539,7 +539,7 @@ range sliderは、スライダーレールのハンドルを開始値と終了
 スライダの外観をカスタマイズするには[noUiSliderドキュメントのStylingセクション](http://refreshless.com/nouislider/more/#section-styling)を参照してください。
 
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 
 ## コンポーネントデモの追加
@@ -552,7 +552,7 @@ range sliderは、スライダーレールのハンドルを開始値と終了
 * コンポーネントのデモは、ドキュメンテーションやコードを掘り起こす前に、開発者にプレビューを提供します。
 * デモでは、コンポーネントを使用できるすべての可能な構成とバリエーションを示すことができます。
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 
 ## コンポーネントファイルをLintする
@@ -566,7 +566,7 @@ Lintersはコードの一貫性を高め、構文エラーの追跡に役立ち
 
 ### 方法
 
-lintersがあなたの`*.vue`ファイルからスクリプトを抽出するためには, [スクリプトを`<script>`コンポーネントの中に置き](#use-script-inside-component)、 [コンポーネントの記述をシンプルに保つ](#keep-component-expressions-simple)ようにしてください (lintersはそれらを理解できないので)。 グローバル変数`vue`とコンポーネントの`props`を許可するようにリンターを設定します。
+lintersがあなたの`*.vue`ファイルからスクリプトを抽出するためには, [スクリプトを`<script>`コンポーネントの中に置き](#use-script-inside-component)、 [コンポーネントの記述をシンプルに保つ](#コンポーネントの記述をシンプルに保つ)ようにしてください (lintersはそれらを理解できないので)。 グローバル変数`vue`とコンポーネントの`props`を許可するようにリンターを設定します。
 
 #### ESLint
 
@@ -610,7 +610,7 @@ jshint --config modules/.jshintrc --extra-ext=html --extract=auto modules/
 ```
 注意: JSHintは`vue`を拡張子として受け入れず, htmlだけを受け入れます。
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 
 ## 必要に応じてコンポーネントを作成する
@@ -633,7 +633,7 @@ Vue.jsはコンポーネントフレームワークに基づいています。
 * 第２に、新しい開発ごとに、ページ全体またはその一部分について、急いで開発する前に考えてみてください。その一部がコンポーネントであることが分かっている場合は、作成してください。
 * 最後に、もし確信がなければ、コンポーネントを作らないでください！"後で役立つかもしれない"コンポーネントであなたのプロジェクトを汚染するのを避けましょう。それらは空っぽで、永遠にそこにあるだけかもしれません。プロジェクトの残りの部分との互換性の複雑さを避けるために、その状態になっていたことに気づいたらすぐにそれを分解するよう注意してください。
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 ---
 
@@ -669,7 +669,7 @@ Or html:
 </a>
 ```
 
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
 
 ---
 

From 0a5e5959d232fd775a9f32cf1b9ae5719590bbe0 Mon Sep 17 00:00:00 2001
From: Pablo Henrique <pablohpsilva@gmail.com>
Date: Sun, 29 Apr 2018 14:38:26 -0300
Subject: [PATCH 20/30] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f2fbed1..739b124 100644
--- a/README.md
+++ b/README.md
@@ -561,7 +561,7 @@ Linters improve code consistency and help trace syntax errors. .vue files can be
 
 ### How?
 
-To allow linters to extract the scripts from your `*.vue` files, [put script inside a `<script>` component](#use-script-inside-component) and [keep component expressions simple](#keep-component-expressions-simple) (as linters don't understand those). Configure your linter to allow global variables `vue` and component `props`.
+To allow linters to extract the scripts from your `*.vue` files, put script inside a `<script>` component and [keep component expressions simple](#keep-component-expressions-simple) (as linters don't understand those). Configure your linter to allow global variables `vue` and component `props`.
 
 #### ESLint
 

From 8e443a5f94dbfc881c9ae1ad26b5e788d31c8f77 Mon Sep 17 00:00:00 2001
From: Andrey <andrey-vat@yandex.ru>
Date: Mon, 30 Apr 2018 16:06:05 +0300
Subject: [PATCH 21/30] Fixed typos in sample code in the 'Keep component props
 primitive' section

---
 README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 739b124..b6bf986 100644
--- a/README.md
+++ b/README.md
@@ -166,11 +166,11 @@ Use a component attribute per props, with a primitive or function as value:
 <!-- recommended -->
 <range-slider
   :values="[10, 20]"
-  min="0"
-  max="100"
-  step="5"
-  :on-slide="updateInputs"
-  :on-end="updateResults">
+  :min="0"
+  :max="100"
+  :step="5"
+  @on-slide="updateInputs"
+  @on-end="updateResults">
 </range-slider>
 
 <!-- avoid -->

From adcf67f2dc8eac17f99fcd271122981295cd9cc0 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Sat, 26 May 2018 16:11:25 +0800
Subject: [PATCH 22/30] :pencil2: docs(CN): Sync with upstream to keep it
 up-to-date

More details about changes are in #1

Signed-off-by: sqrtthree <imsqrtthree@gmail.com>
---
 README-CN.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/README-CN.md b/README-CN.md
index 31d0ba1..9d12300 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -160,11 +160,11 @@ Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很
 <!-- 推荐 -->
 <range-slider
   :values="[10, 20]"
-  min="0"
-  max="100"
-  step="5"
-  :on-slide="updateInputs"
-  :on-end="updateResults">
+  :min="0"
+  :max="100"
+  :step="5"
+  @on-slide="updateInputs"
+  @on-end="updateResults">
 </range-slider>
 
 <!-- 避免 -->
@@ -547,7 +547,7 @@ range slider 组件可通过拖动的方式来设置一个给定范围内的数
 
 ### 怎么做？
 
-为了校验工具能够校验 `*.vue`文件，你需要将代码编写在 `<script>`标签中，并使[组件表达式简单化](#保持组件表达式简单化)，因为校验工具无法理解行内表达式，配置校验工具可以访问全局变量 `vue` 和组件的 `props`。
+为了校验工具能够校验 `*.vue`文件，你需要将代码编写在 `<script>` 标签中，并使[组件表达式简单化](#保持组件表达式简单化)，因为校验工具无法理解行内表达式，配置校验工具可以访问全局变量 `vue` 和组件的 `props`。
 
 #### ESLint
 

From 0d37de447101de4b540ff9309e342920aba29142 Mon Sep 17 00:00:00 2001
From: xiansheng lu <xianshenglu733@gmail.com>
Date: Fri, 29 Mar 2019 11:03:14 +0800
Subject: [PATCH 23/30] style name should use `name`  attribute in script

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b6bf986..bb685a8 100644
--- a/README.md
+++ b/README.md
@@ -290,7 +290,7 @@ Component structure:
 
 ```html
 <template lang="html">
-  <div class="Ranger__Wrapper">
+  <div class="RangeSlider__Wrapper">
     <!-- ... -->
   </div>
 </template>
@@ -324,7 +324,7 @@ Component structure:
 </script>
 
 <style scoped>
-  .Ranger__Wrapper { /* ... */ }
+  .RangeSlider__Wrapper { /* ... */ }
 </style>
 ```
 

From ff86c952ef96fa477c8964722114cfb2a5366466 Mon Sep 17 00:00:00 2001
From: Jasper Moelker <jasper@voorhoede.nl>
Date: Mon, 8 Jul 2019 21:09:34 +0200
Subject: [PATCH 24/30] Update link to "valid custom element name" spec

The old reference no longer exists.

The same change was made in the "upstream" Riot Style Guide repository: https://github.com/voorhoede/riotjs-style-guide/pull/65/commits/c60d7863e8a095965025974f1414f44317f2ff4d
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bb685a8..7a7ffe1 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,7 @@ Each component name must be:
 
 Vue component names must also be:
 
-* **Custom element spec compliant**: [include a hyphen](https://www.w3.org/TR/custom-elements/#concepts), don't use reserved names.
+* **Custom element spec compliant**: [include a hyphen](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), don't use reserved names.
 * **`app-` namespaced**: if very generic and otherwise 1 word, so that it can easily be reused in other projects.
 
 ### Why?

From 442f5fa9878c86eb95ca8bbf622cb3c7e311b948 Mon Sep 17 00:00:00 2001
From: Alireza Arabshahi <arabshahi.alireza@outlook.com>
Date: Thu, 21 Jul 2022 21:46:39 +0430
Subject: [PATCH 25/30] add persian translation (part 1)

---
 README-FA.md | 735 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 735 insertions(+)
 create mode 100644 README-FA.md

diff --git a/README-FA.md b/README-FA.md
new file mode 100644
index 0000000..bc022e2
--- /dev/null
+++ b/README-FA.md
@@ -0,0 +1,735 @@
+# Vue.js راهنمای سبک نگارش کامپوننت در
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/img/logo.png"/>
+</p>
+
+### ترجمه ها
+
+- [فارسی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/)
+- [پرتغالی برزیلی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/portuguese)
+- [چینی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/chinese)
+- [ژاپنی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/japanese)
+- [کره ای](https://pablohpsilva.github.io/vuejs-component-style-guide/#/korean)
+- [روسی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian)
+
+## هدف
+
+این راهنما یک راه متحد الشکل برای ساختار دادن به کد [Vue.js](http://vuejs.org/) شما فراهم می کند. موارد زیر را ممکن می سازد:
+
+- برای توسعه دهندگان و اعضای تیم فهمیدن و پیدا کردن کد ها آسان تر است.
+- برای محیط های یکپارچه توسعه (IDEs) تفسیر کد و فراهم کردن پشتیبانی آسان تر است.
+- استفاده و یا استفاده مجدد از ابزار های build که قبلا استفاده می کردید آسان تر است.
+- نهان سازی (cache) و ارائه بسته های کد به طور جداگانه آسان تر است.
+
+این راهنما از مخزن [RiotJS Style Guide](https://github.com/voorhoede/riotjs-style-guide) که توسط [De Voorhoede](https://github.com/voorhoede) نوشته شده است الهام گرفته شده است.
+
+## فهرست مطالب
+
+- [توسعه مبتی بر ماژول](#module-based-development)
+- [نام های کامپوننت Vue](#vue-component-names)
+- [تکه کد های کامپوننت را ساده نگه دارید](#keep-component-expressions-simple)
+- [پراپ های کامپوننت را ساده نگه دارید](#keep-component-props-primitive)
+- [از پراپ های کامپوننت استفاده بهینه کنید](#harness-your-component-props)
+- [کلمه کلیدی `this` را به کامپوننت نسبت دهید](#assign-this-to-component)
+- [ساختار کامپوننت](#component-structure)
+- [نام های ایونت کامپوننت](#component-event-names)
+- [از استفاده کردن از `this.$parent` پرهیز کنید](#avoid-thisparent)
+- [از `this.$refs` با احتیاط استفاده کنید](#use-thisrefs-with-caution)
+- [از نام کامپوننت به عنوان محدوده استایل استفاده کنید](#use-component-name-as-style-scope)
+- [برای API کامپوننت خود مستند بنویسید](#document-your-component-api)
+- [دمو کامپوننت را اضافه کنید](#add-a-component-demo)
+- [فایل های کامپوننت خود را Lint کنید](#lint-your-component-files)
+- [کامپوننت ها را وقتی بسازید که به آن ها نیاز دارید](#create-components-when-needed)
+  <!-- * [Use `*.vue` extension](#use-vue-extension) -->
+  <!-- * [Add badge to your project](#add-badge-to-your-project) -->
+
+## توسعه مبتی بر ماژول
+
+همیشه برنامه خود را با استفاده از ماژول های کوچکی که فقط یک کار و آن کار را هم خوب انجام می دهند, بسازید.
+
+یک ماژول یک بخش کوچک و مستقل از یک برنامه است. کتابخانه Vue.jsبه طور مشخص برای کمک کردن برای ساخت _view-logic modules_ طراحی شده است .
+
+### چرا?
+
+ماژول های کوچک برای یادگیری و فهمیدن و نگهداری و استفاده مجدد و رفع مشکل راحت تر هستند. هم برای خود شما و هم برای توسعه دهندگان دیگر.
+
+### با چه روشی?
+
+Each Vue component (like any module) must be [در ابتدا](https://addyosmani.com/first/): _داشتن یک هدف مشخص_ ([تک وظیفه‌ای](http://en.wikipedia.org/wiki/Single_responsibility_principle)), _Independent_, _Reusable_, _Small_ and _Testable_.
+
+If your component does too much or gets too big, split it up into smaller components which each do just one thing. As a rule of thumb, try to keep each component file less than 100 lines of code.
+Also ensure your Vue component works in isolation. For instance by adding a stand-alone demo.
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Vue Component Names
+
+Each component name must be:
+
+- **Meaningful**: not over specific, not overly abstract.
+- **Short**: 2 or 3 words.
+- **Pronounceable**: we want to be able to talk about them.
+
+Vue component names must also be:
+
+- **Custom element spec compliant**: [include a hyphen](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), don't use reserved names.
+- **`app-` namespaced**: if very generic and otherwise 1 word, so that it can easily be reused in other projects.
+
+### چرا؟
+
+- The name is used to communicate about the component. So it must be short, meaningful and pronounceable.
+
+### با چه روشی?
+
+```html
+<!-- پیشنهادی -->
+<app-header></app-header>
+<user-list></user-list>
+<range-slider></range-slider>
+
+<!-- پرهیز کنید -->
+<btn-group></btn-group>
+
+<!-- کوتاه است, اما قابل تلفظ کردن نیست. از `button-group` به جایش استفاده کنید -->
+<ui-slider></ui-slider>
+<!-- همه کامپوننت های عضوی از المان های رابط کاربری هستند, پس این نام گذاری بی معنی است -->
+<slider></slider>
+<!-- مطابق با تعریف عنصر سفارشی نیست -->
+```
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Keep component expressions simple
+
+Vue.js's inline expressions are 100% Javascript. This makes them extremely powerful, but potentially also very complex. Therefore you should **keep expressions simple**.
+
+### چرا؟
+
+- Complex inline expressions are hard to read.
+- Inline expressions can't be reused elsewhere. This can lead to code duplication and code rot.
+- IDEs typically don't have support for expression syntax, so your IDE can't autocomplete or validate.
+
+### با چه روشی?
+
+If it gets too complex or hard to read **move it to methods or computed properties**!
+
+```html
+<!-- پیشنهادی -->
+<template>
+  <h1>{{ `${year}-${month}` }}</h1>
+</template>
+<script type="text/javascript">
+  export default {
+    computed: {
+      month() {
+        return this.twoDigits(new Date().getUTCMonth() + 1)
+      },
+      year() {
+        return new Date().getUTCFullYear()
+      },
+    },
+    methods: {
+      twoDigits(num) {
+        return ('0' + num).slice(-2)
+      },
+    },
+  }
+</script>
+
+<!-- avoid -->
+<template>
+  <h1>
+    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new
+    Date()).getUTCMonth()+1)).slice(-2)}` }}
+  </h1>
+</template>
+```
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Keep component props primitive
+
+While Vue.js supports passing complex JavaScript objects via these attributes, you should try to **keep the component props as primitive as possible**. Try to only use [JavaScript primitives](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) (strings, numbers, booleans) and functions. Avoid complex objects.
+
+### چرا؟
+
+- By using an attribute for each prop separately the component has a clear and expressive API;
+- By using only primitives and functions as props values our component APIs are similar to the APIs of native HTML(5) elements;
+- By using an attribute for each prop, other developers can easily understand what is passed to the component instance;
+- When passing complex objects it's not apparent which properties and methods of the objects are actually being used by the custom components. This makes it hard to refactor code and can lead to code rot.
+
+### با چه روشی?
+
+Use a component attribute per props, with a primitive or function as value:
+
+```html
+<!-- پیشنهادی -->
+<range-slider
+  :values="[10, 20]"
+  :min="0"
+  :max="100"
+  :step="5"
+  @on-slide="updateInputs"
+  @on-end="updateResults"
+>
+</range-slider>
+
+<!-- avoid -->
+<range-slider :config="complexConfigObject"></range-slider>
+```
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## از پراپ های کامپوننت استفاده بهینه کنید
+
+In Vue.js your component props are your API. A robust and predictable API makes your components easy to use by other developers.
+
+Component props are passed via custom HTML attributes. The values of these attributes can be Vue.js plain strings (`:attr="value"` or `v-bind:attr="value"`) or missing entirely. You should **harness your component props** to allow for these different cases.
+
+### چرا؟
+
+Harnessing your component props ensures your component will always function (defensive programming). Even when other developers later use your components in ways you haven't thought of yet.
+
+### با چه روشی?
+
+- Use defaults for props values.
+- Use `type` option to [validate](http://vuejs.org/v2/guide/components.html#Prop-Validation) values to an expected type.**[1\*]**
+- Check if props exists before using it.
+
+```html
+<template>
+  <input type="range" v-model="value" :max="max" :min="min" />
+</template>
+<script type="text/javascript">
+  export default {
+    props: {
+      max: {
+        type: Number, // [1*] This will validate the 'max' prop to be a Number.
+        default() {
+          return 10
+        },
+      },
+      min: {
+        type: Number,
+        default() {
+          return 0
+        },
+      },
+      value: {
+        type: Number,
+        default() {
+          return 4
+        },
+      },
+    },
+  }
+</script>
+```
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Assign `this` to `component`
+
+Within the context of a Vue.js component element, `this` is bound to the component instance.
+Therefore when you need to reference it in a different context, ensure `this` is available as `component`.
+
+In other words: Do **NOT** code things like `var self = this;` anymore if you're using **ES6**. You're safe using Vue components.
+
+### چرا؟
+
+- Using ES6, there's no need to save `this` to a variable;
+- In general, when using arrow functions the lexical scope is kept
+- If you're **NOT** using ES6 and, therefore, not using `Arrow Functions`, you'd have to add `this` to a variable. That's the only exception.
+
+### با چه روشی?
+
+```html
+<script type="text/javascript">
+  export default {
+    methods: {
+      hello() {
+        return 'hello'
+      },
+      printHello() {
+        console.log(this.hello())
+      },
+    },
+  }
+</script>
+
+<!-- avoid -->
+<script type="text/javascript">
+  export default {
+    methods: {
+      hello() {
+        return 'hello'
+      },
+      printHello() {
+        const self = this // unnecessary
+        console.log(self.hello())
+      },
+    },
+  }
+</script>
+```
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Component structure
+
+Make it easy to reason and follow a sequence of thoughts. See the How.
+
+### چرا؟
+
+- Having the component export a clear and grouped object, makes the code easy to read and easier for developers to have a code standard.
+- Alphabetizing the properties, data, computed, watches, and methods makes them easy to find.
+- Again, grouping makes the component easier to read (name; extends; props, data and computed; components; watch and methods; lifecycle methods, etc.);
+- Use the `name` attribute. Using [vue devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) and that attribute will make your development/testing easier;
+- Use a CSS naming Methodology, like [BEM](https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw), or [rscss](https://github.com/rstacruz/rscss) - [details?](#use-component-name-as-style-scope);
+- Use the template-script-style .vue file organization, as recomended by Evan You, Vue.js creator.
+
+### با چه روشی?
+
+Component structure:
+
+```html
+<template lang="html">
+  <div class="RangeSlider__Wrapper">
+    <!-- ... -->
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    // Do not forget this little guy
+    name: 'RangeSlider',
+    // share common functionality with component mixins
+    mixins: [],
+    // compose new components
+    extends: {},
+    // component properties/variables
+    props: {
+      bar: {}, // Alphabetized
+      foo: {},
+      fooBar: {},
+    },
+    // variables
+    data() {},
+    computed: {},
+    // when component uses other components
+    components: {},
+    // methods
+    watch: {},
+    methods: {},
+    // component Lifecycle hooks
+    beforeCreate() {},
+    mounted() {},
+  }
+</script>
+
+<style scoped>
+  .RangeSlider__Wrapper {
+    /* ... */
+  }
+</style>
+```
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Component event names
+
+Vue.js provides all Vue handler functions and expressions are strictly bound to the ViewModel. Each component events should follow a good naming style that will avoid issues during the development. See the **Why** below.
+
+### چرا؟
+
+- Developers are free to use native likes event names and it can cause confusion down the line;
+- The freedom of naming events can lead to a [DOM templates incompatibility](https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats);
+
+### با چه روشی?
+
+- Event names should be kebab-cased;
+- A unique event name should be fired for unique actions in your component that will be of interest to the outside world, like: upload-success, upload-error or even dropzone-upload-success, dropzone-upload-error (if you see the need for having a scoped prefix);
+- Events should either end in verbs in the infinitive form (e.g. client-api-load) or nouns (e.g drive-upload-success) ([source](https://github.com/GoogleWebComponents/style-guide#events));
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Avoid `this.$parent`
+
+Vue.js supports nested components which have access to their parent context. Accessing context outside your vue component violates the [FIRST](https://addyosmani.com/first/) rule of [component based development](#module-based-development). Therefore you should **avoid using `this.$parent`**.
+
+### چرا؟
+
+- A vue component, like any component, must work in isolation. If a component needs to access its parent, this rule is broken.
+- If a component needs access to its parent, it can no longer be reused in a different context.
+
+### با چه روشی?
+
+- Pass values from the parent to the child component using attribute/properties.
+- Pass methods defined on the parent component to the child component using callbacks in attribute expressions.
+- Emit events from child components and catch it on parent component.
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Use `this.$refs` with caution
+
+Vue.js supports components to have access to other components and basic HTML elements context via `ref` attribute. That attribute will provide an accessible way through `this.$refs` to a component or DOM element context. In most cases, the need to access **other components** context via `this.$refs` could be avoided. This is why you should be careful when using it to avoid wrong component APIs.
+
+### چرا؟
+
+- A vue component, like any component, **must work in isolation**. If a component does not support all the access needed, it was badly designed/implemented.
+- Properties and events should be sufficient to most of your components.
+
+### با چه روشی?
+
+- Create a good component API.
+- Always focus on the component purpose out of the box.
+- Never write specific code. If you need to write specific code inside a generic component, it means its API isn't generic enough or maybe you need a new component to manage other cases.
+- Check all the props to see if something is missing. If it is, create an issue or enhance the component yourself.
+- Check all the events. In most cases developers forget that Child-Parent communication (events) is needed, that's why they only remember the Parent-Child communication (using props).
+- **Props down, events up!** Upgrade your component when requested with a good API and isolation as goals.
+- Using `this.$refs` on components should be used when props and events are exhausted and having it makes sense (see the example below).
+- Using `this.$refs` to access DOM elements (instead of doing `jQuery`, `document.getElement*`, `document.queryElement`) is just fine, when the element can't be manipulated with data bindings or for a directive.
+
+```html
+<!-- good, no need for ref -->
+<range :max="max" :min="min" @current-value="currentValue" :step="1"></range>
+```
+
+```html
+<!-- good example of when to use this.$refs -->
+<modal ref="basicModal">
+  <h4>Basic Modal</h4>
+  <button class="primary" @click="$refs.basicModal.hide()">Close</button>
+</modal>
+<button @click="$refs.basicModal.open()">Open modal</button>
+
+<!-- Modal component -->
+<template>
+  <div v-show="active">
+    <!-- ... -->
+  </div>
+</template>
+
+<script>
+  export default {
+    // ...
+    data() {
+      return {
+        active: false,
+      }
+    },
+    methods: {
+      open() {
+        this.active = true
+      },
+      hide() {
+        this.active = false
+      },
+    },
+    // ...
+  }
+</script>
+```
+
+```html
+<!-- avoid accessing something that could be emitted -->
+<template>
+  <range :max="max" :min="min" ref="range" :step="1"></range>
+</template>
+
+<script>
+  export default {
+    // ...
+    methods: {
+      getRangeCurrentValue() {
+        return this.$refs.range.currentValue
+      },
+    },
+    // ...
+  }
+</script>
+```
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Use component name as style scope
+
+Vue.js component elements are custom elements which can very well be used as style scope root.
+Alternatively the component name can be used as CSS class namespace.
+
+### چرا؟
+
+- Scoping styles to a component element improves predictability as its prevents styles leaking outside the component element.
+- Using the same name for the module directory, the Vue.js component and the style root makes it easy for developers to understand they belong together.
+
+### با چه روشی?
+
+Use the component name as a namespace prefix based on BEM and OOCSS **and** use the `scoped` attribute on your style class.
+The use of `scoped` will tell your Vue compiler to add a signature on every class that your `<style>` have. That signature will force your browser (if it supports) to apply your components
+CSS on all tags that compose your component, leading to a no leaking css styling.
+
+```html
+<style scoped>
+  /* پیشنهادی */
+  .MyExample {
+  }
+  .MyExample li {
+  }
+  .MyExample__item {
+  }
+
+  /* avoid */
+  .My-Example {
+  } /* not scoped to component or module name, not BEM compliant */
+</style>
+```
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Document your component API
+
+A Vue.js component instance is created by using the component element inside your application. The instance is configured through its custom attributes. For the component to be used by other developers, these custom attributes - the component's API - should be documented in a `README.md` file.
+
+### چرا؟
+
+- Documentation provides developers with a high level overview to a component, without the need to go through all its code. This makes a component more accessible and easier to use.
+- A component's API is the set of custom attributes through which its configured. Therefore these are especially of interest to other developers which only want to consume (and not develop) the component.
+- Documentation formalises the API and tells developers which functionality to keep backwards compatible when modifying the component's code.
+- `README.md` is the de facto standard filename for documentation to be read first. Code repository hosting services (Github, Bitbucket, Gitlab etc) display the contents of the the README's, directly when browsing through source directories. This applies to our module directories as well.
+
+### با چه روشی?
+
+Add a `README.md` file to the component's module directory:
+
+```
+range-slider/
+├── range-slider.vue
+├── range-slider.less
+└── README.md
+```
+
+Within the README file, describe the functionality and the usage of the module. For a vue component its most useful to describe the custom attributes it supports as those are its API:
+
+# Range slider
+
+## Functionality
+
+The range slider lets the user to set a numeric range by dragging a handle on a slider rail for both the start and end value.
+
+This module uses the [noUiSlider](http://refreshless.com/nouislider/) for cross browser and touch support.
+
+## Usage
+
+`<range-slider>` supports the following custom component attributes:
+
+| attribute  | type                | description                                                                                                                                                                                                                                  |
+| ---------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `min`      | Number              | number where range starts (lower limit).                                                                                                                                                                                                     |
+| `max`      | Number              | Number where range ends (upper limit).                                                                                                                                                                                                       |
+| `values`   | Number[] _optional_ | Array containing start and end value. E.g. `values="[10, 20]"`. Defaults to `[opts.min, opts.max]`.                                                                                                                                          |
+| `step`     | Number _optional_   | Number to increment / decrement values by. Defaults to 1.                                                                                                                                                                                    |
+| `on-slide` | Function _optional_ | Function called with `(values, HANDLE)` while a user drags the start (`HANDLE == 0`) or end (`HANDLE == 1`) handle. E.g. `on-slide={ updateInputs }`, with `component.updateInputs = (values, HANDLE) => { const value = values[HANDLE]; }`. |
+| `on-end`   | Function _optional_ | Function called with `(values, HANDLE)` when user stops dragging a handle.                                                                                                                                                                   |
+
+For customising the slider appearance see the [Styling section in the noUiSlider docs](http://refreshless.com/nouislider/more/#section-styling).
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Add a component demo
+
+Add a `index.html` file with demos of the component with different configurations, showing how the component can be used.
+
+### چرا؟
+
+- A component demo proves the component works in isolation.
+- A component demo gives developers a preview before having to dig into the documentation or code.
+- Demos can illustrate all the possible configurations and variations a component can be used in.
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Lint your component files
+
+Linters improve code consistency and help trace syntax errors. .vue files can be linted adding the `eslint-plugin-html` in your project. If you choose, you can start a project with ESLint enabled by default using `vue-cli`;
+
+### چرا؟
+
+- Linting component files ensures all developers use the same code style.
+- Linting component files helps you trace syntax errors before it's too late.
+
+### با چه روشی?
+
+To allow linters to extract the scripts from your `*.vue` files, put script inside a `<script>` component and [keep component expressions simple](#keep-component-expressions-simple) (as linters don't understand those). Configure your linter to allow global variables `vue` and component `props`.
+
+#### ESLint
+
+[ESLint](http://eslint.org/) requires an extra [ESLint HTML plugin](https://github.com/BenoitZugmeyer/eslint-plugin-html#eslint-plugin-html) to extract the script from the component files.
+
+Configure ESLint in a `.eslintrc` file (so IDEs can interpret it as well):
+
+```json
+{
+  "extends": "eslint:پیشنهادی",
+  "plugins": ["html"],
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "opts": true,
+    "vue": true
+  }
+}
+```
+
+Run ESLint
+
+```bash
+eslint src/**/*.vue
+```
+
+#### JSHint
+
+[JSHint](http://jshint.com/) can parse HTML (using `--extra-ext`) and extract script (using `--extract=auto`).
+
+Configure JSHint in `.jshintrc` file (so IDEs can interpret it as well):
+
+```json
+{
+  "browser": true,
+  "predef": ["opts", "vue"]
+}
+```
+
+Run JSHint
+
+```bash
+jshint --config modules/.jshintrc --extra-ext=html --extract=auto modules/
+```
+
+Note: JSHint does not accept `vue` as extension, but only `html`.
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Create components when needed
+
+### چرا؟
+
+Vue.js is a component framework based. Not knowing when to create components can lead to issues like:
+
+- If the component is too big, it probably will be hard to (re)use and maintain;
+- If the component is too small, your project gets flooded, harder to make components communicate;
+
+### با چه روشی?
+
+- Always remember to build your components for your project needs, but you should also try to think of them being able to work out of it. If they can work out of your project, such as a library, it makes them a lot more robust and consistent;
+- It's always better to build your components as early as possible since it allows you to build your communications (props & events) on existing and stable components.
+
+### Rules
+
+- First, try to build obvious components as early as possible such as: modal, popover, toolbar, menu, header, etc. Overall, components you know for sure you will need later on. On your current page or globally;
+- Secondly, on each new development, for a whole page or a portion of it, try to think before rushing in. If you know some parts of it should be a component, build it;
+- Lastly, if you're not sure, then don't! Avoid polluting your project with "possibly useful later" components, they might just stand there forever, empty of smartness. Note it's better to break it down as soon as you realize it should have been, to avoid the complexity of compatibility with the rest of the project;
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+## Use mixins wherever possible
+
+### چرا؟
+
+Mixins encapsulate reusable code and avoid duplication. If two components share the same functionality, a mixin can be used. With mixins, you can focus on the individual component task and abstract common code. This helps to better maintain your application.
+
+### با چه روشی?
+
+Let's say you have a mobile and desktop menu component whose share some functionality. We can abstract the core
+functionalities of both into a mixin like this.
+
+```js
+const MenuMixin = {
+  data() {
+    return {
+      language: 'EN',
+    }
+  },
+
+  methods: {
+    changeLanguage() {
+      if (this.language === 'DE') this.$set(this, 'language', 'EN')
+      if (this.language === 'EN') this.$set(this, 'language', 'DE')
+    },
+  },
+}
+
+export default MenuMixin
+```
+
+To use the mixin, simply import it into both components (I only show the mobile component).
+
+```html
+<template>
+  <ul class="mobile">
+    <li @click="changeLanguage">تغییر زبان</li>
+  </ul>
+</template>
+
+<script>
+  import MenuMixin from './MenuMixin'
+
+  export default {
+    mixins: [MenuMixin],
+  }
+</script>
+```
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+---
+
+## Wanna help?
+
+Fork it and Pull Request what you think it should be good to have or just create an [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/new).
+
+<!-- ## Add badge to your project
+
+You can use the *Vue.js Style Guide badge* to link to this guide:
+
+[![Vue.js Style Guide badge](https://cdn.rawgit.com/voorhoede/Vue.js-style-guide/master/Vue.js-style-guide.svg)](https://github.com/voorhoede/Vue.js-style-guide)
+
+### چرا؟
+
+Inform other developers your project is following the Vue.js Style Guide. And let them know where they can find this guide.
+
+### با چه روشی?
+
+Include the badge in your project. In markdown:
+
+```markdown
+[![Vue.js Style Guide badge](https://cdn.rawgit.com/voorhoede/Vue.js-style-guide/master/Vue.js-style-guide.svg)](https://github.com/voorhoede/Vue.js-style-guide)
+```
+
+Or html:
+
+```html
+<a href="https://github.com/voorhoede/Vue.js-style-guide">
+    <img alt="Vue.js Style Guide badge"
+       src="https://cdn.rawgit.com/voorhoede/Vue.js-style-guide/master/Vue.js-style-guide.svg">
+</a>
+```
+
+[↑ برگشت به فهرست مطالب](#table-of-contents)
+
+---
+
+## License
+
+[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)
+
+[De Voorhoede](https://twitter.com/devoorhoede) waives all rights to this work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.
+
+You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.
+ -->
+
+## نویسندگان ترجمه
+
+- [Brazilian Portuguese](README-PTBR.md): Pablo Henrique Silva [github:pablohpsilva](https://github.com/pablohpsilva), [توییتر: @PabloHPSilva](https://twitter.com/PabloHPSilva)
+- [روسی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian): Mikhail Kuznetcov [github:shershen08](https://github.com/shershen08), [توییتر: @legkoletat](https://twitter.com/legkoletat)
+- [فارسی](README-FA.md): علیرضا عربشاهی [github:AlirezaArabshahi](https://github.com/AlirezaArabshahi), [توییتر: @iialireza7](https://twitter.com/iialireza7)

From 66762ac3b79df39f8b3f95a63464934da8c48d53 Mon Sep 17 00:00:00 2001
From: Alireza Arabshahi <arabshahi.alireza@outlook.com>
Date: Sun, 24 Jul 2022 22:19:46 +0430
Subject: [PATCH 26/30] add persian translation (part 2)

---
 README-FA.md | 50 +++++++++++++++++++++++++-------------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/README-FA.md b/README-FA.md
index bc022e2..b01aaf9 100644
--- a/README-FA.md
+++ b/README-FA.md
@@ -52,33 +52,33 @@
 
 ### چرا?
 
-ماژول های کوچک برای یادگیری و فهمیدن و نگهداری و استفاده مجدد و رفع مشکل راحت تر هستند. هم برای خود شما و هم برای توسعه دهندگان دیگر.
+ماژول های کوچک برای یادگیری، فهمیدن، نگهداری، استفاده مجدد و رفع مشکلات چه برای خود شما و چه برای توسعه دهندگان دیگر راحت تر هستند.
 
 ### با چه روشی?
 
-Each Vue component (like any module) must be [در ابتدا](https://addyosmani.com/first/): _داشتن یک هدف مشخص_ ([تک وظیفه‌ای](http://en.wikipedia.org/wiki/Single_responsibility_principle)), _Independent_, _Reusable_, _Small_ and _Testable_.
+هر کامپوننت Vue (مثل یک ماژول) باید [در ابتدا](https://addyosmani.com/first/): _یک هدف مشخص_ ([تک وظیفه‌ای](http://en.wikipedia.org/wiki/Single_responsibility_principle)), _مستقل_, _قابل استفاده مجدد_, _کوچک_ و _تست پذیر_ باشد.
 
-If your component does too much or gets too big, split it up into smaller components which each do just one thing. As a rule of thumb, try to keep each component file less than 100 lines of code.
-Also ensure your Vue component works in isolation. For instance by adding a stand-alone demo.
+اگر کامپوننت شما کار های زیادی انجام می دهد و یا خیلی بزرگ شده است آن را به کامپوننا های کوچکتر تقسیم کتید به طوری که هر کدام فقط یه کار را انجام دهند و بر حسب تجربه تلاش کنید که فایل هر کامپوننت کمتر از 100 خط کد باشد.
+همچنین مطمئن شوید کامپوننت شما به صورت مجزا کار می کند برای مثال یک دمو مستقل برای آن قرار دهید.
 
 [↑ برگشت به فهرست مطالب](#table-of-contents)
 
-## Vue Component Names
+## [نام های کامپوننت Vue
 
-Each component name must be:
+نام هر کامپوننت باید موارد زیر را شامل شود:
 
-- **Meaningful**: not over specific, not overly abstract.
-- **Short**: 2 or 3 words.
-- **Pronounceable**: we want to be able to talk about them.
+- **معنی دار**: نه بیش از حد دقیق و نه بیش از حد خلاصه شده و انتزاعی باشد.
+- **کوتاه**: 2 یا 3 کلمه.
+- **قابل تلفظ**: ما می خواهیم درباره آن ها حرف بزنیم.
 
-Vue component names must also be:
+همچنین نام هر کامپوننت ویو باید مطابق موارد زیر باشد:
 
-- **Custom element spec compliant**: [include a hyphen](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), don't use reserved names.
-- **`app-` namespaced**: if very generic and otherwise 1 word, so that it can easily be reused in other projects.
+- **مطابق با تعریف عنصر سفارشی**: [شامل خط فاصله](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), از نام های رزرو شده استفاده نکنید.
+- **`app-` namespaced**: یا خیلی عمومی یا یک کلمه باشد که بتوان به راحتی از آن در پروژه های دیگر استفاده مجدد کرد.
 
 ### چرا؟
 
-- The name is used to communicate about the component. So it must be short, meaningful and pronounceable.
+- از نام برای ارتباط برقرار کردن با کامپوننت استفاده می شود. پس باید کوتاه، با معنی و قابل تلفظ باشد.
 
 ### با چه روشی?
 
@@ -100,7 +100,7 @@ Vue component names must also be:
 
 [↑ برگشت به فهرست مطالب](#table-of-contents)
 
-## Keep component expressions simple
+## تکه کد های کامپوننت را ساده نگه دارید
 
 Vue.js's inline expressions are 100% Javascript. This makes them extremely powerful, but potentially also very complex. Therefore you should **keep expressions simple**.
 
@@ -258,7 +258,7 @@ In other words: Do **NOT** code things like `var self = this;` anymore if you're
   }
 </script>
 
-<!-- avoid -->
+<!-- پرهیز کنید -->
 <script type="text/javascript">
   export default {
     methods: {
@@ -266,7 +266,7 @@ In other words: Do **NOT** code things like `var self = this;` anymore if you're
         return 'hello'
       },
       printHello() {
-        const self = this // unnecessary
+        const self = this // غیر ضروری
         console.log(self.hello())
       },
     },
@@ -276,7 +276,7 @@ In other words: Do **NOT** code things like `var self = this;` anymore if you're
 
 [↑ برگشت به فهرست مطالب](#table-of-contents)
 
-## Component structure
+## ساختار کامپوننت
 
 Make it easy to reason and follow a sequence of thoughts. See the How.
 
@@ -569,7 +569,7 @@ Configure ESLint in a `.eslintrc` file (so IDEs can interpret it as well):
 
 ```json
 {
-  "extends": "eslint:پیشنهادی",
+  "extends": "eslint:recommended",
   "plugins": ["html"],
   "env": {
     "browser": true
@@ -624,7 +624,7 @@ Vue.js is a component framework based. Not knowing when to create components can
 - Always remember to build your components for your project needs, but you should also try to think of them being able to work out of it. If they can work out of your project, such as a library, it makes them a lot more robust and consistent;
 - It's always better to build your components as early as possible since it allows you to build your communications (props & events) on existing and stable components.
 
-### Rules
+### قوانین
 
 - First, try to build obvious components as early as possible such as: modal, popover, toolbar, menu, header, etc. Overall, components you know for sure you will need later on. On your current page or globally;
 - Secondly, on each new development, for a whole page or a portion of it, try to think before rushing in. If you know some parts of it should be a component, build it;
@@ -632,7 +632,7 @@ Vue.js is a component framework based. Not knowing when to create components can
 
 [↑ برگشت به فهرست مطالب](#table-of-contents)
 
-## Use mixins wherever possible
+## از mixins هر زمانی که ممکن بود استفاده کنید
 
 ### چرا؟
 
@@ -684,9 +684,9 @@ To use the mixin, simply import it into both components (I only show the mobile
 
 ---
 
-## Wanna help?
+## میخواهید کمک کنید?
 
-Fork it and Pull Request what you think it should be good to have or just create an [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/new).
+فورک کنید و برای چیزی که فکر می کنید بهتر است ذکر شود پول ریکوئست دهید یا یک [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/new) بسازید.
 
 <!-- ## Add badge to your project
 
@@ -730,6 +730,6 @@ You can copy, modify, distribute and perform the work, even for commercial purpo
 
 ## نویسندگان ترجمه
 
-- [Brazilian Portuguese](README-PTBR.md): Pablo Henrique Silva [github:pablohpsilva](https://github.com/pablohpsilva), [توییتر: @PabloHPSilva](https://twitter.com/PabloHPSilva)
-- [روسی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian): Mikhail Kuznetcov [github:shershen08](https://github.com/shershen08), [توییتر: @legkoletat](https://twitter.com/legkoletat)
-- [فارسی](README-FA.md): علیرضا عربشاهی [github:AlirezaArabshahi](https://github.com/AlirezaArabshahi), [توییتر: @iialireza7](https://twitter.com/iialireza7)
+- [پرتغالی برزیلی](README-PTBR.md): Pablo Henrique Silva [github:pablohpsilva](https://github.com/pablohpsilva), [twitter: @PabloHPSilva](https://twitter.com/PabloHPSilva)
+- [روسی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian): Mikhail Kuznetcov [github:shershen08](https://github.com/shershen08), [twitter: @legkoletat](https://twitter.com/legkoletat)
+- [فارسی](README-FA.md): Alireza Arabshahi [github:AlirezaArabshahi](https://github.com/AlirezaArabshahi), [twitter: @iialireza7](https://twitter.com/iialireza7)

From 669073b185b377965b688411e8d2e33bc82229e2 Mon Sep 17 00:00:00 2001
From: Alireza Arabshahi <arabshahi.alireza@outlook.com>
Date: Sat, 30 Jul 2022 21:10:31 +0430
Subject: [PATCH 27/30] add persian translation (part 3)

---
 README-FA.md | 97 ++++++++++++++++++++++++++--------------------------
 1 file changed, 49 insertions(+), 48 deletions(-)

diff --git a/README-FA.md b/README-FA.md
index b01aaf9..48415bf 100644
--- a/README-FA.md
+++ b/README-FA.md
@@ -15,18 +15,18 @@
 
 ## هدف
 
-این راهنما یک راه متحد الشکل برای ساختار دادن به کد [Vue.js](http://vuejs.org/) شما فراهم می کند. موارد زیر را ممکن می سازد:
+این راهنما یک راه هم شکل برای ساختار دادن به کد [Vue.js](http://vuejs.org/) شما فراهم می کند و موارد زیر را ممکن می سازد:
 
 - برای توسعه دهندگان و اعضای تیم فهمیدن و پیدا کردن کد ها آسان تر است.
 - برای محیط های یکپارچه توسعه (IDEs) تفسیر کد و فراهم کردن پشتیبانی آسان تر است.
-- استفاده و یا استفاده مجدد از ابزار های build که قبلا استفاده می کردید آسان تر است.
+- استفاده (و یا استفاده) مجدد از ابزار های build که قبلا استفاده می کردید آسان تر است.
 - نهان سازی (cache) و ارائه بسته های کد به طور جداگانه آسان تر است.
 
 این راهنما از مخزن [RiotJS Style Guide](https://github.com/voorhoede/riotjs-style-guide) که توسط [De Voorhoede](https://github.com/voorhoede) نوشته شده است الهام گرفته شده است.
 
 ## فهرست مطالب
 
-- [توسعه مبتی بر ماژول](#module-based-development)
+- [توسعه مبتنی بر ماژول](#module-based-development)
 - [نام های کامپوننت Vue](#vue-component-names)
 - [تکه کد های کامپوننت را ساده نگه دارید](#keep-component-expressions-simple)
 - [پراپ های کامپوننت را ساده نگه دارید](#keep-component-props-primitive)
@@ -36,7 +36,7 @@
 - [نام های ایونت کامپوننت](#component-event-names)
 - [از استفاده کردن از `this.$parent` پرهیز کنید](#avoid-thisparent)
 - [از `this.$refs` با احتیاط استفاده کنید](#use-thisrefs-with-caution)
-- [از نام کامپوننت به عنوان محدوده استایل استفاده کنید](#use-component-name-as-style-scope)
+- [از نام کامپوننت به عنوان محدوده style استفاده کنید](#use-component-name-as-style-scope)
 - [برای API کامپوننت خود مستند بنویسید](#document-your-component-api)
 - [دمو کامپوننت را اضافه کنید](#add-a-component-demo)
 - [فایل های کامپوننت خود را Lint کنید](#lint-your-component-files)
@@ -44,43 +44,43 @@
   <!-- * [Use `*.vue` extension](#use-vue-extension) -->
   <!-- * [Add badge to your project](#add-badge-to-your-project) -->
 
-## توسعه مبتی بر ماژول
+## توسعه مبتنی بر ماژول
 
 همیشه برنامه خود را با استفاده از ماژول های کوچکی که فقط یک کار و آن کار را هم خوب انجام می دهند, بسازید.
 
-یک ماژول یک بخش کوچک و مستقل از یک برنامه است. کتابخانه Vue.jsبه طور مشخص برای کمک کردن برای ساخت _view-logic modules_ طراحی شده است .
+یک ماژول یک بخش کوچک و مستقل از یک برنامه است. کتابخانه Vue.jsبه طور مشخص برای کمک کردن برای ساخت _view-logic ماژول های_ طراحی شده است .
 
-### چرا?
+### چرا؟
 
-ماژول های کوچک برای یادگیری، فهمیدن، نگهداری، استفاده مجدد و رفع مشکلات چه برای خود شما و چه برای توسعه دهندگان دیگر راحت تر هستند.
+یادگیری، فهمیدن، نگهداری، استفاده مجدد و رفع مشکلات ماژول های کوچک چه برای خود شما و چه برای توسعه دهندگان دیگر راحت تر هستند.
 
-### با چه روشی?
+###
 
-هر کامپوننت Vue (مثل یک ماژول) باید [در ابتدا](https://addyosmani.com/first/): _یک هدف مشخص_ ([تک وظیفه‌ای](http://en.wikipedia.org/wiki/Single_responsibility_principle)), _مستقل_, _قابل استفاده مجدد_, _کوچک_ و _تست پذیر_ باشد.
+هر کامپوننت Vue (مثل یک ماژول) باید [در ابتدا](https://addyosmani.com/first/): _یک هدف مشخص داشته باشد_ ([تک وظیفه‌ای](http://en.wikipedia.org/wiki/Single_responsibility_principle))و _مستقل_, _قابل استفاده مجدد_, _کوچک_ و _تست پذیر_ باشد.
 
-اگر کامپوننت شما کار های زیادی انجام می دهد و یا خیلی بزرگ شده است آن را به کامپوننا های کوچکتر تقسیم کتید به طوری که هر کدام فقط یه کار را انجام دهند و بر حسب تجربه تلاش کنید که فایل هر کامپوننت کمتر از 100 خط کد باشد.
-همچنین مطمئن شوید کامپوننت شما به صورت مجزا کار می کند برای مثال یک دمو مستقل برای آن قرار دهید.
+اگر کامپوننت شما کار های زیادی انجام می دهد و یا خیلی بزرگ شده است آن را به کامپوننت های کوچکتر تقسیم کنید به طوری که هر کدام فقط یه کار را انجام دهند و بر حسب تجربه تلاش کنید که فایل هر کامپوننت کمتر از 100 خط کد باشد.
+همچنین مطمئن شوید کامپوننت شما به صورت مستقل هم کار می کند برای مثال یک دمو مستقل برای آن قرار دهید.
 
 [↑ برگشت به فهرست مطالب](#table-of-contents)
 
-## [نام های کامپوننت Vue
+## نام های کامپوننت Vue
 
 نام هر کامپوننت باید موارد زیر را شامل شود:
 
 - **معنی دار**: نه بیش از حد دقیق و نه بیش از حد خلاصه شده و انتزاعی باشد.
 - **کوتاه**: 2 یا 3 کلمه.
-- **قابل تلفظ**: ما می خواهیم درباره آن ها حرف بزنیم.
+- **قابل تلفظ**: زیرا ما می خواهیم درباره آن ها حرف بزنیم و آن ها را به زبان بیاوریم.
 
-همچنین نام هر کامپوننت ویو باید مطابق موارد زیر باشد:
+همچنین نام هر کامپوننت Vue باید مطابق موارد زیر باشد:
 
-- **مطابق با تعریف عنصر سفارشی**: [شامل خط فاصله](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), از نام های رزرو شده استفاده نکنید.
+- **مطابق با تعریف عنصر سفارشی**: [شامل خط فاصله باشد](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), از نام های رزرو شده استفاده نکنید.
 - **`app-` namespaced**: یا خیلی عمومی یا یک کلمه باشد که بتوان به راحتی از آن در پروژه های دیگر استفاده مجدد کرد.
 
 ### چرا؟
 
 - از نام برای ارتباط برقرار کردن با کامپوننت استفاده می شود. پس باید کوتاه، با معنی و قابل تلفظ باشد.
 
-### با چه روشی?
+### با چه روشی؟
 
 ```html
 <!-- پیشنهادی -->
@@ -91,7 +91,8 @@
 <!-- پرهیز کنید -->
 <btn-group></btn-group>
 
-<!-- کوتاه است, اما قابل تلفظ کردن نیست. از `button-group` به جایش استفاده کنید -->
+<!-- کوتاه است, اما قابل تلفظ کردن نیست. از مثال زیر به عنوان جایگزین استفاده کنید -->
+<!-- `button-group` -->
 <ui-slider></ui-slider>
 <!-- همه کامپوننت های عضوی از المان های رابط کاربری هستند, پس این نام گذاری بی معنی است -->
 <slider></slider>
@@ -102,17 +103,17 @@
 
 ## تکه کد های کامپوننت را ساده نگه دارید
 
-Vue.js's inline expressions are 100% Javascript. This makes them extremely powerful, but potentially also very complex. Therefore you should **keep expressions simple**.
+تکه کد های خطی (inline expressions) Vue.js 100% جاوا اسکریپت هستند. و این قضیه آن ها را به شدت قدرتمند می سازد، اما ذاتا پیچیده هستند. بنابرین شما باید **تکه کد های خطی را ساده نگه دارید**.
 
 ### چرا؟
 
-- Complex inline expressions are hard to read.
-- Inline expressions can't be reused elsewhere. This can lead to code duplication and code rot.
-- IDEs typically don't have support for expression syntax, so your IDE can't autocomplete or validate.
+- خواندن تکه کد های خطی پیچیده سخت است
+- تکه کد های خطی پیچیده نمی توانند در جای دیگر مورد استفاده مجدد قرار بگیرند که این می تواند منجر به تکرار کد ها (code duplication) و پوسیدگی کد ها (code rot) شود
+- محیط های یکپارچه توسعه (IDEs) معمولا پشتیبانی برای سینتکس های تکه کد های خطی ندارد، بنابراین نمیتوانند به طور خودکار تکمیل یا اعتبار سنجی شوند.
 
-### با چه روشی?
+### با چه روشی؟
 
-If it gets too complex or hard to read **move it to methods or computed properties**!
+اگر کد خیلی پیچیده شد یا خواندن آن سخت شد **آن ها را به methods یا computed انتقال دهید**!
 
 ```html
 <!-- پیشنهادی -->
@@ -137,7 +138,7 @@ If it gets too complex or hard to read **move it to methods or computed properti
   }
 </script>
 
-<!-- avoid -->
+<!-- پرهیز کنید -->
 <template>
   <h1>
     {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new
@@ -148,7 +149,7 @@ If it gets too complex or hard to read **move it to methods or computed properti
 
 [↑ برگشت به فهرست مطالب](#table-of-contents)
 
-## Keep component props primitive
+## پراپ های کامپوننت را ساده نگه دارید
 
 While Vue.js supports passing complex JavaScript objects via these attributes, you should try to **keep the component props as primitive as possible**. Try to only use [JavaScript primitives](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) (strings, numbers, booleans) and functions. Avoid complex objects.
 
@@ -159,7 +160,7 @@ While Vue.js supports passing complex JavaScript objects via these attributes, y
 - By using an attribute for each prop, other developers can easily understand what is passed to the component instance;
 - When passing complex objects it's not apparent which properties and methods of the objects are actually being used by the custom components. This makes it hard to refactor code and can lead to code rot.
 
-### با چه روشی?
+### با چه روشی؟
 
 Use a component attribute per props, with a primitive or function as value:
 
@@ -191,7 +192,7 @@ Component props are passed via custom HTML attributes. The values of these attri
 
 Harnessing your component props ensures your component will always function (defensive programming). Even when other developers later use your components in ways you haven't thought of yet.
 
-### با چه روشی?
+### با چه روشی؟
 
 - Use defaults for props values.
 - Use `type` option to [validate](http://vuejs.org/v2/guide/components.html#Prop-Validation) values to an expected type.**[1\*]**
@@ -242,7 +243,7 @@ In other words: Do **NOT** code things like `var self = this;` anymore if you're
 - In general, when using arrow functions the lexical scope is kept
 - If you're **NOT** using ES6 and, therefore, not using `Arrow Functions`, you'd have to add `this` to a variable. That's the only exception.
 
-### با چه روشی?
+### با چه روشی؟
 
 ```html
 <script type="text/javascript">
@@ -289,7 +290,7 @@ Make it easy to reason and follow a sequence of thoughts. See the How.
 - Use a CSS naming Methodology, like [BEM](https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw), or [rscss](https://github.com/rstacruz/rscss) - [details?](#use-component-name-as-style-scope);
 - Use the template-script-style .vue file organization, as recomended by Evan You, Vue.js creator.
 
-### با چه روشی?
+### با چه روشی؟
 
 Component structure:
 
@@ -302,11 +303,11 @@ Component structure:
 
 <script type="text/javascript">
   export default {
-    // Do not forget this little guy
+    // این رفیق کوچولو مون را (نام کامپوننت) کامپوننت را فراموش نکنید
     name: 'RangeSlider',
-    // share common functionality with component mixins
+    // قابلیت های مشترک را در mixin کامپوننت بنویسید
     mixins: [],
-    // compose new components
+    // کامپوننت های جدید بسازید
     extends: {},
     // component properties/variables
     props: {
@@ -314,10 +315,10 @@ Component structure:
       foo: {},
       fooBar: {},
     },
-    // variables
+    // متغیر ها
     data() {},
     computed: {},
-    // when component uses other components
+    // وقتی کامپوننت از کامپوننت های دیگر استفاده می کند
     components: {},
     // methods
     watch: {},
@@ -344,11 +345,11 @@ Vue.js provides all Vue handler functions and expressions are strictly bound to
 ### چرا؟
 
 - Developers are free to use native likes event names and it can cause confusion down the line;
-- The freedom of naming events can lead to a [DOM templates incompatibility](https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats);
+- آزادی برای نام گذاری ایونت ها میتواند به مورد روبهرو منجر شود [DOM ناسازگاری الگو های](https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats);
 
-### با چه روشی?
+### با چه روشی؟
 
-- Event names should be kebab-cased;
+- نام ایونت ها باید kebab-cased باشند;
 - A unique event name should be fired for unique actions in your component that will be of interest to the outside world, like: upload-success, upload-error or even dropzone-upload-success, dropzone-upload-error (if you see the need for having a scoped prefix);
 - Events should either end in verbs in the infinitive form (e.g. client-api-load) or nouns (e.g drive-upload-success) ([source](https://github.com/GoogleWebComponents/style-guide#events));
 
@@ -363,7 +364,7 @@ Vue.js supports nested components which have access to their parent context. Acc
 - A vue component, like any component, must work in isolation. If a component needs to access its parent, this rule is broken.
 - If a component needs access to its parent, it can no longer be reused in a different context.
 
-### با چه روشی?
+### با چه روشی؟
 
 - Pass values from the parent to the child component using attribute/properties.
 - Pass methods defined on the parent component to the child component using callbacks in attribute expressions.
@@ -380,7 +381,7 @@ Vue.js supports components to have access to other components and basic HTML ele
 - A vue component, like any component, **must work in isolation**. If a component does not support all the access needed, it was badly designed/implemented.
 - Properties and events should be sufficient to most of your components.
 
-### با چه روشی?
+### با چه روشی؟
 
 - Create a good component API.
 - Always focus on the component purpose out of the box.
@@ -463,7 +464,7 @@ Alternatively the component name can be used as CSS class namespace.
 - Scoping styles to a component element improves predictability as its prevents styles leaking outside the component element.
 - Using the same name for the module directory, the Vue.js component and the style root makes it easy for developers to understand they belong together.
 
-### با چه روشی?
+### با چه روشی؟
 
 Use the component name as a namespace prefix based on BEM and OOCSS **and** use the `scoped` attribute on your style class.
 The use of `scoped` will tell your Vue compiler to add a signature on every class that your `<style>` have. That signature will force your browser (if it supports) to apply your components
@@ -498,7 +499,7 @@ A Vue.js component instance is created by using the component element inside you
 - Documentation formalises the API and tells developers which functionality to keep backwards compatible when modifying the component's code.
 - `README.md` is the de facto standard filename for documentation to be read first. Code repository hosting services (Github, Bitbucket, Gitlab etc) display the contents of the the README's, directly when browsing through source directories. This applies to our module directories as well.
 
-### با چه روشی?
+### با چه روشی؟
 
 Add a `README.md` file to the component's module directory:
 
@@ -557,7 +558,7 @@ Linters improve code consistency and help trace syntax errors. .vue files can be
 - Linting component files ensures all developers use the same code style.
 - Linting component files helps you trace syntax errors before it's too late.
 
-### با چه روشی?
+### با چه روشی؟
 
 To allow linters to extract the scripts from your `*.vue` files, put script inside a `<script>` component and [keep component expressions simple](#keep-component-expressions-simple) (as linters don't understand those). Configure your linter to allow global variables `vue` and component `props`.
 
@@ -619,7 +620,7 @@ Vue.js is a component framework based. Not knowing when to create components can
 - If the component is too big, it probably will be hard to (re)use and maintain;
 - If the component is too small, your project gets flooded, harder to make components communicate;
 
-### با چه روشی?
+### با چه روشی؟
 
 - Always remember to build your components for your project needs, but you should also try to think of them being able to work out of it. If they can work out of your project, such as a library, it makes them a lot more robust and consistent;
 - It's always better to build your components as early as possible since it allows you to build your communications (props & events) on existing and stable components.
@@ -638,7 +639,7 @@ Vue.js is a component framework based. Not knowing when to create components can
 
 Mixins encapsulate reusable code and avoid duplication. If two components share the same functionality, a mixin can be used. With mixins, you can focus on the individual component task and abstract common code. This helps to better maintain your application.
 
-### با چه روشی?
+### با چه روشی؟
 
 Let's say you have a mobile and desktop menu component whose share some functionality. We can abstract the core
 functionalities of both into a mixin like this.
@@ -686,7 +687,7 @@ To use the mixin, simply import it into both components (I only show the mobile
 
 ## میخواهید کمک کنید?
 
-فورک کنید و برای چیزی که فکر می کنید بهتر است ذکر شود پول ریکوئست دهید یا یک [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/new) بسازید.
+فورک کنید و برای چیزی که فکر می کنید بهتر است بیان شود پول ریکوئست دهید یا یک [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/new) بسازید.
 
 <!-- ## Add badge to your project
 
@@ -698,7 +699,7 @@ You can use the *Vue.js Style Guide badge* to link to this guide:
 
 Inform other developers your project is following the Vue.js Style Guide. And let them know where they can find this guide.
 
-### با چه روشی?
+### با چه روشی؟
 
 Include the badge in your project. In markdown:
 
@@ -728,7 +729,7 @@ Or html:
 You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.
  -->
 
-## نویسندگان ترجمه
+## مترجم ها
 
 - [پرتغالی برزیلی](README-PTBR.md): Pablo Henrique Silva [github:pablohpsilva](https://github.com/pablohpsilva), [twitter: @PabloHPSilva](https://twitter.com/PabloHPSilva)
 - [روسی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian): Mikhail Kuznetcov [github:shershen08](https://github.com/shershen08), [twitter: @legkoletat](https://twitter.com/legkoletat)

From 973429a8eab04cfd44d790abe7e4b7ef859170fc Mon Sep 17 00:00:00 2001
From: Alireza Arabshahi <arabshahi.alireza@outlook.com>
Date: Sun, 19 Mar 2023 00:49:51 +0330
Subject: [PATCH 28/30] update persian translation

---
 README-FA.md | 188 ++++++++++++++++++++++++++-------------------------
 1 file changed, 95 insertions(+), 93 deletions(-)

diff --git a/README-FA.md b/README-FA.md
index 48415bf..d416414 100644
--- a/README-FA.md
+++ b/README-FA.md
@@ -1,4 +1,4 @@
-# Vue.js راهنمای سبک نگارش کامپوننت در
+# راهنمای سبک نگارش کامپوننت ویو جی اس
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/img/logo.png"/>
@@ -6,49 +6,49 @@
 
 ### ترجمه ها
 
-- [فارسی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/)
 - [پرتغالی برزیلی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/portuguese)
 - [چینی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/chinese)
 - [ژاپنی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/japanese)
 - [کره ای](https://pablohpsilva.github.io/vuejs-component-style-guide/#/korean)
 - [روسی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian)
+- [فارسی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/farsi)
 
 ## هدف
 
-این راهنما یک راه هم شکل برای ساختار دادن به کد [Vue.js](http://vuejs.org/) شما فراهم می کند و موارد زیر را ممکن می سازد:
+این راهنما یک راه هم شکل برای ساختار دادن به کد [ویو جی اس](http://vuejs.org/) شما فراهم می کند و موارد زیر را ممکن می سازد:
 
 - برای توسعه دهندگان و اعضای تیم فهمیدن و پیدا کردن کد ها آسان تر است.
-- برای محیط های یکپارچه توسعه (IDEs) تفسیر کد و فراهم کردن پشتیبانی آسان تر است.
-- استفاده (و یا استفاده) مجدد از ابزار های build که قبلا استفاده می کردید آسان تر است.
-- نهان سازی (cache) و ارائه بسته های کد به طور جداگانه آسان تر است.
+- برای محیط های یکپارچه توسعه، تفسیر کد و فراهم کردن پشتیبانی آسان تر است.
+- استفاده از ابزار های بیلد آسان تر است.
+- نهان سازی و ارائه بسته های کد به طور جداگانه آسان تر است.
 
 این راهنما از مخزن [RiotJS Style Guide](https://github.com/voorhoede/riotjs-style-guide) که توسط [De Voorhoede](https://github.com/voorhoede) نوشته شده است الهام گرفته شده است.
 
 ## فهرست مطالب
 
-- [توسعه مبتنی بر ماژول](#module-based-development)
-- [نام های کامپوننت Vue](#vue-component-names)
-- [تکه کد های کامپوننت را ساده نگه دارید](#keep-component-expressions-simple)
-- [پراپ های کامپوننت را ساده نگه دارید](#keep-component-props-primitive)
-- [از پراپ های کامپوننت استفاده بهینه کنید](#harness-your-component-props)
-- [کلمه کلیدی `this` را به کامپوننت نسبت دهید](#assign-this-to-component)
-- [ساختار کامپوننت](#component-structure)
-- [نام های ایونت کامپوننت](#component-event-names)
+- [توسعه مبتنی بر ماژول](#توسعه-مبتنی-بر-ماژول)
+- [نام های کامپوننت ویو](#نام-های-کامپوننت-ویو)
+- [کد های کامپوننت را ساده نگه دارید](#کد-های-کامپوننت-را-ساده-نگه-دارید)
+- [پراپ های کامپوننت را ساده نگه دارید](#پراپ-های-کامپوننت-را-ساده-نگه-دارید)
+- [از پراپ های کامپوننت استفاده بهینه کنید](#از-پراپ-های-کامپوننت-استفاده-بهینه-کنید)
+- [`this` را به `کامپوننت` نسبت دهید](#this-را-به-کامپوننت-نسبت-دهید)
+- [ساختار کامپوننت](#ساختار-کامپوننت)
+- [نام های ایونت کامپوننت](#نام-های-ایونت-کامپوننت)
 - [از استفاده کردن از `this.$parent` پرهیز کنید](#avoid-thisparent)
 - [از `this.$refs` با احتیاط استفاده کنید](#use-thisrefs-with-caution)
 - [از نام کامپوننت به عنوان محدوده style استفاده کنید](#use-component-name-as-style-scope)
-- [برای API کامپوننت خود مستند بنویسید](#document-your-component-api)
-- [دمو کامپوننت را اضافه کنید](#add-a-component-demo)
-- [فایل های کامپوننت خود را Lint کنید](#lint-your-component-files)
-- [کامپوننت ها را وقتی بسازید که به آن ها نیاز دارید](#create-components-when-needed)
-  <!-- * [Use `*.vue` extension](#use-vue-extension) -->
-  <!-- * [Add badge to your project](#add-badge-to-your-project) -->
+- [برای ای پی آی کامپوننت خود مستند بنویسید](#document-your-component-api)
+- [دمو کامپوننت را اضافه کنید](#دمو-کامپوننت-را-اضافه-کنید)
+- [فایل های کامپوننت خود را لینت کنید](#lint-your-component-files)
+- [کامپوننت ها را زمانی بسازید که به آن ها نیاز دارید](#کامپوننت-ها-را-زمانی-بسازید-که-به-آن-ها-نیاز-دارید)
+  <!-- * [از پسوند `*.vue` استفاده کنید](#از-پسوند-vue-استفاده-کنید) -->
+  <!-- * [به پروژه خود نشان اضافه کنید](#به-پروژه-خود-نشان-اضافه-کنید) -->
 
 ## توسعه مبتنی بر ماژول
 
-همیشه برنامه خود را با استفاده از ماژول های کوچکی که فقط یک کار و آن کار را هم خوب انجام می دهند, بسازید.
+همیشه برنامه خود را با استفاده از ماژول های کوچکی که فقط یک کار و آن کار را هم درست انجام می دهند، بسازید.
 
-یک ماژول یک بخش کوچک و مستقل از یک برنامه است. کتابخانه Vue.jsبه طور مشخص برای کمک کردن برای ساخت _view-logic ماژول های_ طراحی شده است .
+یک ماژول یک بخش کوچک و مستقل از یک برنامه است. کتابخانه ویو جی اس به طور مشخص برای کمک کردن برای ساخت _view-logic ماژول های_ طراحی شده است .
 
 ### چرا؟
 
@@ -56,29 +56,29 @@
 
 ###
 
-هر کامپوننت Vue (مثل یک ماژول) باید [در ابتدا](https://addyosmani.com/first/): _یک هدف مشخص داشته باشد_ ([تک وظیفه‌ای](http://en.wikipedia.org/wiki/Single_responsibility_principle))و _مستقل_, _قابل استفاده مجدد_, _کوچک_ و _تست پذیر_ باشد.
+هر کامپوننت ویو (مثل یک ماژول) باید [در ابتدا](https://addyosmani.com/first/): _یک هدف مشخص داشته باشد_ ([تک وظیفه‌ای](http://en.wikipedia.org/wiki/Single_responsibility_principle))و _مستقل_، _قابل استفاده مجدد_، _کوچک_ و _تست پذیر_ باشد.
 
 اگر کامپوننت شما کار های زیادی انجام می دهد و یا خیلی بزرگ شده است آن را به کامپوننت های کوچکتر تقسیم کنید به طوری که هر کدام فقط یه کار را انجام دهند و بر حسب تجربه تلاش کنید که فایل هر کامپوننت کمتر از 100 خط کد باشد.
 همچنین مطمئن شوید کامپوننت شما به صورت مستقل هم کار می کند برای مثال یک دمو مستقل برای آن قرار دهید.
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست مطالب)
 
-## نام های کامپوننت Vue
+## نام های کامپوننت ویو
 
 نام هر کامپوننت باید موارد زیر را شامل شود:
 
-- **معنی دار**: نه بیش از حد دقیق و نه بیش از حد خلاصه شده و انتزاعی باشد.
+- **پر معنا**: نه بیش از حد دقیق و نه بیش از حد خلاصه شده و انتزاعی باشد.
 - **کوتاه**: 2 یا 3 کلمه.
 - **قابل تلفظ**: زیرا ما می خواهیم درباره آن ها حرف بزنیم و آن ها را به زبان بیاوریم.
 
-همچنین نام هر کامپوننت Vue باید مطابق موارد زیر باشد:
+همچنین نام هر کامپوننت ویو باید مطابق موارد زیر باشد:
 
 - **مطابق با تعریف عنصر سفارشی**: [شامل خط فاصله باشد](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), از نام های رزرو شده استفاده نکنید.
-- **`app-` namespaced**: یا خیلی عمومی یا یک کلمه باشد که بتوان به راحتی از آن در پروژه های دیگر استفاده مجدد کرد.
+- **`app-` namespaced**: نام باید عامه پسند و از طرف دیگر شامل یک کلمه باشد که بتوان به راحتی از آن در پروژه های دیگر استفاده مجدد کرد.
 
 ### چرا؟
 
-- از نام برای ارتباط برقرار کردن با کامپوننت استفاده می شود. پس باید کوتاه، با معنی و قابل تلفظ باشد.
+- از نام برای ارتباط برقرار کردن با کامپوننت استفاده می شود. پس باید کوتاه، پر معنا و قابل تلفظ باشد.
 
 ### با چه روشی؟
 
@@ -91,25 +91,25 @@
 <!-- پرهیز کنید -->
 <btn-group></btn-group>
 
-<!-- کوتاه است, اما قابل تلفظ کردن نیست. از مثال زیر به عنوان جایگزین استفاده کنید -->
+<!-- کوتاه است، اما قابل تلفظ کردن نیست. از مثال زیر به عنوان جایگزین استفاده کنید -->
 <!-- `button-group` -->
 <ui-slider></ui-slider>
-<!-- همه کامپوننت های عضوی از المان های رابط کاربری هستند, پس این نام گذاری بی معنی است -->
+<!-- همه کامپوننت های عضوی از عصنر های رابط کاربری هستند، پس این نام گذاری بی معنی است -->
 <slider></slider>
 <!-- مطابق با تعریف عنصر سفارشی نیست -->
 ```
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
-## تکه کد های کامپوننت را ساده نگه دارید
+## کد های کامپوننت را ساده نگه دارید
 
-تکه کد های خطی (inline expressions) Vue.js 100% جاوا اسکریپت هستند. و این قضیه آن ها را به شدت قدرتمند می سازد، اما ذاتا پیچیده هستند. بنابرین شما باید **تکه کد های خطی را ساده نگه دارید**.
+کد های خطی ویو جی اس تماما جاوا اسکریپت هستند. و این قضیه آن ها را به شدت قدرتمند می سازد، اما ذاتا پیچیده هستند. بنابرین شما باید **کد های خطی را ساده نگه دارید**.
 
 ### چرا؟
 
-- خواندن تکه کد های خطی پیچیده سخت است
-- تکه کد های خطی پیچیده نمی توانند در جای دیگر مورد استفاده مجدد قرار بگیرند که این می تواند منجر به تکرار کد ها (code duplication) و پوسیدگی کد ها (code rot) شود
-- محیط های یکپارچه توسعه (IDEs) معمولا پشتیبانی برای سینتکس های تکه کد های خطی ندارد، بنابراین نمیتوانند به طور خودکار تکمیل یا اعتبار سنجی شوند.
+- خواندن کد های خطی پیچیده، سخت است
+- کد های خطی پیچیده نمی توانند در جای دیگر مورد استفاده مجدد قرار بگیرند که این می تواند منجر به تکرار و پوسیدگی کدها شود
+- محیط های یکپارچه توسعه معمولا پشتیبانی برای سینتکس های کد های خطی ندارد، بنابراین نمی توانند به طور خودکار تکمیل یا اعتبار سنجی شوند.
 
 ### با چه روشی؟
 
@@ -147,22 +147,22 @@
 </template>
 ```
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## پراپ های کامپوننت را ساده نگه دارید
 
-While Vue.js supports passing complex JavaScript objects via these attributes, you should try to **keep the component props as primitive as possible**. Try to only use [JavaScript primitives](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) (strings, numbers, booleans) and functions. Avoid complex objects.
+در حالی که ویو جی اس به خاطر ویژگی هایش از ارسال آبجکت های پیچیده جاوا اسکریپتی پشتیبانی میکند شما باید تلاش کنید تا **پراپ های کامپوننت را تا جای ممکن ساده نگه دارید**. تلاش کنید تا فقط از [داده های اولیه جاوا اسکریپت](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) که شامل (رشته ها، اعداد، بولین) و توابع می شوند. از آبجکت های پیچیده پرهیز کنید.
 
 ### چرا؟
 
-- By using an attribute for each prop separately the component has a clear and expressive API;
-- By using only primitives and functions as props values our component APIs are similar to the APIs of native HTML(5) elements;
-- By using an attribute for each prop, other developers can easily understand what is passed to the component instance;
-- When passing complex objects it's not apparent which properties and methods of the objects are actually being used by the custom components. This makes it hard to refactor code and can lead to code rot.
+- زمانی از یک اتریبیوت به طور جداگانه برای هر پراپ استفاده می کنیم، کامپوننت ای پی آی واضح و صریحی دارد;
+- با استفاده کردن از داده های اولیه و توابع به عنوان مقادیر پراپ ها ای پی آی های کامپوننت ما شبیه به ای پی آی های عنصر های بومی اچ تی ام ال 5 می شود;
+- با استفاده از اتریبیوت ها برای هر پراپ، بقیه توسعه دهندگان به راحتی می توانند بفهمند که چه چیز هایی به نمونه کامپوننت ارسال شده است
+- زمانی آبجکت های پیچیده را ارسال می کنید، واضح نیست که چه ویژگی ها و متود های از آبجکت واقعا مورد استفاده کامپوننت های سفارشی قرار گرفته است. این باعث می شود ریفکتور کردن کد سخت شود و کد ها به سمت پوسیده شدن بروند.
 
 ### با چه روشی؟
 
-Use a component attribute per props, with a primitive or function as value:
+به ازای هر اتریبیوت کامپوننت از پراپ ها استفاده کنید، که مقدارشان داده اولیه یا تابع باشد:
 
 ```html
 <!-- پیشنهادی -->
@@ -176,11 +176,11 @@ Use a component attribute per props, with a primitive or function as value:
 >
 </range-slider>
 
-<!-- avoid -->
+<!-- پرهیز کنید -->
 <range-slider :config="complexConfigObject"></range-slider>
 ```
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## از پراپ های کامپوننت استفاده بهینه کنید
 
@@ -194,8 +194,8 @@ Harnessing your component props ensures your component will always function (def
 
 ### با چه روشی؟
 
-- Use defaults for props values.
-- Use `type` option to [validate](http://vuejs.org/v2/guide/components.html#Prop-Validation) values to an expected type.**[1\*]**
+- از پیش فرض ها برای مقادیر پراپ ها استفاده کنید
+- از گزینه `type` برای [اعتبارسنجی](http://vuejs.org/v2/guide/components.html#Prop-Validation) مقادیر به منظور دریافت نوع مورد انتظار.**[1\*]**
 - Check if props exists before using it.
 
 ```html
@@ -206,7 +206,7 @@ Harnessing your component props ensures your component will always function (def
   export default {
     props: {
       max: {
-        type: Number, // [1*] This will validate the 'max' prop to be a Number.
+        type: Number, // [1*] این خط باعث می شود که نوع این پراپ حتما عدد باشد.
         default() {
           return 10
         },
@@ -228,20 +228,22 @@ Harnessing your component props ensures your component will always function (def
 </script>
 ```
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## Assign `this` to `component`
 
-Within the context of a Vue.js component element, `this` is bound to the component instance.
-Therefore when you need to reference it in a different context, ensure `this` is available as `component`.
+## `this` را به `کامپوننت` نسبت دهید
+
+Within the context of a Vue.js component element، `this` is bound to the component instance.
+Therefore when you need to reference it in a different context، ensure `this` is available as `component`.
 
 In other words: Do **NOT** code things like `var self = this;` anymore if you're using **ES6**. You're safe using Vue components.
 
 ### چرا؟
 
-- Using ES6, there's no need to save `this` to a variable;
-- In general, when using arrow functions the lexical scope is kept
-- If you're **NOT** using ES6 and, therefore, not using `Arrow Functions`, you'd have to add `this` to a variable. That's the only exception.
+- Using ES6، there's no need to save `this` to a variable;
+- In general، when using arrow functions the lexical scope is kept
+- If you're **NOT** using ES6 and، therefore، not using `Arrow Functions`،، you'd have to add `this` to a variable. That's the only exception.
 
 ### با چه روشی؟
 
@@ -275,7 +277,7 @@ In other words: Do **NOT** code things like `var self = this;` anymore if you're
 </script>
 ```
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## ساختار کامپوننت
 
@@ -283,16 +285,16 @@ Make it easy to reason and follow a sequence of thoughts. See the How.
 
 ### چرا؟
 
-- Having the component export a clear and grouped object, makes the code easy to read and easier for developers to have a code standard.
-- Alphabetizing the properties, data, computed, watches, and methods makes them easy to find.
-- Again, grouping makes the component easier to read (name; extends; props, data and computed; components; watch and methods; lifecycle methods, etc.);
+- Having the component export a clear and grouped object، makes the code easy to read and easier for developers to have a code standard.
+- Alphabetizing the properties، data، computed، watches، and methods makes them easy to find.
+- Again، grouping makes the component easier to read (name; extends; props، data and computed; components; watch and methods; lifecycle methods، etc.);
 - Use the `name` attribute. Using [vue devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) and that attribute will make your development/testing easier;
 - Use a CSS naming Methodology, like [BEM](https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw), or [rscss](https://github.com/rstacruz/rscss) - [details?](#use-component-name-as-style-scope);
 - Use the template-script-style .vue file organization, as recomended by Evan You, Vue.js creator.
 
 ### با چه روشی؟
 
-Component structure:
+ساختار کامپوننت:
 
 ```html
 <template lang="html">
@@ -303,27 +305,27 @@ Component structure:
 
 <script type="text/javascript">
   export default {
-    // این رفیق کوچولو مون را (نام کامپوننت) کامپوننت را فراموش نکنید
+    // این دوست کوچک مان (نام کامپوننت) را فراموش نکنید
     name: 'RangeSlider',
-    // قابلیت های مشترک را در mixin کامپوننت بنویسید
+    // قابلیت های مشترک را در این ویژگی کامپوننت بنویسید
     mixins: [],
-    // کامپوننت های جدید بسازید
+    // کامپوننت جدیدی را با این کامپوننت ترکیب کنید
     extends: {},
-    // component properties/variables
+    // متغیر ها و ویژگی ها
     props: {
-      bar: {}, // Alphabetized
+      bar: {}, // به ترتیب حروف الفبای انگلیسی، پراپ ها را بنویسید
       foo: {},
       fooBar: {},
     },
     // متغیر ها
     data() {},
     computed: {},
-    // وقتی کامپوننت از کامپوننت های دیگر استفاده می کند
+    // زمانی کامپوننت از کامپوننت های دیگر استفاده می کند
     components: {},
-    // methods
+    // متود ها
     watch: {},
     methods: {},
-    // component Lifecycle hooks
+    // قلاب های چرخه حیات کامپوننت
     beforeCreate() {},
     mounted() {},
   }
@@ -336,7 +338,7 @@ Component structure:
 </style>
 ```
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## Component event names
 
@@ -349,11 +351,11 @@ Vue.js provides all Vue handler functions and expressions are strictly bound to
 
 ### با چه روشی؟
 
-- نام ایونت ها باید kebab-cased باشند;
+- نام ایونت ها باید kebab-cased باشد;
 - A unique event name should be fired for unique actions in your component that will be of interest to the outside world, like: upload-success, upload-error or even dropzone-upload-success, dropzone-upload-error (if you see the need for having a scoped prefix);
 - Events should either end in verbs in the infinitive form (e.g. client-api-load) or nouns (e.g drive-upload-success) ([source](https://github.com/GoogleWebComponents/style-guide#events));
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## Avoid `this.$parent`
 
@@ -370,7 +372,7 @@ Vue.js supports nested components which have access to their parent context. Acc
 - Pass methods defined on the parent component to the child component using callbacks in attribute expressions.
 - Emit events from child components and catch it on parent component.
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## Use `this.$refs` with caution
 
@@ -434,7 +436,7 @@ Vue.js supports components to have access to other components and basic HTML ele
 ```
 
 ```html
-<!-- avoid accessing something that could be emitted -->
+<!-- از دسترسی به چیزی که می تواند امیت شود پرهیز کنید -->
 <template>
   <range :max="max" :min="min" ref="range" :step="1"></range>
 </template>
@@ -452,7 +454,7 @@ Vue.js supports components to have access to other components and basic HTML ele
 </script>
 ```
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## Use component name as style scope
 
@@ -486,7 +488,7 @@ CSS on all tags that compose your component, leading to a no leaking css styling
 </style>
 ```
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## Document your component API
 
@@ -524,18 +526,18 @@ This module uses the [noUiSlider](http://refreshless.com/nouislider/) for cross
 
 `<range-slider>` supports the following custom component attributes:
 
-| attribute  | type                | description                                                                                                                                                                                                                                  |
-| ---------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `min`      | Number              | number where range starts (lower limit).                                                                                                                                                                                                     |
-| `max`      | Number              | Number where range ends (upper limit).                                                                                                                                                                                                       |
-| `values`   | Number[] _optional_ | Array containing start and end value. E.g. `values="[10, 20]"`. Defaults to `[opts.min, opts.max]`.                                                                                                                                          |
-| `step`     | Number _optional_   | Number to increment / decrement values by. Defaults to 1.                                                                                                                                                                                    |
-| `on-slide` | Function _optional_ | Function called with `(values, HANDLE)` while a user drags the start (`HANDLE == 0`) or end (`HANDLE == 1`) handle. E.g. `on-slide={ updateInputs }`, with `component.updateInputs = (values, HANDLE) => { const value = values[HANDLE]; }`. |
-| `on-end`   | Function _optional_ | Function called with `(values, HANDLE)` when user stops dragging a handle.                                                                                                                                                                   |
+| attribute  | type               | description                                                                                                                                                                                                                                  |
+| ---------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `min`      | Number             | number where range starts (lower limit).                                                                                                                                                                                                     |
+| `max`      | Number             | Number where range ends (upper limit).                                                                                                                                                                                                       |
+| `values`   | Number[] _اختیاری_ | Array containing start and end value. E.g. `values="[10, 20]"`. Defaults to `[opts.min, opts.max]`.                                                                                                                                          |
+| `step`     | Number _اختیاری_   | Number to increment / decrement values by. Defaults to 1.                                                                                                                                                                                    |
+| `on-slide` | Function _اختیاری_ | Function called with `(values, HANDLE)` while a user drags the start (`HANDLE == 0`) or end (`HANDLE == 1`) handle. E.g. `on-slide={ updateInputs }`, with `component.updateInputs = (values, HANDLE) => { const value = values[HANDLE]; }`. |
+| `on-end`   | Function _اختیاری_ | Function called with `(values, HANDLE)` when user stops dragging a handle.                                                                                                                                                                   |
 
 For customising the slider appearance see the [Styling section in the noUiSlider docs](http://refreshless.com/nouislider/more/#section-styling).
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## Add a component demo
 
@@ -547,7 +549,7 @@ Add a `index.html` file with demos of the component with different configuration
 - A component demo gives developers a preview before having to dig into the documentation or code.
 - Demos can illustrate all the possible configurations and variations a component can be used in.
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## Lint your component files
 
@@ -555,8 +557,8 @@ Linters improve code consistency and help trace syntax errors. .vue files can be
 
 ### چرا؟
 
-- Linting component files ensures all developers use the same code style.
-- Linting component files helps you trace syntax errors before it's too late.
+- لینت کردن فایل های کامپوننت این اطمینان را می دهد همه توسعه دهندگان از یک استایل کدی مشابه استفاده کنند
+- لینت کردن فایل ها کمک می کند که ارور های سینتکسی را قبل از اینکه به مشکل بخورید پیدا کنید
 
 ### با چه روشی؟
 
@@ -609,9 +611,9 @@ jshint --config modules/.jshintrc --extra-ext=html --extract=auto modules/
 
 Note: JSHint does not accept `vue` as extension, but only `html`.
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
-## Create components when needed
+## کامپوننت ها را زمانی بسازید که به آن ها نیاز دارید
 
 ### چرا؟
 
@@ -631,7 +633,7 @@ Vue.js is a component framework based. Not knowing when to create components can
 - Secondly, on each new development, for a whole page or a portion of it, try to think before rushing in. If you know some parts of it should be a component, build it;
 - Lastly, if you're not sure, then don't! Avoid polluting your project with "possibly useful later" components, they might just stand there forever, empty of smartness. Note it's better to break it down as soon as you realize it should have been, to avoid the complexity of compatibility with the rest of the project;
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## از mixins هر زمانی که ممکن بود استفاده کنید
 
@@ -663,7 +665,7 @@ const MenuMixin = {
 export default MenuMixin
 ```
 
-To use the mixin, simply import it into both components (I only show the mobile component).
+برای استفاده از میکسین، به سادگی آن را در داخل دو کامپوننت خود ایمپورت کنید (من فقط کامپوننت موبایل را نشان می دهم)
 
 ```html
 <template>
@@ -681,7 +683,7 @@ To use the mixin, simply import it into both components (I only show the mobile
 </script>
 ```
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ---
 
@@ -716,7 +718,7 @@ Or html:
 </a>
 ```
 
-[↑ برگشت به فهرست مطالب](#table-of-contents)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ---
 

From 9ee9419dceba08187f2d7a7d625b89035607340c Mon Sep 17 00:00:00 2001
From: Alireza Arabshahi <arabshahi.alireza@outlook.com>
Date: Sun, 19 Mar 2023 19:58:09 +0330
Subject: [PATCH 29/30] update persian translation

---
 README-FA.md | 86 +++++++++++++++++++++++++---------------------------
 1 file changed, 42 insertions(+), 44 deletions(-)

diff --git a/README-FA.md b/README-FA.md
index d416414..a29925f 100644
--- a/README-FA.md
+++ b/README-FA.md
@@ -15,7 +15,7 @@
 
 ## هدف
 
-این راهنما یک راه هم شکل برای ساختار دادن به کد [ویو جی اس](http://vuejs.org/) شما فراهم می کند و موارد زیر را ممکن می سازد:
+این راهنما یک راه هم شکل برای ساختار دادن به کد [ویو جی اس](http://vuejs.org/) شما است و موارد زیر را ممکن می سازد:
 
 - برای توسعه دهندگان و اعضای تیم فهمیدن و پیدا کردن کد ها آسان تر است.
 - برای محیط های یکپارچه توسعه، تفسیر کد و فراهم کردن پشتیبانی آسان تر است.
@@ -37,9 +37,9 @@
 - [از استفاده کردن از `this.$parent` پرهیز کنید](#avoid-thisparent)
 - [از `this.$refs` با احتیاط استفاده کنید](#use-thisrefs-with-caution)
 - [از نام کامپوننت به عنوان محدوده style استفاده کنید](#use-component-name-as-style-scope)
-- [برای ای پی آی کامپوننت خود مستند بنویسید](#document-your-component-api)
+- [برای ای پی آی کامپوننت خود مستند بنویسید](#برای-ای-پی-آی-کامپوننت-خود-مستند-بنویسید)
 - [دمو کامپوننت را اضافه کنید](#دمو-کامپوننت-را-اضافه-کنید)
-- [فایل های کامپوننت خود را لینت کنید](#lint-your-component-files)
+- [فایل های کامپوننت خود را لینت کنید](#فایل-های-کامپوننت-خود-را-لینت-کنید)
 - [کامپوننت ها را زمانی بسازید که به آن ها نیاز دارید](#کامپوننت-ها-را-زمانی-بسازید-که-به-آن-ها-نیاز-دارید)
   <!-- * [از پسوند `*.vue` استفاده کنید](#از-پسوند-vue-استفاده-کنید) -->
   <!-- * [به پروژه خود نشان اضافه کنید](#به-پروژه-خود-نشان-اضافه-کنید) -->
@@ -48,20 +48,20 @@
 
 همیشه برنامه خود را با استفاده از ماژول های کوچکی که فقط یک کار و آن کار را هم درست انجام می دهند، بسازید.
 
-یک ماژول یک بخش کوچک و مستقل از یک برنامه است. کتابخانه ویو جی اس به طور مشخص برای کمک کردن برای ساخت _view-logic ماژول های_ طراحی شده است .
+ماژول یک بخش کوچک و مستقل از یک برنامه است. کتابخانه ویو جی اس به طور مشخص برای کمک کردن برای ساخت _view-logic ماژول های_ طراحی شده است .
 
 ### چرا؟
 
-یادگیری، فهمیدن، نگهداری، استفاده مجدد و رفع مشکلات ماژول های کوچک چه برای خود شما و چه برای توسعه دهندگان دیگر راحت تر هستند.
+یادگیری، درک کردن، نگهداری، استفاده مجدد و رفع مشکلات ماژول های کوچک، چه برای خود شما و چه برای توسعه دهندگان دیگر راحت تر است.
 
 ###
 
-هر کامپوننت ویو (مثل یک ماژول) باید [در ابتدا](https://addyosmani.com/first/): _یک هدف مشخص داشته باشد_ ([تک وظیفه‌ای](http://en.wikipedia.org/wiki/Single_responsibility_principle))و _مستقل_، _قابل استفاده مجدد_، _کوچک_ و _تست پذیر_ باشد.
+هر کامپوننت ویو (مثل یک ماژول) باید [در ابتدا](https://addyosmani.com/first/): _دارای یک هدف مشخص_ ([تک وظیفه‌ای](http://en.wikipedia.org/wiki/Single_responsibility_principle))، _مستقل_، _قابل استفاده مجدد_، _کوچک_ و _با قابلیت تست_ باشد.
 
 اگر کامپوننت شما کار های زیادی انجام می دهد و یا خیلی بزرگ شده است آن را به کامپوننت های کوچکتر تقسیم کنید به طوری که هر کدام فقط یه کار را انجام دهند و بر حسب تجربه تلاش کنید که فایل هر کامپوننت کمتر از 100 خط کد باشد.
-همچنین مطمئن شوید کامپوننت شما به صورت مستقل هم کار می کند برای مثال یک دمو مستقل برای آن قرار دهید.
+همچنین مطمئن شوید کامپوننت های شما به صورت مستقل از هم کار می کنند، برای مثال یک دمو مستقل برای آن قرار دهید.
 
-[↑ برگشت به فهرست مطالب](#فهرست مطالب)
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
 ## نام های کامپوننت ویو
 
@@ -69,12 +69,12 @@
 
 - **پر معنا**: نه بیش از حد دقیق و نه بیش از حد خلاصه شده و انتزاعی باشد.
 - **کوتاه**: 2 یا 3 کلمه.
-- **قابل تلفظ**: زیرا ما می خواهیم درباره آن ها حرف بزنیم و آن ها را به زبان بیاوریم.
+- **قابل تلفظ**: زیرا ما می خواهیم درباره آن حرف بزنیم و اسم آن را به زبان بیاوریم.
 
 همچنین نام هر کامپوننت ویو باید مطابق موارد زیر باشد:
 
 - **مطابق با تعریف عنصر سفارشی**: [شامل خط فاصله باشد](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), از نام های رزرو شده استفاده نکنید.
-- **`app-` namespaced**: نام باید عامه پسند و از طرف دیگر شامل یک کلمه باشد که بتوان به راحتی از آن در پروژه های دیگر استفاده مجدد کرد.
+- **`app-` namespaced**: نام باید عمومی و از طرف دیگر شامل یک کلمه باشد که بتوان به راحتی از آن در پروژه های دیگر استفاده مجدد کرد.
 
 ### چرا؟
 
@@ -107,13 +107,13 @@
 
 ### چرا؟
 
-- خواندن کد های خطی پیچیده، سخت است
-- کد های خطی پیچیده نمی توانند در جای دیگر مورد استفاده مجدد قرار بگیرند که این می تواند منجر به تکرار و پوسیدگی کدها شود
-- محیط های یکپارچه توسعه معمولا پشتیبانی برای سینتکس های کد های خطی ندارد، بنابراین نمی توانند به طور خودکار تکمیل یا اعتبار سنجی شوند.
+- خواندن کد های خطی پیچیده، سخت است.
+- کد های خطی پیچیده نمی توانند در جای دیگر مورد استفاده مجدد قرار بگیرند که این می تواند منجر به تکرار و پوسیدگی کدها شود.
+- محیط های یکپارچه توسعه، معمولا پشتیبانی برای سینتکس های کد های خطی ندارد، بنابراین نمی توانند به طور خودکار تکمیل یا اعتبار سنجی شوند.
 
 ### با چه روشی؟
 
-اگر کد خیلی پیچیده شد یا خواندن آن سخت شد **آن ها را به methods یا computed انتقال دهید**!
+اگر کد خیلی پیچیده شد و یا خواندن آن سخت شد، **شما می بایست کد را به methods یا computed انتقال دهید**!
 
 ```html
 <!-- پیشنهادی -->
@@ -151,18 +151,18 @@
 
 ## پراپ های کامپوننت را ساده نگه دارید
 
-در حالی که ویو جی اس به خاطر ویژگی هایش از ارسال آبجکت های پیچیده جاوا اسکریپتی پشتیبانی میکند شما باید تلاش کنید تا **پراپ های کامپوننت را تا جای ممکن ساده نگه دارید**. تلاش کنید تا فقط از [داده های اولیه جاوا اسکریپت](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) که شامل (رشته ها، اعداد، بولین) و توابع می شوند. از آبجکت های پیچیده پرهیز کنید.
+در حالی که ویو جی اس به خاطر ویژگی هایش از ارسال آبجکت های پیچیده جاوا اسکریپتی پشتیبانی می کند شما باید تلاش کنید تا **پراپ های کامپوننت را تا جای ممکن ساده نگه دارید**. تلاش کنید تا فقط از [داده های اولیه جاوا اسکریپت](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) که شامل (رشته ها، اعداد، بولین) و توابع می شوند، استفاده کنید. و از آبجکت های پیچیده پرهیز کنید.
 
 ### چرا؟
 
 - زمانی از یک اتریبیوت به طور جداگانه برای هر پراپ استفاده می کنیم، کامپوننت ای پی آی واضح و صریحی دارد;
-- با استفاده کردن از داده های اولیه و توابع به عنوان مقادیر پراپ ها ای پی آی های کامپوننت ما شبیه به ای پی آی های عنصر های بومی اچ تی ام ال 5 می شود;
-- با استفاده از اتریبیوت ها برای هر پراپ، بقیه توسعه دهندگان به راحتی می توانند بفهمند که چه چیز هایی به نمونه کامپوننت ارسال شده است
-- زمانی آبجکت های پیچیده را ارسال می کنید، واضح نیست که چه ویژگی ها و متود های از آبجکت واقعا مورد استفاده کامپوننت های سفارشی قرار گرفته است. این باعث می شود ریفکتور کردن کد سخت شود و کد ها به سمت پوسیده شدن بروند.
+- با استفاده کردن از داده های اولیه و توابع به عنوان مقادیر پراپ ها، ای پی آی های کامپوننت ما شبیه به ای پی آی های عنصر های بومی اچ تی ام ال 5 می شود;
+- با استفاده کردن از اتریبیوت ها به ازای هر پراپ، بقیه توسعه دهندگان به راحتی می توانند بفهمند که چه چیز هایی به نمونه کامپوننت ارسال شده است.
+- زمانی که آبجکت های پیچیده را ارسال می کنید، واضح نیست که چه ویژگی ها و متود هایی از آبجکت واقعا مورد استفاده کامپوننت های سفارشی قرار گرفته است. این باعث می شود ریفکتور کردن کد سخت شود و کد ها به سمت پوسیده شدن بروند.
 
 ### با چه روشی؟
 
-به ازای هر اتریبیوت کامپوننت از پراپ ها استفاده کنید، که مقدارشان داده اولیه یا تابع باشد:
+به ازای هر اتریبیوت کامپوننت، از پراپ ها استفاده کنید، که مقدارشان داده اولیه یا تابع باشد:
 
 ```html
 <!-- پیشنهادی -->
@@ -184,19 +184,19 @@
 
 ## از پراپ های کامپوننت استفاده بهینه کنید
 
-In Vue.js your component props are your API. A robust and predictable API makes your components easy to use by other developers.
+در ویو جی اس پراپ های کامپوننت ای پی آی شما هستند. یک ای پی آی منسجم و قابل پیش بینی، استفاده از کامپوننت شما را برای بقیه توسعه دهندگان راحت می کند
 
-Component props are passed via custom HTML attributes. The values of these attributes can be Vue.js plain strings (`:attr="value"` or `v-bind:attr="value"`) or missing entirely. You should **harness your component props** to allow for these different cases.
+پراپ های کامپوننت از طریق اتریبیوت های اچ تی ام ال ارسال می شوند. مقادیر این اتریبیوت ها می تواند رشته های ساده ویو جی است (`:attr="value"` or `v-bind:attr="value"`) باشد یا به طور کامل صرف نظر شود. شما باید **پراپ های کامپوننت کنترل کنید** تا بتوانید سناریو های مختلف را اجازه دهید.
 
 ### چرا؟
 
-Harnessing your component props ensures your component will always function (defensive programming). Even when other developers later use your components in ways you haven't thought of yet.
+کنترل کردن پراپ های کامپوننت به شما اطمینان می دهند کامپوننت شما همیشه به درستی کار کند (برنامه نویسی تدافعی). حتی اگر وقتی بقیه توسعه دهندگان، زمانی دیگر از کاموپوننت های شما به طریقی استفاده کنند که شما فکرش را نکرده بودید.
 
 ### با چه روشی؟
 
 - از پیش فرض ها برای مقادیر پراپ ها استفاده کنید
 - از گزینه `type` برای [اعتبارسنجی](http://vuejs.org/v2/guide/components.html#Prop-Validation) مقادیر به منظور دریافت نوع مورد انتظار.**[1\*]**
-- Check if props exists before using it.
+- قبل از استفاده کردن از پراپ ها، چک کنید تا ببینید پراپ ها وجود داشته باشند.
 
 ```html
 <template>
@@ -230,20 +230,18 @@ Harnessing your component props ensures your component will always function (def
 
 [↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
-## Assign `this` to `component`
-
 ## `this` را به `کامپوننت` نسبت دهید
 
-Within the context of a Vue.js component element، `this` is bound to the component instance.
-Therefore when you need to reference it in a different context، ensure `this` is available as `component`.
+در داخل فضای عنصر کامپوننت ویو جی اس، `this` به نمونه کامپوننت اشاره می کند.
+بنابراین زمانی که شما نیاز دارید در فضای دیگری ارجاع دهید، اطمینان پیدا کنید که `this` به عنوان `کامپوننت` در دسترس باشد.
 
-In other words: Do **NOT** code things like `var self = this;` anymore if you're using **ES6**. You're safe using Vue components.
+به عبارت دیگر: اگر میخواهید از استاندارد **ES6** استفاده کنید، چیز هایی شبیه `var self = this;` را دیگر **ننویسید**. شما با این کار، از کامپوننت های ویو به صورت ایمن استفاده می کنید.
 
 ### چرا؟
 
-- Using ES6، there's no need to save `this` to a variable;
-- In general، when using arrow functions the lexical scope is kept
-- If you're **NOT** using ES6 and، therefore، not using `Arrow Functions`،، you'd have to add `this` to a variable. That's the only exception.
+- با استفاده از در استاندارد ES6، نیازی نیست `this` را در یک متغیر ذخیره کنیدک
+  -در کل، زمانی که از توابع arrow استفاده می کنیم اسکوپ لکسیکال حفظ می شود.
+- اگر شما از استاندارد ES6 استفاده **نمی کنید**، بنابراین از توابع Arrow هم استفاده نمی کنید شما می بایست `this` را به یک متغیر نسبت دهید. این تنها حالت استثنا می باشد.
 
 ### با چه روشی؟
 
@@ -281,16 +279,16 @@ In other words: Do **NOT** code things like `var self = this;` anymore if you're
 
 ## ساختار کامپوننت
 
-Make it easy to reason and follow a sequence of thoughts. See the How.
+این دستورالعمل ها را دنبال کنید تا چگونگی آن را دریابید.
 
 ### چرا؟
 
-- Having the component export a clear and grouped object، makes the code easy to read and easier for developers to have a code standard.
-- Alphabetizing the properties، data، computed، watches، and methods makes them easy to find.
-- Again، grouping makes the component easier to read (name; extends; props، data and computed; components; watch and methods; lifecycle methods، etc.);
+- داشتن خروجی کامپوننت منجر به یک آبجکت گروه بندی شده و تمیز می شود، که باعث می شود خواندن کد آسان شود و توسعه دهندگان کد استانداردی را داشته باشند.
+- چینش properties، data، computed، watches، و methods بر اساس حروف الفبا باعث می شود پیدا کردن آن ها آسان تر شود.
+- دوباره می گوییم، گروه بندی کردن باعث می شود خوانایی کامپوننت بیشتر شود. (name; extends; props، data و computed; components; watch و methods; lifecycle methods، و غیره.);
 - Use the `name` attribute. Using [vue devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) and that attribute will make your development/testing easier;
-- Use a CSS naming Methodology, like [BEM](https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw), or [rscss](https://github.com/rstacruz/rscss) - [details?](#use-component-name-as-style-scope);
-- Use the template-script-style .vue file organization, as recomended by Evan You, Vue.js creator.
+- از متودولوژی های نامگذاری سی اس اس استفاده کنید ، مانند [BEM](https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw), یا [rscss](https://github.com/rstacruz/rscss) - [details?](#use-component-name-as-style-scope);
+- از ساختار فایل .vue و template-script-style استفاده کنید, همان طور که توسط Evan You خالق ویو پیشنهاد شده است.
 
 ### با چه روشی؟
 
@@ -482,7 +480,7 @@ CSS on all tags that compose your component, leading to a no leaking css styling
   .MyExample__item {
   }
 
-  /* avoid */
+  /* پرهیز کنید */
   .My-Example {
   } /* not scoped to component or module name, not BEM compliant */
 </style>
@@ -490,7 +488,7 @@ CSS on all tags that compose your component, leading to a no leaking css styling
 
 [↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
-## Document your component API
+## برای ای پی آی کامپوننت خود مستند بنویسید
 
 A Vue.js component instance is created by using the component element inside your application. The instance is configured through its custom attributes. For the component to be used by other developers, these custom attributes - the component's API - should be documented in a `README.md` file.
 
@@ -516,13 +514,13 @@ Within the README file, describe the functionality and the usage of the module.
 
 # Range slider
 
-## Functionality
+## قابلیت
 
 The range slider lets the user to set a numeric range by dragging a handle on a slider rail for both the start and end value.
 
 This module uses the [noUiSlider](http://refreshless.com/nouislider/) for cross browser and touch support.
 
-## Usage
+## نحوه استفاده
 
 `<range-slider>` supports the following custom component attributes:
 
@@ -539,7 +537,7 @@ For customising the slider appearance see the [Styling section in the noUiSlider
 
 [↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
-## Add a component demo
+## دمو کامپوننت را اضافه کنید
 
 Add a `index.html` file with demos of the component with different configurations, showing how the component can be used.
 
@@ -551,7 +549,7 @@ Add a `index.html` file with demos of the component with different configuration
 
 [↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
-## Lint your component files
+## فایل های کامپوننت خود را لینت کنید
 
 Linters improve code consistency and help trace syntax errors. .vue files can be linted adding the `eslint-plugin-html` in your project. If you choose, you can start a project with ESLint enabled by default using `vue-cli`;
 
@@ -687,7 +685,7 @@ export default MenuMixin
 
 ---
 
-## میخواهید کمک کنید?
+## می خواهید کمک کنید?
 
 فورک کنید و برای چیزی که فکر می کنید بهتر است بیان شود پول ریکوئست دهید یا یک [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/new) بسازید.
 

From 1702a48aebd2c20a8b1279d481727cc818fdae44 Mon Sep 17 00:00:00 2001
From: Alireza Arabshahi <arabshahi.alireza@outlook.com>
Date: Mon, 20 Mar 2023 20:47:03 +0330
Subject: [PATCH 30/30] update persian translation

---
 README-FA.md | 48 ++++++++++++++++++++++++------------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/README-FA.md b/README-FA.md
index a29925f..a934266 100644
--- a/README-FA.md
+++ b/README-FA.md
@@ -15,12 +15,12 @@
 
 ## هدف
 
-این راهنما یک راه هم شکل برای ساختار دادن به کد [ویو جی اس](http://vuejs.org/) شما است و موارد زیر را ممکن می سازد:
+این راهنما یک راه یکسان برای ساختار دادن به کد [ویو جی اس](http://vuejs.org/) شما است و موارد زیر را ممکن می سازد:
 
-- برای توسعه دهندگان و اعضای تیم فهمیدن و پیدا کردن کد ها آسان تر است.
-- برای محیط های یکپارچه توسعه، تفسیر کد و فراهم کردن پشتیبانی آسان تر است.
-- استفاده از ابزار های بیلد آسان تر است.
-- نهان سازی و ارائه بسته های کد به طور جداگانه آسان تر است.
+- برای توسعه دهندگان و اعضای تیم درک کردن و متوجه شدن موضوعات آسان تر می شود.
+- برای محیط های یکپارچه توسعه، تفسیر کد و فراهم کردن پشتیبانی آسان تر می شود.
+- استفاده از ابزار های بیلد آسان تر می شود.
+- نهان سازی و ارائه بسته های کد به طور جداگانه آسان تر می شود.
 
 این راهنما از مخزن [RiotJS Style Guide](https://github.com/voorhoede/riotjs-style-guide) که توسط [De Voorhoede](https://github.com/voorhoede) نوشته شده است الهام گرفته شده است.
 
@@ -36,7 +36,7 @@
 - [نام های ایونت کامپوننت](#نام-های-ایونت-کامپوننت)
 - [از استفاده کردن از `this.$parent` پرهیز کنید](#avoid-thisparent)
 - [از `this.$refs` با احتیاط استفاده کنید](#use-thisrefs-with-caution)
-- [از نام کامپوننت به عنوان محدوده style استفاده کنید](#use-component-name-as-style-scope)
+- [از نام کامپوننت به عنوان محدوده style استفاده کنید](#از-نام-کامپوننت-به-عنوان-محدوده-style-استفاده-کنید)
 - [برای ای پی آی کامپوننت خود مستند بنویسید](#برای-ای-پی-آی-کامپوننت-خود-مستند-بنویسید)
 - [دمو کامپوننت را اضافه کنید](#دمو-کامپوننت-را-اضافه-کنید)
 - [فایل های کامپوننت خود را لینت کنید](#فایل-های-کامپوننت-خود-را-لینت-کنید)
@@ -48,17 +48,17 @@
 
 همیشه برنامه خود را با استفاده از ماژول های کوچکی که فقط یک کار و آن کار را هم درست انجام می دهند، بسازید.
 
-ماژول یک بخش کوچک و مستقل از یک برنامه است. کتابخانه ویو جی اس به طور مشخص برای کمک کردن برای ساخت _view-logic ماژول های_ طراحی شده است .
+ماژول یک بخش کوچک و مستقل از یک برنامه است. کتابخانه ویو جی اس به طور مشخص برای کمک کردن برای ساخت _ماژول های view-logic_ طراحی شده است .
 
 ### چرا؟
 
-یادگیری، درک کردن، نگهداری، استفاده مجدد و رفع مشکلات ماژول های کوچک، چه برای خود شما و چه برای توسعه دهندگان دیگر راحت تر است.
+یادگیری، درک کردن، نگهداری، استفاده مجدد و رفع مشکلات ماژول های کوچک، چه برای خود شما و چه برای توسعه دهندگان دیگر راحت تر می شود.
 
 ###
 
 هر کامپوننت ویو (مثل یک ماژول) باید [در ابتدا](https://addyosmani.com/first/): _دارای یک هدف مشخص_ ([تک وظیفه‌ای](http://en.wikipedia.org/wiki/Single_responsibility_principle))، _مستقل_، _قابل استفاده مجدد_، _کوچک_ و _با قابلیت تست_ باشد.
 
-اگر کامپوننت شما کار های زیادی انجام می دهد و یا خیلی بزرگ شده است آن را به کامپوننت های کوچکتر تقسیم کنید به طوری که هر کدام فقط یه کار را انجام دهند و بر حسب تجربه تلاش کنید که فایل هر کامپوننت کمتر از 100 خط کد باشد.
+اگر کامپوننت شما کار های زیادی انجام می دهد و یا خیلی بزرگ شده است آن را به کامپوننت های کوچکتر تقسیم کنید به طوری که هر کدام فقط یه کار را انجام دهند و بر حسب تجربه، تلاش کنید که فایل هر کامپوننت کمتر از 100 خط کد باشد.
 همچنین مطمئن شوید کامپوننت های شما به صورت مستقل از هم کار می کنند، برای مثال یک دمو مستقل برای آن قرار دهید.
 
 [↑ برگشت به فهرست مطالب](#فهرست-مطالب)
@@ -73,7 +73,7 @@
 
 همچنین نام هر کامپوننت ویو باید مطابق موارد زیر باشد:
 
-- **مطابق با تعریف عنصر سفارشی**: [شامل خط فاصله باشد](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), از نام های رزرو شده استفاده نکنید.
+- **مطابق با تعریف عنصر سفارشی**: [شامل خط فاصله باشد](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), و از نام های رزرو شده استفاده نشده باشد.
 - **`app-` namespaced**: نام باید عمومی و از طرف دیگر شامل یک کلمه باشد که بتوان به راحتی از آن در پروژه های دیگر استفاده مجدد کرد.
 
 ### چرا؟
@@ -94,7 +94,7 @@
 <!-- کوتاه است، اما قابل تلفظ کردن نیست. از مثال زیر به عنوان جایگزین استفاده کنید -->
 <!-- `button-group` -->
 <ui-slider></ui-slider>
-<!-- همه کامپوننت های عضوی از عصنر های رابط کاربری هستند، پس این نام گذاری بی معنی است -->
+<!-- همه کامپوننت عضوی از عصنر های رابط کاربری هستند، پس این نام گذاری بی معنی است -->
 <slider></slider>
 <!-- مطابق با تعریف عنصر سفارشی نیست -->
 ```
@@ -103,7 +103,7 @@
 
 ## کد های کامپوننت را ساده نگه دارید
 
-کد های خطی ویو جی اس تماما جاوا اسکریپت هستند. و این قضیه آن ها را به شدت قدرتمند می سازد، اما ذاتا پیچیده هستند. بنابرین شما باید **کد های خطی را ساده نگه دارید**.
+کد های خطی ویو جی اس کلا جاوا اسکریپت هستند. و این قضیه آن ها را به شدت قدرتمند می سازد، اما ذاتا پیچیده هستند. بنابرین شما باید **کد های خطی را ساده نگه دارید**.
 
 ### چرا؟
 
@@ -162,7 +162,7 @@
 
 ### با چه روشی؟
 
-به ازای هر اتریبیوت کامپوننت، از پراپ ها استفاده کنید، که مقدارشان داده اولیه یا تابع باشد:
+به ازای هر اتریبیوت برای کامپوننت، از یک پراپ استفاده کنید، که مقدارشان داده اولیه یا تابع باشد:
 
 ```html
 <!-- پیشنهادی -->
@@ -184,19 +184,19 @@
 
 ## از پراپ های کامپوننت استفاده بهینه کنید
 
-در ویو جی اس پراپ های کامپوننت ای پی آی شما هستند. یک ای پی آی منسجم و قابل پیش بینی، استفاده از کامپوننت شما را برای بقیه توسعه دهندگان راحت می کند
+در ویو جی اس پراپ های کامپوننت، ای پی آی شما هستند. یک ای پی آی منسجم و قابل پیش بینی، استفاده از کامپوننت شما را برای بقیه توسعه دهندگان راحت می کند.
 
-پراپ های کامپوننت از طریق اتریبیوت های اچ تی ام ال ارسال می شوند. مقادیر این اتریبیوت ها می تواند رشته های ساده ویو جی است (`:attr="value"` or `v-bind:attr="value"`) باشد یا به طور کامل صرف نظر شود. شما باید **پراپ های کامپوننت کنترل کنید** تا بتوانید سناریو های مختلف را اجازه دهید.
+پراپ های کامپوننت از طریق اتریبیوت های اچ تی ام ال ارسال می شوند. مقادیر این اتریبیوت ها می تواند رشته های ساده ویو جی اس (`:attr="value"` یا `v-bind:attr="value"`) باشد یا به طور کامل صرف نظر شود. شما باید **پراپ های کامپوننت کنترل کنید** تا بتوانید سناریو های مختلف را امکان پذیر کنید.
 
 ### چرا؟
 
-کنترل کردن پراپ های کامپوننت به شما اطمینان می دهند کامپوننت شما همیشه به درستی کار کند (برنامه نویسی تدافعی). حتی اگر وقتی بقیه توسعه دهندگان، زمانی دیگر از کاموپوننت های شما به طریقی استفاده کنند که شما فکرش را نکرده بودید.
+کنترل کردن پراپ های کامپوننت به شما اطمینان می دهند کامپوننت شما همیشه به درستی کار کند (برنامه نویسی تدافعی). حتی اگر بقیه توسعه دهندگان، در زمانی دیگر از کامپوننت های شما به شیوه دیگری استفاده کنند که شما فکرش را از قبل نکرده بودید.
 
 ### با چه روشی؟
 
 - از پیش فرض ها برای مقادیر پراپ ها استفاده کنید
-- از گزینه `type` برای [اعتبارسنجی](http://vuejs.org/v2/guide/components.html#Prop-Validation) مقادیر به منظور دریافت نوع مورد انتظار.**[1\*]**
-- قبل از استفاده کردن از پراپ ها، چک کنید تا ببینید پراپ ها وجود داشته باشند.
+- از گزینه `type` برای [اعتبارسنجی](http://vuejs.org/v2/guide/components.html#Prop-Validation) مقادیر به منظور دریافت نوع مورد انتظار استفاده کنید.**[1\*]**
+- قبل از استفاده کردن از پراپ ها، بررسی کنید تا ببینید پراپ ها وجود داشته باشند.
 
 ```html
 <template>
@@ -240,8 +240,8 @@
 ### چرا؟
 
 - با استفاده از در استاندارد ES6، نیازی نیست `this` را در یک متغیر ذخیره کنیدک
-  -در کل، زمانی که از توابع arrow استفاده می کنیم اسکوپ لکسیکال حفظ می شود.
-- اگر شما از استاندارد ES6 استفاده **نمی کنید**، بنابراین از توابع Arrow هم استفاده نمی کنید شما می بایست `this` را به یک متغیر نسبت دهید. این تنها حالت استثنا می باشد.
+  -در کل، زمانی که از توابع Arrow استفاده می کنیم اسکوپ لکسیکال حفظ می شود.
+- اگر شما از استاندارد ES6 استفاده **نمی کنید**، بنابراین از توابع Arrow هم استفاده نمی کنید پس شما می بایست `this` را به یک متغیر نسبت دهید. این تنها حالت استثنا می باشد.
 
 ### با چه روشی؟
 
@@ -345,7 +345,7 @@ Vue.js provides all Vue handler functions and expressions are strictly bound to
 ### چرا؟
 
 - Developers are free to use native likes event names and it can cause confusion down the line;
-- آزادی برای نام گذاری ایونت ها میتواند به مورد روبهرو منجر شود [DOM ناسازگاری الگو های](https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats);
+- آزادی برای نام گذاری ایونت ها میتواند به مورد رو به رو منجر شود [DOM ناسازگاری الگو های](https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats);
 
 ### با چه روشی؟
 
@@ -393,12 +393,12 @@ Vue.js supports components to have access to other components and basic HTML ele
 - Using `this.$refs` to access DOM elements (instead of doing `jQuery`, `document.getElement*`, `document.queryElement`) is just fine, when the element can't be manipulated with data bindings or for a directive.
 
 ```html
-<!-- good, no need for ref -->
+<!-- همه چی خوبه، اینجا نیازی نیست از ref استفاده کنیم -->
 <range :max="max" :min="min" @current-value="currentValue" :step="1"></range>
 ```
 
 ```html
-<!-- good example of when to use this.$refs -->
+<!-- یک مثال خوب برای اینکه چه زمانی از this.$refs استفاده کنیم  -->
 <modal ref="basicModal">
   <h4>Basic Modal</h4>
   <button class="primary" @click="$refs.basicModal.hide()">Close</button>
@@ -454,7 +454,7 @@ Vue.js supports components to have access to other components and basic HTML ele
 
 [↑ برگشت به فهرست مطالب](#فهرست-مطالب)
 
-## Use component name as style scope
+## از نام کامپوننت به عنوان محدوده style استفاده کنید
 
 Vue.js component elements are custom elements which can very well be used as style scope root.
 Alternatively the component name can be used as CSS class namespace.