From 2f63c3bfd1dd0ed6739b095024c9736138b0b2fa Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Mon, 20 Mar 2017 10:35:34 +0800
Subject: [PATCH 01/56] :pencil2: Fix typos

fix typos and correct punctuation.
---
 README-CN.md | 85 ++++++++++++++++++++++++++--------------------------
 1 file changed, 42 insertions(+), 43 deletions(-)

diff --git a/README-CN.md b/README-CN.md
index a4aa9c5..d257095 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -48,7 +48,7 @@ Vue.js 的设计初衷就是帮助开发者更好的开发界面模块。一个
 
 ### 怎么做？
 
-每一个 Vue 组件(等同于模块)[首先]((https://addyosmani.com/first/))必须专注于解决一个[单一的问题](http://en.wikipedia.org/wiki/Single_responsibility_principle)，*独立的*, *可复用的*, *微小的* and *可测试的*。
+每一个 Vue 组件（等同于模块）[首先]((https://addyosmani.com/first/))必须专注于解决一个[单一的问题](http://en.wikipedia.org/wiki/Single_responsibility_principle)，*独立的*、*可复用的*、*微小的* 和 *可测试的*。
 
 如果你的组件做了太多的事或是变得臃肿，请将其拆分成更小的组件并保持单一的原则。一般来说，尽量保证每一个文件的代码行数不要超过 100 行。也请保证组件可独立的运行。比较好的做法是增加一个单独的 demo 示例。
 
@@ -142,9 +142,9 @@ Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很
 
 ### 为什么？
 
-* 使得组件 API 清晰直观
+* 使得组件 API 清晰直观。
 * 只使用原始类型和函数作为 props 使得组件的 API 更接近于 HTML(5) 原生元素。
-* 其它开发者更好的理解每一个 prop 的含义，作用
+* 其它开发者更好的理解每一个 prop 的含义、作用。
 * 传递过于复杂的对象使得我们不能够清楚的知道哪些属性或方法被自定义组件使用，这使得代码难以重构和维护。
 
 ### 怎么做？
@@ -176,13 +176,13 @@ Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很
 
 ### 为什么？
 
-验证组件 props 可以保证你的组件永远是可用的(防御性编程)。即使其他开发者并未按照你预想的方法使用时也不会出错。
+验证组件 props 可以保证你的组件永远是可用的（防御性编程）。即使其他开发者并未按照你预想的方法使用时也不会出错。
 
 ### 怎么做？
 
-* 提供默认值
-* 使用 `type` 属性[校验类型](http://vuejs.org/v2/guide/components.html#Prop-Validation)
-* 使用 props 之前先检查该 prop 是否存在
+* 提供默认值。
+* 使用 `type` 属性[校验类型](http://vuejs.org/v2/guide/components.html#Prop-Validation)。
+* 使用 props 之前先检查该 prop 是否存在。
 
 ```html
 <template>
@@ -261,11 +261,11 @@ export default {
 ### 为什么？
 
 * 导出一个清晰、组织有序的组件，使得代码易于阅读和理解。同时也便于标准化。
-* 按首字母排序properties, data, computed, watches 和 methods使得这些对象内的属性便于查找。
-* 合理组织，使得组件易于阅读。(name; extends; props, data and computed; components; watch and methods; lifecycle methods, 等.);
-* 使用 `name` 属性。借助于[vue devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en)可以让你更方便的测试
-* 合理的 CSS 结构，如 [BEM](https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw) 或 [rscss](https://github.com/rstacruz/rscss) - [详情?](#使用组件名作为样式作用域空间);
-* 使用单文件 .vue 文件格式来组件代码
+* 按首字母排序 properties、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) 可以让你更方便的测试。
+* 合理的 CSS 结构，如 [BEM](https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw) 或 [rscss](https://github.com/rstacruz/rscss) - [详情？](#使用组件名作为样式作用域空间)。
+* 使用单文件 .vue 文件格式来组件代码。
 
 ### 怎么做？
 
@@ -273,7 +273,7 @@ export default {
 
 ```html
 <template lang="html">
-	<div class="Ranger__Wrapper">
+  <div class="Ranger__Wrapper">
 		<!-- ... -->
 	</div>
 </template>
@@ -301,7 +301,7 @@ export default {
     // 生命周期函数
     beforeCreate() {},
     mounted() {},
-};
+  };
 </script>
 
 <style scoped>
@@ -313,18 +313,18 @@ export default {
 
 ## 组件事件命名
 
-Vue.js 提供的处理函数和表达式都是绑定在 ViewModel 上的，组件的每一个事件都应该按照一个好的命名规范来，这样可以避免不少的开发问题，具体可见如下 ** 为什么**。
+Vue.js 提供的处理函数和表达式都是绑定在 ViewModel 上的，组件的每一个事件都应该按照一个好的命名规范来，这样可以避免不少的开发问题，具体可见如下 **为什么**。
 
 ### 为什么？
 
 * 开发者可以随意给事件命名，即使是原生事件的名字，这样会带来迷惑性。
-* 过于宽松的事件命名可能与[DOM模板不兼容](https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats)。
+* 过于宽松的事件命名可能与 [DOM 模板不兼容](https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats)。
 
 ### 怎么做？
 
-* 事件命名也连字符命名
-* 一个事件的名字对应组件外的一组意义操作，如：upload-success, upload-error 以及 dropzone-upload-success, dropzone-upload-error (如果需要前缀的话)。
-* 事件命名应该以动词(如 client-api-load) 或是 形容词(如 drive-upload-success)结尾。([出处](https://github.com/GoogleWebComponents/style-guide#events))
+* 事件名也使用连字符命名。
+* 一个事件的名字对应组件外的一组意义操作，如：upload-success、upload-error 以及 dropzone-upload-success、dropzone-upload-error （如果需要前缀的话）。
+* 事件命名应该以动词（如 client-api-load） 或是 形容词（如 drive-upload-success）结尾。（[出处](https://github.com/GoogleWebComponents/style-guide#events)）。
 
 
 [↑ 回到目录](#目录)
@@ -340,9 +340,9 @@ Vue.js 支持组件嵌套，并且子组件可访问父组件的上下文。访
 
 ### 怎么做？
 
-* 通过 props 将值传递给子组件
-* 通过 props 传递回调函数给子组件来达到调用父组件方法的目的
-* 通过在子组件触发事件来通知父组件
+* 通过 props 将值传递给子组件。
+* 通过 props 传递回调函数给子组件来达到调用父组件方法的目的。
+* 通过在子组件触发事件来通知父组件。
 
 [↑ 回到目录](#目录)
 
@@ -353,19 +353,18 @@ Vue.js 支持通过 `ref` 属性来访问其它组件和 HTML 元素。并通过
 ### 为什么？
 
 * 组件必须是保持独立的，如果一个组件的 API 不能够提供所需的功能，那么这个组件在设计、实现上是有问题的。
-* 组件的属性和事件必须足够的给大多数的组件使用
+* 组件的属性和事件必须足够的给大多数的组件使用。
 
 ### 怎么做？
 
-* 提供良好的组件 API
-* 总是关注于组件本身的目的
-* 拒绝定制代码。如果你在一个通用的组件内部编写特定需求的代码，那么代表这个组件的 API 不够通用，或者你可能需要一个新的组件来应对该需求
-* 检查所有的 props 是否有缺失的，如果有提一个 issue 或是完善这个组件
+* 提供良好的组件 API。
+* 总是关注于组件本身的目的。
+* 拒绝定制代码。如果你在一个通用的组件内部编写特定需求的代码，那么代表这个组件的 API 不够通用，或者你可能需要一个新的组件来应对该需求。
+* 检查所有的 props 是否有缺失的，如果有提一个 issue 或是完善这个组件。
 * 检查所有的事件。子组件向父组件通信一般是通过事件来实现的，但是大多数的开发者更多的关注于 props 从忽视了这点。
 * **Props向下传递，事件向上传递！**。以此为目标升级你的组件，提供良好的 API 和 独立性。
 * 当遇到 props 和 events 难以实现的功能时，通过 `this.$refs`来实现。
-* 当需要操作 DOM 无法通过指令来做的时候可使用 `this..$ref` 而不是 `JQuery`, `document.getElement*
-`, `document.queryElement`。
+* 当需要操作 DOM 无法通过指令来做的时候可使用 `this.$ref` 而不是 `JQuery`、`document.getElement*`、`document.queryElement`。
 
 
 ```html
@@ -439,16 +438,16 @@ Vue.js 支持通过 `ref` 属性来访问其它组件和 HTML 元素。并通过
 
 ## 使用组件名作为样式作用域空间
 
-Vue.js 的组件是自定义元素，这非常适合用来作为样式的根作用域空间。可以将组件名作为 css 类的命名空间。
+Vue.js 的组件是自定义元素，这非常适合用来作为样式的根作用域空间。可以将组件名作为 CSS 类的命名空间。
 
 ### 为什么？
 
-* 给样式加上作用域空间可以避免组件样式影响外部的样式
+* 给样式加上作用域空间可以避免组件样式影响外部的样式。
 * 保持模块名、目录名、样式根作用域名一样，可以很好的将其关联起来，便于开发者理解。
 
 ### 怎么做？
 
-使用组件名作为样式命名的前缀，可基于 BEM 或 OOCSS 范式。同时给style标签加上 scoped 属性。加上 scoped 属性编译后会给组件的 class 自动加上唯一的前缀从而避免样式的冲突。
+使用组件名作为样式命名的前缀，可基于 BEM 或 OOCSS 范式。同时给 style 标签加上 scoped 属性。加上 scoped 属性编译后会给组件的 class 自动加上唯一的前缀从而避免样式的冲突。
 
 ```html
 <style scoped>
@@ -470,10 +469,10 @@ Vue.js 的组件是自定义元素，这非常适合用来作为样式的根作
 
 ## 为什么？
 
-* 良好的文档可以让开发者比较容易的对组件有一个整体的认识，而不用去阅读组件的源码，也更方便开发者使用
+* 良好的文档可以让开发者比较容易的对组件有一个整体的认识，而不用去阅读组件的源码，也更方便开发者使用。
 * 组件配置属性即组件的 API，对于组件的用户来说他们更感兴趣的是 API 而不是实现原理。
-* 正式的文档会告诉开发者组件 API 变更以及向后的兼容性情况
-* `README.md` 是标准的我们应该首先阅读的文档文件。代码托管网站 (github/bitbucket/gitlab 等) 会默认在仓库中展示 该文件作为仓库的介绍。
+* 正式的文档会告诉开发者组件 API 变更以及向后的兼容性情况。
+* `README.md` 是标准的我们应该首先阅读的文档文件。代码托管网站（GitHub、Bitbucket、Gitlab 等）会默认在仓库中展示该文件作为仓库的介绍。
 
 ### 怎么做？
 
@@ -522,9 +521,9 @@ range slider 组件可通过拖动的方式来设置一个给定范围内的数
 
 ### 为什么？
 
-* demo 可以说明组件是独立可使用的
-* demo 可以让开发者预览组件的功能效果
-* demo 可以展示组件各种配置参数下的功能
+* demo 可以说明组件是独立可使用的。
+* demo 可以让开发者预览组件的功能效果。
+* demo 可以展示组件各种配置参数下的功能。
 
 [↑ 回到目录](#目录)
 
@@ -535,7 +534,7 @@ range slider 组件可通过拖动的方式来设置一个给定范围内的数
 ### 为什么？
 
 * 保证所有的开发者使用同样的编码规范。
-* 更早的感知到语法错误
+* 更早的感知到语法错误。
 
 ### 怎么做？
 
@@ -545,7 +544,7 @@ range slider 组件可通过拖动的方式来设置一个给定范围内的数
 
 [ESLint](http://eslint.org/) 需要通过 [ESLint HTML 插件](https://github.com/BenoitZugmeyer/eslint-plugin-html#eslint-plugin-html)来抽取组件中的代码。
 
-通过 `.eslintrc` 文件来配置 ESlint，这样 IED 可以更好的理解校验配置项。 ESlint，这样.
+通过 `.eslintrc` 文件来配置 ESlint，这样 IED 可以更好的理解校验配置项：
 
 ```json
 {
@@ -569,7 +568,7 @@ eslint src/**/*.vue
 
 #### JSHint
 
-[JSHint](http://jshint.com/) 可以解析 HTML (使用 `--extra-ext`命令参数) 和 抽取代码（使用 `--extract=auto`命令参数).
+[JSHint](http://jshint.com/) 可以解析 HTML（使用 `--extra-ext`命令参数）和抽取代码（使用 `--extract=auto`命令参数）。
 
 通过 `.jshintrc` 文件来配置 ESlint，这样 IED 可以更好的理解校验配置项。
 
@@ -593,9 +592,9 @@ jshint --config modules/.jshintrc --extra-ext=html --extract=auto modules/
 
 ### 如何提供帮助？
 
-Fork 和 提 PR 以帮助我们改进或者可以给我们提 [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/new).
+Fork 和提 PR 以帮助我们改进或者可以给我们提 [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/new)。
 
 ## 译者
 
 * [杨小福](https://github.com/xiaofuzi)
-* [机智的马里奥](https://github.com/wysxhlyy)
\ No newline at end of file
+* [机智的马里奥](https://github.com/wysxhlyy)

From d3598affb4fb0d8c020de790d46b2cc5ec8a9d4b Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Mon, 20 Mar 2017 10:40:22 +0800
Subject: [PATCH 02/56] :pencil2: Indent using spaces.

---
 README-CN.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README-CN.md b/README-CN.md
index d257095..85e4e25 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -104,9 +104,9 @@ Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很
 ```html
 <!-- 推荐 -->
 <template>
-	<h1>
-		{{ `${year}-${month}` }}
-	</h1>
+  <h1>
+    {{ `${year}-${month}` }}
+  </h1>
 </template>
 <script type="text/javascript">
   export default {

From b243d890d1e6c4d2aa8202d5d55adeb514568460 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Mon, 20 Mar 2017 10:45:04 +0800
Subject: [PATCH 03/56] :pencil2: Indent using spaces

---
 README-CN.md | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/README-CN.md b/README-CN.md
index 85e4e25..ebe94ba 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -128,9 +128,9 @@ Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很
 
 <!-- 避免 -->
 <template>
-	<h1>
-		{{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
-	</h1>
+  <h1>
+    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
+  </h1>
 </template>
 ```
 
@@ -138,7 +138,7 @@ Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很
 
 ### 组件 props 原子化
 
-虽然 Vue.js 支持传递复杂的 JavaScript 对象通过 props 属性，但是你应该尽可能的使用原始类型的数据。尽量只使用[JavaScript 原始类型](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)(字符串、数字、布尔值) 和 函数。尽量避免复杂的对象。
+虽然 Vue.js 支持传递复杂的 JavaScript 对象通过 props 属性，但是你应该尽可能的使用原始类型的数据。尽量只使用 [JavaScript 原始类型](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)（字符串、数字、布尔值）和函数。尽量避免复杂的对象。
 
 ### 为什么？
 
@@ -210,7 +210,7 @@ Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很
 
 [↑ 回到目录](#目录)
 
-## 将 `this` 赋值给 `component` 变量(
+## 将 `this` 赋值给 `component` 变量
 
 在 Vue.js 组件上下文中，`this`指向了组件实例。因此当你切换到了不同的上下文时，要确保 `this` 指向一个可用的 `component` 变量。
 
@@ -274,22 +274,22 @@ export default {
 ```html
 <template lang="html">
   <div class="Ranger__Wrapper">
-		<!-- ... -->
-	</div>
+    <!-- ... -->
+  </div>
 </template>
 
 <script type="text/javascript">
   export default {
-		// 不要忘记了 name 属性
+    // 不要忘记了 name 属性
     name: 'RangeSlider',
     // 组合其它组件
     extends: {},
     // 组件属性、变量
     props: {
-			bar: {}, // 按字母顺序
-			foo: {},
-			fooBar: {},
-		},
+      bar: {}, // 按字母顺序
+      foo: {},
+      fooBar: {},
+    },
     // 变量
     data() {},
     computed: {},
@@ -324,7 +324,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)）
 
 
 [↑ 回到目录](#目录)
@@ -394,9 +394,9 @@ Vue.js 支持通过 `ref` 属性来访问其它组件和 HTML 元素。并通过
   export default {
     // ...
     data() {
-        return {
-            active: false,
-        };
+      return {
+        active: false,
+      };
     },
     methods: {
       open() {
@@ -451,13 +451,13 @@ Vue.js 的组件是自定义元素，这非常适合用来作为样式的根作
 
 ```html
 <style scoped>
-	/* 推荐 */
-	.MyExample { }
-	.MyExample li { }
-	.MyExample__item { }
+  /* 推荐 */
+  .MyExample { }
+  .MyExample li { }
+  .MyExample__item { }
 
-	/* 避免 */
-	.My-Example { } /* not scoped to component or module name, not BEM compliant */
+  /* 避免 */
+  .My-Example { } /* not scoped to component or module name, not BEM compliant */
 </style>
 ```
 

From 6895ae7a10aa5465192684b5d338b52f7d90690c Mon Sep 17 00:00:00 2001
From: HakurouKen <ticshot@gmail.com>
Date: Mon, 20 Mar 2017 19:46:23 +0800
Subject: [PATCH 04/56] Using 2 spaces indentation.

---
 README-CN.md   | 46 +++++++++++++++++++++++-----------------------
 README-KR.md   | 48 ++++++++++++++++++++++++------------------------
 README-PTBR.md | 48 ++++++++++++++++++++++++------------------------
 README-RU.md   | 46 +++++++++++++++++++++++-----------------------
 README.md      | 48 ++++++++++++++++++++++++------------------------
 5 files changed, 118 insertions(+), 118 deletions(-)

diff --git a/README-CN.md b/README-CN.md
index a4aa9c5..ad3e958 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -104,9 +104,9 @@ Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很
 ```html
 <!-- 推荐 -->
 <template>
-	<h1>
-		{{ `${year}-${month}` }}
-	</h1>
+  <h1>
+    {{ `${year}-${month}` }}
+  </h1>
 </template>
 <script type="text/javascript">
   export default {
@@ -128,9 +128,9 @@ Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很
 
 <!-- 避免 -->
 <template>
-	<h1>
-		{{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
-	</h1>
+  <h1>
+    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
+  </h1>
 </template>
 ```
 
@@ -273,23 +273,23 @@ export default {
 
 ```html
 <template lang="html">
-	<div class="Ranger__Wrapper">
-		<!-- ... -->
-	</div>
+  <div class="Ranger__Wrapper">
+    <!-- ... -->
+  </div>
 </template>
 
 <script type="text/javascript">
   export default {
-		// 不要忘记了 name 属性
+    // 不要忘记了 name 属性
     name: 'RangeSlider',
     // 组合其它组件
     extends: {},
     // 组件属性、变量
     props: {
-			bar: {}, // 按字母顺序
-			foo: {},
-			fooBar: {},
-		},
+      bar: {}, // 按字母顺序
+      foo: {},
+      fooBar: {},
+    },
     // 变量
     data() {},
     computed: {},
@@ -401,10 +401,10 @@ Vue.js 支持通过 `ref` 属性来访问其它组件和 HTML 元素。并通过
     },
     methods: {
       open() {
-      	this.active = true;
+        this.active = true;
       },
       hide() {
-      	this.active = false;
+        this.active = false;
       },
     },
     // ...
@@ -427,7 +427,7 @@ Vue.js 支持通过 `ref` 属性来访问其它组件和 HTML 元素。并通过
     // ...
     methods: {
       getRangeCurrentValue() {
-      	return this.$refs.range.currentValue;
+        return this.$refs.range.currentValue;
       },
     },
     // ...
@@ -452,13 +452,13 @@ Vue.js 的组件是自定义元素，这非常适合用来作为样式的根作
 
 ```html
 <style scoped>
-	/* 推荐 */
-	.MyExample { }
-	.MyExample li { }
-	.MyExample__item { }
+  /* 推荐 */
+  .MyExample { }
+  .MyExample li { }
+  .MyExample__item { }
 
-	/* 避免 */
-	.My-Example { } /* not scoped to component or module name, not BEM compliant */
+  /* 避免 */
+  .My-Example { } /* not scoped to component or module name, not BEM compliant */
 </style>
 ```
 
diff --git a/README-KR.md b/README-KR.md
index 3b479d6..20aac6d 100644
--- a/README-KR.md
+++ b/README-KR.md
@@ -109,9 +109,9 @@ Vue.js의 인라인 표현식은 100% 자바스크립트입니다. 이 기능은
 ```html
 <!-- 권장합니다 -->
 <template>
-	<h1>
-		{{ `${year}-${month}` }}
-	</h1>
+  <h1>
+    {{ `${year}-${month}` }}
+  </h1>
 </template>
 <script type="text/javascript">
   export default {
@@ -133,9 +133,9 @@ Vue.js의 인라인 표현식은 100% 자바스크립트입니다. 이 기능은
 
 <!-- 피하세요! -->
 <template>
-	<h1>
-		{{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
-	</h1>
+  <h1>
+    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
+  </h1>
 </template>
 ```
 
@@ -283,23 +283,23 @@ export default {
 
 ```html
 <template lang="html">
-	<div class="Ranger__Wrapper">
-		<!-- ... -->
-	</div>
+  <div class="Ranger__Wrapper">
+    <!-- ... -->
+  </div>
 </template>
 
 <script type="text/javascript">
   export default {
-		// 이름 적는 것을 잊지마세요
+    // 이름 적는 것을 잊지마세요
     name: 'RangeSlider',
     // compose new components
     extends: {},
     // 컴포넌트 어트리뷰트 그룹
     props: {
-			bar: {}, // 알파벳순으로 정렬합니다
-			foo: {},
-			fooBar: {},
-		},
+      bar: {}, // 알파벳순으로 정렬합니다
+      foo: {},
+      fooBar: {},
+    },
     // 컴포넌트 변수 그룹
     data() {},
     computed: {},
@@ -408,10 +408,10 @@ Vue.js는 컴포넌트가 `ref` 어트리뷰트를 통해 다른 컴포넌트와
     },
     methods: {
       open() {
-      	this.active = true;
+        this.active = true;
       },
       hide() {
-      	this.active = false;
+        this.active = false;
       },
     },
     // ...
@@ -433,7 +433,7 @@ Vue.js는 컴포넌트가 `ref` 어트리뷰트를 통해 다른 컴포넌트와
     // ...
     methods: {
       getRangeCurrentValue() {
-      	return this.$refs.range.currentValue;
+        return this.$refs.range.currentValue;
       },
     },
     // ...
@@ -461,13 +461,13 @@ BEM 및 OOCSS에 기반한 네임스페이스 접두어로 컴포넌트 이름
 
 ```html
 <style scoped>
-	/* 권장합니다 */
-	.MyExample { }
-	.MyExample li { }
-	.MyExample__item { }
+  /* 권장합니다 */
+  .MyExample { }
+  .MyExample li { }
+  .MyExample__item { }
 
-	/* 피하세요! */
-	.My-Example { } /* 컴포넌트나 모듈 이름으로 scoped가 지정되지 않고 BEM 문법과 일치하지 않습니다. */
+  /* 피하세요! */
+  .My-Example { } /* 컴포넌트나 모듈 이름으로 scoped가 지정되지 않고 BEM 문법과 일치하지 않습니다. */
 </style>
 ```
 
@@ -625,7 +625,7 @@ 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">
+       src="https://cdn.rawgit.com/voorhoede/Vue.js-style-guide/master/Vue.js-style-guide.svg">
 </a>
 ```
 
diff --git a/README-PTBR.md b/README-PTBR.md
index 8174df0..0961153 100644
--- a/README-PTBR.md
+++ b/README-PTBR.md
@@ -113,9 +113,9 @@ Se elas tornam-se muito complexas ou difíceis de ler, **mova-as para um método
 ```html
 <!-- recomendado -->
 <template>
-	<h1>
-		{{ `${year}-${month}` }}
-	</h1>
+  <h1>
+    {{ `${year}-${month}` }}
+  </h1>
 </template>
 <script>
   export default {
@@ -137,9 +137,9 @@ Se elas tornam-se muito complexas ou difíceis de ler, **mova-as para um método
 
 <!-- evite -->
 <template>
-	<h1>
-		{{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
-	</h1>
+  <h1>
+    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
+  </h1>
 </template>
 ```
 
@@ -287,23 +287,23 @@ Estrutura do componente:
 
 ```html
 <template lang="html">
-	<div class="Ranger__Wrapper">
-		<!-- ... -->
-	</div>
+  <div class="Ranger__Wrapper">
+    <!-- ... -->
+  </div>
 </template>
 
 <script>
   export default {
-		// Não se esqueça desse atributo
+    // Não se esqueça desse atributo
     name: 'RangeSlider',
     // componha novos componentes
     extends: {},
     // propriedades/variáveis do componente
     props: {
-			bar: {}, // Ordenado Alfabeticamente
-			foo: {},
-			fooBar: {},
-		},
+      bar: {}, // Ordenado Alfabeticamente
+      foo: {},
+      fooBar: {},
+    },
     // variáveis
     data() {},
     computed: {},
@@ -412,10 +412,10 @@ Componente em Vue.js permite o acesso do contexto de outros componentes e elemen
     },
     methods: {
       open() {
-      	this.active = true;
+        this.active = true;
       },
       hide() {
-      	this.active = false;
+        this.active = false;
       },
     },
     // ...
@@ -438,7 +438,7 @@ Componente em Vue.js permite o acesso do contexto de outros componentes e elemen
     // ...
     methods: {
       getRangeCurrentValue() {
-      	return this.$refs.range.currentValue;
+        return this.$refs.range.currentValue;
       },
     },
     // ...
@@ -467,13 +467,13 @@ que compõem o seu componente, levanto a um CSS que não sai do contexto do seu
 
 ```html
 <style scoped>
-	/* recomendado */
-	.MyExample { }
-	.MyExample li { }
-	.MyExample__item { }
+  /* recomendado */
+  .MyExample { }
+  .MyExample li { }
+  .MyExample__item { }
 
-	/* evite */
-	.My-Example { } /* não tem escopo a um componente nem a um nome de um módulo; não segue nenhuma metodologia */
+  /* evite */
+  .My-Example { } /* não tem escopo a um componente nem a um nome de um módulo; não segue nenhuma metodologia */
 </style>
 ```
 
@@ -641,7 +641,7 @@ 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">
+       src="https://cdn.rawgit.com/voorhoede/Vue.js-style-guide/master/Vue.js-style-guide.svg">
 </a>
 ```
 
diff --git a/README-RU.md b/README-RU.md
index 0cc5bd2..3252411 100644
--- a/README-RU.md
+++ b/README-RU.md
@@ -103,9 +103,9 @@
 ```html
 <!-- правильно -->
 <template>
-	<h1>
-		{{ `${year}-${month}` }}
-	</h1>
+  <h1>
+    {{ `${year}-${month}` }}
+  </h1>
 </template>
 <script type="text/javascript">
   export default {
@@ -127,9 +127,9 @@
 
 <!-- неправильно -->
 <template>
-	<h1>
-		{{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
-	</h1>
+  <h1>
+    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
+  </h1>
 </template>
 ```
 
@@ -275,23 +275,23 @@ export default {
 
 ```html
 <template lang="html">
-	<div class="Ranger__Wrapper">
-		<!-- ... -->
-	</div>
+  <div class="Ranger__Wrapper">
+    <!-- ... -->
+  </div>
 </template>
 
 <script type="text/javascript">
   export default {
-		// обязательно не забываем имя к.
+    // обязательно не забываем имя к.
     name: 'RangeSlider',
     // можем использовать композицию уже существующих к.
     extends: {},
     // перечисление свойств и переменных
     props: {
-	bar: {}, // еще лучше если по-алфавиту
-	foo: {},
-	fooBar: {},
-	},
+  bar: {}, // еще лучше если по-алфавиту
+  foo: {},
+  fooBar: {},
+  },
     data() {},
     computed: {},
     // когда внутри используются другие к.
@@ -405,10 +405,10 @@ Vue как и React поддерживает обращение к другим
     },
     methods: {
       open() {
-      	this.active = true;
+        this.active = true;
       },
       hide() {
-      	this.active = false;
+        this.active = false;
       },
     },
     // ...
@@ -431,7 +431,7 @@ Vue как и React поддерживает обращение к другим
     // ...
     methods: {
       getRangeCurrentValue() {
-      	return this.$refs.range.currentValue;
+        return this.$refs.range.currentValue;
       },
     },
     // ...
@@ -459,13 +459,13 @@ Vue как и React поддерживает обращение к другим
 
 ```html
 <style scoped>
-	/* правильно */
-	.MyExample { }
-	.MyExample li { }
-	.MyExample__item { }
+  /* правильно */
+  .MyExample { }
+  .MyExample li { }
+  .MyExample__item { }
 
-	/* неправильно */
-	.My-Example { } /* не ограничен именем компонента или модуля, не соответствует спецификации BEM */
+  /* неправильно */
+  .My-Example { } /* не ограничен именем компонента или модуля, не соответствует спецификации BEM */
 </style>
 ```
 [↑ наверх](#Содержание)
diff --git a/README.md b/README.md
index 18f6ce8..fe1aa9f 100644
--- a/README.md
+++ b/README.md
@@ -112,9 +112,9 @@ If it gets too complex or hard to read **move it to methods or computed properti
 ```html
 <!-- recommended -->
 <template>
-	<h1>
-		{{ `${year}-${month}` }}
-	</h1>
+  <h1>
+    {{ `${year}-${month}` }}
+  </h1>
 </template>
 <script type="text/javascript">
   export default {
@@ -136,9 +136,9 @@ If it gets too complex or hard to read **move it to methods or computed properti
 
 <!-- avoid -->
 <template>
-	<h1>
-		{{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
-	</h1>
+  <h1>
+    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
+  </h1>
 </template>
 ```
 
@@ -286,23 +286,23 @@ Component structure:
 
 ```html
 <template lang="html">
-	<div class="Ranger__Wrapper">
-		<!-- ... -->
-	</div>
+  <div class="Ranger__Wrapper">
+    <!-- ... -->
+  </div>
 </template>
 
 <script type="text/javascript">
   export default {
-		// Do not forget this little guy
+    // Do not forget this little guy
     name: 'RangeSlider',
     // compose new components
     extends: {},
     // component properties/variables
     props: {
-			bar: {}, // Alphabetized
-			foo: {},
-			fooBar: {},
-		},
+      bar: {}, // Alphabetized
+      foo: {},
+      fooBar: {},
+    },
     // variables
     data() {},
     computed: {},
@@ -411,10 +411,10 @@ Vue.js supports components to have access to other components and basic HTML ele
     },
     methods: {
       open() {
-      	this.active = true;
+        this.active = true;
       },
       hide() {
-      	this.active = false;
+        this.active = false;
       },
     },
     // ...
@@ -437,7 +437,7 @@ Vue.js supports components to have access to other components and basic HTML ele
     // ...
     methods: {
       getRangeCurrentValue() {
-      	return this.$refs.range.currentValue;
+        return this.$refs.range.currentValue;
       },
     },
     // ...
@@ -466,13 +466,13 @@ CSS on all tags that compose your component, leading to a no leaking css styling
 
 ```html
 <style scoped>
-	/* recommended */
-	.MyExample { }
-	.MyExample li { }
-	.MyExample__item { }
+  /* recommended */
+  .MyExample { }
+  .MyExample li { }
+  .MyExample__item { }
 
-	/* avoid */
-	.My-Example { } /* not scoped to component or module name, not BEM compliant */
+  /* avoid */
+  .My-Example { } /* not scoped to component or module name, not BEM compliant */
 </style>
 ```
 
@@ -631,7 +631,7 @@ 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">
+       src="https://cdn.rawgit.com/voorhoede/Vue.js-style-guide/master/Vue.js-style-guide.svg">
 </a>
 ```
 

From 665ffed3d12e72f48b7f85e46aae4fd989d32687 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 20 Mar 2017 12:46:27 -0300
Subject: [PATCH 05/56] docute

---
 docs/config.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/docs/config.js b/docs/config.js
index 332c277..e694cfa 100644
--- a/docs/config.js
+++ b/docs/config.js
@@ -1,7 +1,16 @@
 self.$config = {
 	home: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README.md',
 	repo: 'pablohpsilva/vuejs-component-style-guide',
-  tocVisibleDepth: 2
+  tocVisibleDepth: 2,
+  nav: [
+    {title: 'Languages', type: 'dropdown', items: [
+      {title: 'English', path: '/', source: '/chinese-foo.md'},
+      {title: 'Português do Brasil', path: '/#/readme-ptbr', source: '/README-PTBR.md'},
+      {title: '中文', path: '/#/readme-cn', source: '/README-CN.md'},
+      {title: '한국어', path: '/#/readme-kr', source: '/README-KR.md'},
+      {title: 'русский язык', path: '/#/readme-ru', source: '/README-RU.md'}
+    ]}
+  ]
   // nav: [
   //   {
   //     title: 'Versão em Português',

From d0767ba29c47b501ba8463933466c52be666131d Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 20 Mar 2017 12:47:13 -0300
Subject: [PATCH 06/56] docute

---
 docs/config.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/config.js b/docs/config.js
index e694cfa..97b7038 100644
--- a/docs/config.js
+++ b/docs/config.js
@@ -1,16 +1,16 @@
 self.$config = {
 	home: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README.md',
 	repo: 'pablohpsilva/vuejs-component-style-guide',
-  tocVisibleDepth: 2,
-  nav: [
-    {title: 'Languages', type: 'dropdown', items: [
-      {title: 'English', path: '/', source: '/chinese-foo.md'},
-      {title: 'Português do Brasil', path: '/#/readme-ptbr', source: '/README-PTBR.md'},
-      {title: '中文', path: '/#/readme-cn', source: '/README-CN.md'},
-      {title: '한국어', path: '/#/readme-kr', source: '/README-KR.md'},
-      {title: 'русский язык', path: '/#/readme-ru', source: '/README-RU.md'}
-    ]}
-  ]
+  // tocVisibleDepth: 2,
+  // nav: [
+  //   {title: 'Languages', type: 'dropdown', items: [
+  //     {title: 'English', path: '/', source: '/chinese-foo.md'},
+  //     {title: 'Português do Brasil', path: '/#/readme-ptbr', source: '/README-PTBR.md'},
+  //     {title: '中文', path: '/#/readme-cn', source: '/README-CN.md'},
+  //     {title: '한국어', path: '/#/readme-kr', source: '/README-KR.md'},
+  //     {title: 'русский язык', path: '/#/readme-ru', source: '/README-RU.md'}
+  //   ]}
+  // ]
   // nav: [
   //   {
   //     title: 'Versão em Português',

From d9c0d71ee96effd8ecd576f256d95cd94a485c18 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 20 Mar 2017 12:48:48 -0300
Subject: [PATCH 07/56] docute

---
 docs/config.js | 32 --------------------------------
 1 file changed, 32 deletions(-)

diff --git a/docs/config.js b/docs/config.js
index 97b7038..0d5eb9d 100644
--- a/docs/config.js
+++ b/docs/config.js
@@ -1,36 +1,4 @@
 self.$config = {
 	home: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README.md',
 	repo: 'pablohpsilva/vuejs-component-style-guide',
-  // tocVisibleDepth: 2,
-  // nav: [
-  //   {title: 'Languages', type: 'dropdown', items: [
-  //     {title: 'English', path: '/', source: '/chinese-foo.md'},
-  //     {title: 'Português do Brasil', path: '/#/readme-ptbr', source: '/README-PTBR.md'},
-  //     {title: '中文', path: '/#/readme-cn', source: '/README-CN.md'},
-  //     {title: '한국어', path: '/#/readme-kr', source: '/README-KR.md'},
-  //     {title: 'русский язык', path: '/#/readme-ru', source: '/README-RU.md'}
-  //   ]}
-  // ]
-  // nav: [
-  //   {
-  //     title: 'Versão em Português',
-  //     path: '/#/brasilian-portuguese',
-  //     source: '/#/README-PTBR.md'
-  //   },
-  //   {
-  //     title: '中文版',
-  //     path: '/#/chinese',
-  //     source: '/#/README-CN.md'
-  //   },
-  //   {
-  //     title: '한국판',
-  //     path: '/#/korean',
-  //     source: '/#/README-KR.md'
-  //   },
-  //   {
-  //     title: 'Корейская версия',
-  //     path: '/#/russian',
-  //     source: '/#/README-RU.md'
-  //   },
-  // ],
 };

From 6783e279922b3f143d5aa1e76da765d8961ccff9 Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 20 Mar 2017 13:07:29 -0300
Subject: [PATCH 08/56] docute

---
 README-CN.md    |  2 +-
 README-KR.md    |  2 +-
 README-PTBR.md  |  2 +-
 README-RU.md    |  2 +-
 README.md       |  2 +-
 docs/config.js  |  4 ----
 docs/index.html | 34 ++++++++++++++++++++++++----------
 7 files changed, 29 insertions(+), 19 deletions(-)
 delete mode 100644 docs/config.js

diff --git a/README-CN.md b/README-CN.md
index ad3e958..3970192 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -1,7 +1,7 @@
 # Vue.js 组件编码规范
 
 <p align="center">
-  <img src="http://github.com/img/logo.png"/>
+  <img src="https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/img/logo.png"/>
 </p>
 
 ### 其它语言
diff --git a/README-KR.md b/README-KR.md
index 20aac6d..ecaa994 100644
--- a/README-KR.md
+++ b/README-KR.md
@@ -1,7 +1,7 @@
 # Vue.js 컴포넌트 스타일 가이드
 
 <p align="center">
-  <img src="http://github.com/img/logo.png"/>
+  <img src="https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/img/logo.png"/>
 </p>
 
 ### 번역
diff --git a/README-PTBR.md b/README-PTBR.md
index 0961153..c08da77 100644
--- a/README-PTBR.md
+++ b/README-PTBR.md
@@ -1,7 +1,7 @@
 # Style Guide para Componentes Vue.js
 
 <p align="center">
-  <img src="http://github.com/img/logo.png"/>
+  <img src="https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/img/logo.png"/>
 </p>
 
 ### Traduções
diff --git a/README-RU.md b/README-RU.md
index 3252411..020eb3b 100644
--- a/README-RU.md
+++ b/README-RU.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="http://github.com/img/logo.png"/>
+  <img src="https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/img/logo.png"/>
 </p>
 
 ### Переводы
diff --git a/README.md b/README.md
index fe1aa9f..46ce83c 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # Vue.js Component Style Guide
 
 <p align="center">
-  <img src="http://github.com/img/logo.png"/>
+  <img src="https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/img/logo.png"/>
 </p>
 
 ### Translations
diff --git a/docs/config.js b/docs/config.js
deleted file mode 100644
index 0d5eb9d..0000000
--- a/docs/config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-self.$config = {
-	home: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README.md',
-	repo: 'pablohpsilva/vuejs-component-style-guide',
-};
diff --git a/docs/index.html b/docs/index.html
index fabf65a..3e8dfae 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,17 +1,31 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
-	<title>Vue.js Component Style Guide</title>
-	<link rel="stylesheet" href="https://unpkg.com/docute@2/dist/docute.css">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+  <title>docs</title>
+  <link rel="stylesheet" href="https://unpkg.com/docute@3/dist/docute.css">
 </head>
 <body>
-	<!-- don't remove this part start -->
-	<div id="app"></div>
-	<script src="http://github.com/config.js"></script>
-	<script src="https://unpkg.com/docute@2/dist/docute.js"></script>
-	<!-- don't remove this part end -->
+  <div id="app"></div>
+  <script src="https://unpkg.com/docute@3/dist/docute.js"></script>
+  <script>
+    docute.init({
+    	home: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README.md',
+    	repo: 'pablohpsilva/vuejs-component-style-guide',
+      // tocVisibleDepth: 2,
+      nav: [
+        {title: 'Home', path: '/'},
+        {title: 'Languages', type: 'dropdown', items: [
+          {title: 'English', path: '/'},
+          {title: 'Português do Brasil', path: '/portuguese', source: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README-PTBR.md'},
+          {title: '中文', path: '/chinese', source: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README-CN.md'},
+          {title: '한국어', path: '/korean', source: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README-KR.md'},
+          {title: 'русский язык', path: '/russian', source: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README-RU.md'}
+        ]}
+      ]
+    });
+  </script>
 </body>
 </html>

From 819e9f74d36dc8b13416ed95d9fd9cf4d95e23ad Mon Sep 17 00:00:00 2001
From: Pablo Henrique Penha Silva <pablohpsilva@Pablos-Mac-mini.local>
Date: Mon, 20 Mar 2017 13:17:20 -0300
Subject: [PATCH 09/56] docute

---
 README-CN.md    | 10 +++++-----
 README-KR.md    | 12 ++++++------
 README-PTBR.md  |  8 ++++----
 README-RU.md    |  8 ++++----
 README.md       | 10 +++++-----
 docs/index.html |  5 +++++
 6 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/README-CN.md b/README-CN.md
index 3970192..ca6ff15 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -5,10 +5,10 @@
 </p>
 
 ### 其它语言
-* [英文](README.md)
-* [葡萄牙语](README-PTBR.md)
-* [韩语](README-KR.md)
-* [俄语](README-RU.md)
+* [英文](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/#/korean)
+* [俄语](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian)
 
 ## 目标
 
@@ -598,4 +598,4 @@ Fork 和 提 PR 以帮助我们改进或者可以给我们提 [Issue](https://gi
 ## 译者
 
 * [杨小福](https://github.com/xiaofuzi)
-* [机智的马里奥](https://github.com/wysxhlyy)
\ No newline at end of file
+* [机智的马里奥](https://github.com/wysxhlyy)
diff --git a/README-KR.md b/README-KR.md
index ecaa994..e95d043 100644
--- a/README-KR.md
+++ b/README-KR.md
@@ -5,10 +5,10 @@
 </p>
 
 ### 번역
-* [브라질 포르투갈어](README-PTBR.md)
-* [중국어](README-CN.md)
-* [영어](README.md)
-* [러시아어](README-RU.md)
+* [브라질 포르투갈어](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/#/)
+* [러시아어](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian)
 
 ## 목적
 
@@ -644,6 +644,6 @@ Or html:
 
 ## 번역자들
 
-* [한국어](README-KR.md): Lee Sun-Hyoup [github:kciter](https://github.com/kciter), [facebook: sunhyoup.lee](https://www.facebook.com/sunhyoup.lee)
+* [한국어](https://pablohpsilva.github.io/vuejs-component-style-guide/#/korean): Lee Sun-Hyoup [github:kciter](https://github.com/kciter), [facebook: sunhyoup.lee](https://www.facebook.com/sunhyoup.lee)
 * [브라질 포르투갈어](README-PTBR.md): Pablo Henrique Silva [github:pablohpsilva](https://github.com/pablohpsilva), [twitter: @PabloHPSilva](https://twitter.com/PabloHPSilva)
-* [러시아어](README-RU.md): Mikhail Kuznetcov [github:shershen08](https://github.com/shershen08), [twitter: @legkoletat](https://twitter.com/legkoletat)
+* [러시아어](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian): Mikhail Kuznetcov [github:shershen08](https://github.com/shershen08), [twitter: @legkoletat](https://twitter.com/legkoletat)
diff --git a/README-PTBR.md b/README-PTBR.md
index c08da77..7160f48 100644
--- a/README-PTBR.md
+++ b/README-PTBR.md
@@ -5,10 +5,10 @@
 </p>
 
 ### Traduções
-* [Chinês](README-CN.md)
-* [Coreano](README-KR.md)
-* [Inglês](README.md)
-* [Russo](README-RU.md)
+* [Chinês](https://pablohpsilva.github.io/vuejs-component-style-guide/#/chinese)
+* [Coreano](https://pablohpsilva.github.io/vuejs-component-style-guide/#/korean)
+* [Inglês](https://pablohpsilva.github.io/vuejs-component-style-guide/#/)
+* [Russo](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian)
 
 ## Propósito
 
diff --git a/README-RU.md b/README-RU.md
index 020eb3b..a206b4d 100644
--- a/README-RU.md
+++ b/README-RU.md
@@ -3,10 +3,10 @@
 </p>
 
 ### Переводы
- * [бразильский португальский](README-PTBR.md)
- * [английский](README.md)
- * [корейский язык](README-KR.md)
- * [китайский язык](README-CN.md)
+ * [бразильский португальский](https://pablohpsilva.github.io/vuejs-component-style-guide/#/portuguese)
+ * [английский](https://pablohpsilva.github.io/vuejs-component-style-guide/#)
+ * [корейский язык](https://pablohpsilva.github.io/vuejs-component-style-guide/#/korean)
+ * [китайский язык](https://pablohpsilva.github.io/vuejs-component-style-guide/#/chinese)
 
 Этот документ предлагает для вас ряд правил по разработке компонентов Vue которые:
 
diff --git a/README.md b/README.md
index 46ce83c..a3f950a 100644
--- a/README.md
+++ b/README.md
@@ -5,10 +5,10 @@
 </p>
 
 ### Translations
-* [Brazilian Portuguese](README-PTBR.md)
-* [Chinese](README-CN.md)
-* [Korean](README-KR.md)
-* [Russian](README-RU.md)
+* [Brazilian Portuguese](https://pablohpsilva.github.io/vuejs-component-style-guide/#/portuguese)
+* [Chinese](https://pablohpsilva.github.io/vuejs-component-style-guide/#/chinese)
+* [Korean](https://pablohpsilva.github.io/vuejs-component-style-guide/#/korean)
+* [Russian](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian)
 
 ## Purpose
 
@@ -652,4 +652,4 @@ You can copy, modify, distribute and perform the work, even for commercial purpo
 ## Translation authors
 
 * [Brazilian Portuguese](README-PTBR.md): Pablo Henrique Silva [github:pablohpsilva](https://github.com/pablohpsilva), [twitter: @PabloHPSilva](https://twitter.com/PabloHPSilva)
-* [Russian](README-RU.md): Mikhail Kuznetcov [github:shershen08](https://github.com/shershen08), [twitter: @legkoletat](https://twitter.com/legkoletat)
+* [Russian](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian): Mikhail Kuznetcov [github:shershen08](https://github.com/shershen08), [twitter: @legkoletat](https://twitter.com/legkoletat)
diff --git a/docs/index.html b/docs/index.html
index 3e8dfae..a372db1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,6 +6,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
   <title>docs</title>
   <link rel="stylesheet" href="https://unpkg.com/docute@3/dist/docute.css">
+  <style>
+    #app .translations {
+      display: none;
+    }
+  </style>
 </head>
 <body>
   <div id="app"></div>

From 45b8ca2c4e657d7def36cd2585aa14ca0bb9ad4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 21 Mar 2017 09:37:27 +0800
Subject: [PATCH 10/56] :memo: Add my name as one of the translators.

#35
---
 README-CN.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README-CN.md b/README-CN.md
index ebe94ba..40070cc 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -598,3 +598,4 @@ Fork 和提 PR 以帮助我们改进或者可以给我们提 [Issue](https://git
 
 * [杨小福](https://github.com/xiaofuzi)
 * [机智的马里奥](https://github.com/wysxhlyy)
+* [根号三](https://github.com/sqrthree)

From d339a486bb40911e7de435a83434968cee9b5ea0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=B9=E5=8F=B7=E4=B8=89?= <sqrtthree@foxmail.com>
Date: Tue, 21 Mar 2017 11:45:31 +0800
Subject: [PATCH 11/56] Fix typos. fix #38

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

diff --git a/README-CN.md b/README-CN.md
index 186370e..911b8de 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -336,7 +336,7 @@ Vue.js 支持组件嵌套，并且子组件可访问父组件的上下文。访
 ### 为什么？
 
 * 组件必须相互保持独立，Vue 组件也是。如果组件需要访问其父层的上下文就违反了该原则。
-* 如果一个组件需要访问其父组件的上下文，那么该组件将不能再其它上下文中复用。
+* 如果一个组件需要访问其父组件的上下文，那么该组件将不能在其它上下文中复用。
 
 ### 怎么做？
 
@@ -598,4 +598,4 @@ Fork 和提 PR 以帮助我们改进或者可以给我们提 [Issue](https://git
 
 * [杨小福](https://github.com/xiaofuzi)
 * [机智的马里奥](https://github.com/wysxhlyy)
-* [根号三](https://github.com/sqrthree)
\ No newline at end of file
+* [根号三](https://github.com/sqrthree)

From cb068f44a1521eb5a9397cd1bd827550f436870e Mon Sep 17 00:00:00 2001
From: Shailendher <shailusmilez@gmail.com>
Date: Fri, 31 Mar 2017 10:38:58 +0200
Subject: [PATCH 12/56] Fix minor typo

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

diff --git a/README.md b/README.md
index a3f950a..588f4fb 100644
--- a/README.md
+++ b/README.md
@@ -390,7 +390,7 @@ Vue.js supports components to have access to other components and basic HTML ele
 <!-- good example of when to use this.$refs -->
 <modal ref="basicModal">
   <h4>Basic Modal</h4>
-  <button class="primary" @click="$refs.basicModal.close()">Close</button>
+  <button class="primary" @click="$refs.basicModal.hide()">Close</button>
 </modal>
 <button @click="$refs.basicModal.open()">Open modal</button>
 

From 8c7564d0c360e03cd09715b5dd24c6322aea6c34 Mon Sep 17 00:00:00 2001
From: HakurouKen <ticshot@gmail.com>
Date: Sat, 1 Apr 2017 16:03:38 +0800
Subject: [PATCH 13/56] Fix typos.

---
 README-CN.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README-CN.md b/README-CN.md
index 911b8de..6f4c2b8 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -493,7 +493,7 @@ range-slider/
 
 range slider 组件可通过拖动的方式来设置一个给定范围内的数值。
 
-该模块使用 [noUiSlider](http://refreshless.com/nouislider/) 来实现夸浏览器和 touch 功能的支持。
+该模块使用 [noUiSlider](http://refreshless.com/nouislider/) 来实现跨浏览器和 touch 功能的支持。
 
 ## 如何使用
 
@@ -544,7 +544,7 @@ range slider 组件可通过拖动的方式来设置一个给定范围内的数
 
 [ESLint](http://eslint.org/) 需要通过 [ESLint HTML 插件](https://github.com/BenoitZugmeyer/eslint-plugin-html#eslint-plugin-html)来抽取组件中的代码。
 
-通过 `.eslintrc` 文件来配置 ESlint，这样 IED 可以更好的理解校验配置项：
+通过 `.eslintrc` 文件来配置 ESlint，这样 IDE 可以更好的理解校验配置项：
 
 ```json
 {
@@ -570,7 +570,7 @@ eslint src/**/*.vue
 
 [JSHint](http://jshint.com/) 可以解析 HTML（使用 `--extra-ext`命令参数）和抽取代码（使用 `--extract=auto`命令参数）。
 
-通过 `.jshintrc` 文件来配置 ESlint，这样 IED 可以更好的理解校验配置项。
+通过 `.jshintrc` 文件来配置 ESlint，这样 IDE 可以更好的理解校验配置项。
 
 ```json
 {

From 103067bf8c6fa5e01e3294c84ffda0efcc83a91a Mon Sep 17 00:00:00 2001
From: HakurouKen <ticshot@gmail.com>
Date: Sat, 1 Apr 2017 16:17:19 +0800
Subject: [PATCH 14/56] Missing translation.

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

diff --git a/README-CN.md b/README-CN.md
index 6f4c2b8..ea5d555 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -457,7 +457,7 @@ Vue.js 的组件是自定义元素，这非常适合用来作为样式的根作
   .MyExample__item { }
 
   /* 避免 */
-  .My-Example { } /* not scoped to component or module name, not BEM compliant */
+  .My-Example { } /* 没有用组件名或模块名限制作用域, 不符合 BEM 规范 */
 </style>
 ```
 

From 8e423832ae4e19adbf6b664b75bf27ac01489fc4 Mon Sep 17 00:00:00 2001
From: Luke Shaheen <luke@phone2action.com>
Date: Wed, 10 May 2017 12:20:27 -0400
Subject: [PATCH 15/56] Fix anchor typo in table of contents

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

diff --git a/README.md b/README.md
index 588f4fb..ff87c77 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ This guide is inspired by the [RiotJS Style Guide](https://github.com/voorhoede/
 * [Module based development](#module-based-development)
 * [vue component names](#vue-component-names)
 <!-- * [Use `*.vue` extension](#use-vue-extension) -->
-* [Keep component expressions simple](#keep-expressions-simple)
+* [Keep component expressions simple](#keep-component-expressions-simple)
 * [Keep component props primitive](#keep-component-props-primitive)
 * [Harness your component props](#harness-your-component-props)
 * [Assign `this` to `component`](#assign-this-to-component)

From 29c901188d937da7f6b490c87ed2fa17a6bbe1fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vanrenterghem?= <remi.vanrenterghem01@gmail.com>
Date: Thu, 11 May 2017 14:22:08 +0200
Subject: [PATCH 16/56] Add "Create components when needed" section

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

diff --git a/README.md b/README.md
index ff87c77..a049e62 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,7 @@ This guide is inspired by the [RiotJS Style Guide](https://github.com/voorhoede/
 * [Document your component API](#document-your-component-api)
 * [Add a component demo](#add-a-component-demo)
 * [Lint your component files](#lint-your-component-files)
+* [Create components when needed](#create-components-when-needed)
 <!-- * [Add badge to your project](#add-badge-to-your-project) -->
 
 
@@ -601,6 +602,29 @@ Note: JSHint does not accept `vue` as extension, but only `html`.
 
 [↑ back to Table of Contents](#table-of-contents)
 
+
+## Create components when needed
+
+### Why?
+
+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;
+
+### How?
+
+* 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;
+
+[↑ back to Table of Contents](#table-of-contents)
+
 ---
 
 ## Wanna help?

From 85a91a0dcd9d43f74726512113d7ab0da3ba644d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vanrenterghem?= <remi.vanrenterghem01@gmail.com>
Date: Thu, 11 May 2017 14:26:01 +0200
Subject: [PATCH 17/56] Revert "Add "Create components when needed" section"

This reverts commit 29c901188d937da7f6b490c87ed2fa17a6bbe1fc.
---
 README.md | 24 ------------------------
 1 file changed, 24 deletions(-)

diff --git a/README.md b/README.md
index a049e62..ff87c77 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,6 @@ This guide is inspired by the [RiotJS Style Guide](https://github.com/voorhoede/
 * [Document your component API](#document-your-component-api)
 * [Add a component demo](#add-a-component-demo)
 * [Lint your component files](#lint-your-component-files)
-* [Create components when needed](#create-components-when-needed)
 <!-- * [Add badge to your project](#add-badge-to-your-project) -->
 
 
@@ -602,29 +601,6 @@ Note: JSHint does not accept `vue` as extension, but only `html`.
 
 [↑ back to Table of Contents](#table-of-contents)
 
-
-## Create components when needed
-
-### Why?
-
-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;
-
-### How?
-
-* 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;
-
-[↑ back to Table of Contents](#table-of-contents)
-
 ---
 
 ## Wanna help?

From b0e8dd51d1d52f4e45473410fa9d88afe6bf55db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vanrenterghem?= <remi.vanrenterghem01@gmail.com>
Date: Thu, 11 May 2017 14:27:05 +0200
Subject: [PATCH 18/56] Revert "Revert "Add "Create components when needed"
 section""

This reverts commit 85a91a0dcd9d43f74726512113d7ab0da3ba644d.
---
 README.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/README.md b/README.md
index ff87c77..a049e62 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,7 @@ This guide is inspired by the [RiotJS Style Guide](https://github.com/voorhoede/
 * [Document your component API](#document-your-component-api)
 * [Add a component demo](#add-a-component-demo)
 * [Lint your component files](#lint-your-component-files)
+* [Create components when needed](#create-components-when-needed)
 <!-- * [Add badge to your project](#add-badge-to-your-project) -->
 
 
@@ -601,6 +602,29 @@ Note: JSHint does not accept `vue` as extension, but only `html`.
 
 [↑ back to Table of Contents](#table-of-contents)
 
+
+## Create components when needed
+
+### Why?
+
+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;
+
+### How?
+
+* 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;
+
+[↑ back to Table of Contents](#table-of-contents)
+
 ---
 
 ## Wanna help?

From 8f302aaf246367466f21e124af1cdf2ffbe5910d Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Mon, 29 May 2017 12:20:45 +0800
Subject: [PATCH 19/56] :memo: Translate the new section

Translate the 'Create components when needed' part. #39
---
 README-CN.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/README-CN.md b/README-CN.md
index ea5d555..b387c89 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -38,6 +38,7 @@
 * [提供组件 API 文档](#提供组件-api-文档)
 * [提供组件 demo](#提供组件-demo)
 * [对组件文件进行代码校验](#对组件文件进行代码校验)
+* [只在需要时创建组件](#只在需要时创建组件)
 <!-- * [为你的项目添加徽章标识](#为你的项目添加徽章标识) -->
 
 ## 基于模块开发
@@ -586,6 +587,26 @@ jshint --config modules/.jshintrc --extra-ext=html --extract=auto modules/
 
 注：JSHint 不接受 `vue` 扩展名的文件，只支持 `html`。
 
+## 只在需要时创建组件
+
+### 为什么？
+
+Vue.js 是一个基于组件的框架。如果你不知道何时创建组件可能会导致以下问题：
+
+* 如果组件太大, 可能很难重用和维护;
+* 如果组件太小，你的项目就会（因为深层次的嵌套而）被淹没，也更难使组件间通信;
+
+### 怎么做?
+
+* 始终记住为你的项目需求构建你的组件，但是你也应该尝试想到它们能够从中脱颖而出（独立于项目之外）。如果它们能够在你项目之外工作，就像一个库那样，就会使得它们更加健壮和一致。
+* 尽可能早地构建你的组件总是更好的，因为这样使得你可以在一个已经存在和稳定的组件上构建你的组件间通信（props & events）。
+
+### 规则
+
+* 首先，尽可能早地尝试构建出诸如模态框、提示框、工具条、菜单、头部等这些明显的（通用型）组件。总之，你知道的这些组件以后一定会在当前页面或者是全局范围内需要。
+* 第二，在每一个新的开发项目中，对于一整个页面或者其中的一部分，在进行开发前先尝试思考一下。如果你认为它有一部分应该是一个组件，那么就创建它吧。
+* 最后，如果你不确定，那就不要。避免那些“以后可能会有用”的组件污染你的项目。它们可能会永远的只是（静静地）待在那里，这一点也不聪明。注意，一旦你意识到应该这么做，最好是就把它打破，以避免与项目的其他部分构成兼容性和复杂性。
+
 [↑ 回到目录](#目录)
 
 ---

From ad3b736c98700228fd0cac118c0900012c3060a6 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Mon, 29 May 2017 12:24:43 +0800
Subject: [PATCH 20/56] :pencil2: Fix a typo

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

diff --git a/README-CN.md b/README-CN.md
index b387c89..efc2c64 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -380,7 +380,7 @@ Vue.js 支持通过 `ref` 属性来访问其它组件和 HTML 元素。并通过
 <!-- 使用 this.$refs 的适用情况-->
 <modal ref="basicModal">
   <h4>Basic Modal</h4>
-  <button class="primary" @click="$refs.basicModal.close()">Close</button>
+  <button class="primary" @click="$refs.basicModal.hide()">Close</button>
 </modal>
 <button @click="$refs.basicModal.open()">Open modal</button>
 

From 4cb5d99b9d95973d4e585fed98ef35d950c2d591 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Mon, 29 May 2017 14:23:18 +0800
Subject: [PATCH 21/56] =?UTF-8?q?:sparkles:=20Add=20a=20link=20to=20see=20?=
 =?UTF-8?q?what=E2=80=99s=20changed=20between=20the=20current=20and=20the?=
 =?UTF-8?q?=20latest?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/README-CN.md b/README-CN.md
index efc2c64..52b5746 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -1,5 +1,7 @@
 # Vue.js 组件编码规范
 
+> 这个 [链接](https://github.com/pablohpsilva/vuejs-component-style-guide/compare/6c5831912f9926a447f4d4531e745d53609aeb33...pablohpsilva:master) 用来查看本翻译与英文版是否有差别（如果你没有看到 README.md 发生变化，那就意味着这份翻译文档是最新的）。
+
 <p align="center">
   <img src="https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/img/logo.png"/>
 </p>

From 564c7de3c168de7bd63d827ecda7136e88747dc6 Mon Sep 17 00:00:00 2001
From: Lee Sun-Hyoup <kciter@naver.com>
Date: Thu, 1 Jun 2017 16:01:18 +0900
Subject: [PATCH 22/56] Translate korean the new section

Hello @pablohpsilva,
Is it allow to put this page into the book that I am writing?
Thank you :)
---
 README-KR.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/README-KR.md b/README-KR.md
index e95d043..b6e3d8a 100644
--- a/README-KR.md
+++ b/README-KR.md
@@ -595,6 +595,29 @@ jshint --config modules/.jshintrc --extra-ext=html --extract=auto modules/
 
 [↑ 목차로 돌아가기](#목차)
 
+## 필요하다면 컴포넌트 만들기
+
+### 왜 그렇게 하나요?
+
+Vue.js는 컴포넌트 기반 프레임워크 입니다. 컴포넌트 만드는 시기를 모르면 다음과 같은 문제가 발생할 수 있습니다.
+
+* 컴포넌트가 너무 크다면, 사용 및 유지보수가 어려울 수 있습니다.
+* 컴포넌트가 너무 작다면, 프로젝트가 너무 커지고 컴포넌트간 통신이 어려울 수 있습니다.
+
+### 어떻게 하나요?
+
+* 프로젝트 요구 사항에 맞는 컴포넌트를 작성하는 것을 잊으면 안되지만 특정 기능을 컴포넌트를 사용하여 만들 수 있다고 생각해야 합니다. 라이브러리처럼 작성 할 수 있다면 훨씬 강력하고 일관성이 있습니다.
+* 가능한 빨리 컴포넌트를 만들면 기존 컴포넌트에 안정적으로 통신(props 및 event)을 구현 할 수 있습니다.
+
+### 규칙
+
+* 첫째, 가능한 빠르게 현재 작성 중인 페이지 또는 전체적으로 모달, 팝 오버, 툴바, 메뉴, 헤더 등 필요할 것이 확실한 컴포넌트를 작성하세요.
+* 둘째, 전체 페이지 또는 그 일부분에 대해 새롭게 개발하는 것을 서두르기 전에 생각해보세요. 당신이 작성해야할 그 일부분이 확실히 컴포넌트가 될 수 있을때 작성하세요.
+* 마지막으로, 확실하지 않다면 만들지마세요! "나중에 쓸모있는 컴포넌트"로 프로젝트를 오염시키지 마십시오. 그 컴포넌트는 영원히 사용하지 않을 수도 있습니다. 프로젝트의 컴포넌트와의 호환성의 복잡성을 피하기 위해 필요할 때 컴포넌트를 만드는게 좋습니다.
+
+[↑ 목차로 돌아가기](#목차)
+
+
 ---
 
 ## 도움을 주시겠습니까?

From 6ec8f1fa645299d2d750b096074c1529e3a1432f Mon Sep 17 00:00:00 2001
From: To-maruyama <To-maruyama@users.noreply.github.com>
Date: Sat, 3 Jun 2017 00:29:03 +0900
Subject: [PATCH 23/56] add README-JP.md

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

diff --git a/README-JP.md b/README-JP.md
new file mode 100644
index 0000000..87f6acf
--- /dev/null
+++ b/README-JP.md
@@ -0,0 +1,686 @@
+# 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/#/portuguese)
+* [中国語](https://pablohpsilva.github.io/vuejs-component-style-guide/#/chinese)
+* [韓国語](https://pablohpsilva.github.io/vuejs-component-style-guide/#/korean)
+* [ロシア語](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian)
+
+## 目的
+
+このガイドはあなたの[Vue.js](http://vuejs.org/) のコードを統一する方法を提供します。
+
+* 開発者／チームメンバがより問題を理解し、見つけやすくする。
+* IDEがよりコードを解釈し、支援を提供しやすくする。
+* すでに使用しているビルドツールを（再）利用しやすくする。
+* 別々のコードの塊を蓄え、供給しやすくする。
+
+このガイドは[De Voorhoede](https://github.com/voorhoede)による[RiotJS Style Guide](https://github.com/voorhoede/riotjs-style-guide)に刺激を受け作られました。
+
+## 目次
+
+* [モジュールベースの開発](#module-based-development)
+* [Vueコンポーネントの名前](#vue-component-names)
+<!-- * [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)
+<!-- * [Add badge to your project](#add-badge-to-your-project) -->
+
+
+## モジュールベースの開発
+
+常に単一の機能を持つ小さなモジュールからアプリケーションを構築しましょう。
+
+モジュールはアプリケーションの自己完結型の小さな部品です。特にVue.jsライブラリはあなたが*view-logicなモジュール*を作れるように設計されています。
+
+### 理由
+
+小さなモジュールにすることで、あなたと他の開発者両方にとって、学びやすく、理解しやすく、維持しやすく、再利用しやすく、そして、
+デバッグしやすくなります。
+
+### 方法
+
+各Vueコンポーネント（モジュールのようなもの）は [FIRST](https://addyosmani.com/first/): ひとつのことに集中し (*Focused* ([単一責任](http://en.wikipedia.org/wiki/Single_responsibility_principle)))、独立していて(*Independent*)、 再利用可能で(*Reusable*)、小さく(*Small*) そしてテスト可能 (*Testable*)でなければなりません。
+
+もしあなたのコンポーネントが多くのことをしていて大きすぎる場合、ひとつのことだけをする、より小さなコンポーネントに分けましょう。
+経験則から言うと、各コンポーネントは１００行以下のコードになるようにするのがいいでしょう。また、例えばスタンドアローンのデモを追加することによって、
+Vueコンポーネントが独立して動作することを確認しましょう。
+
+[↑ 目次に戻る](#table-of-contents)
+
+
+## Vueコンポーネントの名前
+
+各コンポーネントの名前は、
+
+* **意味のある名前で**: 具体的過ぎず、抽象的過ぎず。
+* **短く**: ２または３語。
+* **発音可能**: それらについて話せるようにしたい。
+
+であるべきです。
+
+さらにVueコンポーネントの名前は、
+
+* **カスタム要素仕様に準拠**: [ハイフンを含み](https://www.w3.org/TR/custom-elements/#concepts)、 予約語は使用しない。
+* **`app-` ネームスペース**: 非常に汎用的、あるいは１語であれば、他のプロジェクトでも容易に再利用できる。
+
+であるべきです。
+
+### 理由
+
+* 名前は、コンポーネントについて会話するときに使用されます。したがって、それは短く、意味があり、発音可能でなければなりません。
+
+### 方法
+
+```html
+<!-- 推奨 -->
+<app-header></app-header>
+<user-list></user-list>
+<range-slider></range-slider>
+
+<!-- 非推奨 -->
+<btn-group></btn-group> <!-- 短いですが, 発音が困難です。代わりに`button-group`を使いましょう -->
+<ui-slider></ui-slider> <!-- 全てコンポーネントはuiなので、中身を表していません -->
+<slider></slider> <!-- カスタム要素仕様に準拠していません -->
+```
+
+[↑ 目次に戻る](#table-of-contents)
+
+
+## コンポーネントの記述をシンプルに保つ
+
+Vue.jsのインラインの記述は100％JavaScriptです。これは非常に強力なことですが、複雑になる可能性もあるということです。
+ですので、**シンプルな記述を保つようにしましょう。**.
+
+### 理由
+
+* 複雑なインラインの記述は判読困難です。
+* インラインの記述は他の場所で再利用できません。これはコードの重複と腐敗につながります。
+* IDEは基本的に式の構文サポート機能を持っていないため、自動補完や検証を行うことができません。
+
+### 方法
+
+もしあまりにも複雑だったり、判読困難な場合は**メソッド、またはcomputedプロパティに移動させましょう**!
+
+```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>
+
+<!-- 非推奨 -->
+<template>
+  <h1>
+    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
+  </h1>
+</template>
+```
+
+[↑ 目次に戻る](#table-of-contents)
+
+
+## コンポーネントのpropsをプリミティブに保つ
+
+Vue.jsは複雑なJavaScriptオブジェクトを渡せるようになっていますが, **コンポーネントのpropsはできるだけプリミティブに保つ** ようにするべきです。複雑なオブジェクトの使用を避け、[JavaScriptプリミティブ](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)と関数のみを使うようにしましょう。
+
+### 理由
+
+* 各propの属性を別々に使用することにより、コンポーネントは明確で表現力豊かなAPIを持つことになります。
+* propsの値としてプリミティブとファンクションのみを使用することで、コンポーネントのAPIをネイティブHTML（5）のAPIに似たものにできます。
+* 各propの属性を使用することで、他の開発者がコンポネーントインスタンスに何が渡されるかを理解しやすくなります。
+* 複雑なオブジェクトが渡されると、そのオブジェクトのどのプロパティとメソッドが実際にカスタムコンポーネントで使われるかがわかりにくくなります。これによりコードのリファクタリングが難しくなり、腐敗を招くことになります。
+
+### 方法
+
+プリミティブまたは関数を値としたpropsごとのコンポーネント属性を使用します。
+
+```html
+<!-- 推奨 -->
+<range-slider
+  :values="[10, 20]"
+  min="0"
+  max="100"
+  step="5"
+  :on-slide="updateInputs"
+  :on-end="updateResults">
+</range-slider>
+
+<!-- 非推奨 -->
+<range-slider :config="complexConfigObject"></range-slider>
+```
+
+[↑ 目次に戻る](#table-of-contents)
+
+
+## コンポーネントのpropsの利用
+
+Vue.jsでは、あなたのコンポーネントのpropsはあなたのAPIです。頑丈で予測しやすいAPIは、他の開発者があなたのコンポーネントを使用するのを簡単にします。
+
+コンポーネントのpropsはカスタムHTML属性を介して渡されます。 これらの属性の値はVue.jsプレーンストリング (`:attr="値"` または `v-bind:attr="値"`)か、または無いこともあります。 あなたは **コンポーネントのpropsを利用** して、それらの異なるケースに対応できるようにしましょう。
+
+### 理由
+
+コンポーネントのpropsを利用することで、あなたのコンポーネントを常に機能するようになります（防御的プログラミング）。それは後で他の開発者が、あなたが想定していない方法でコンポーネントを使用する場合でもです。
+
+### 方法
+
+* propsのデフォルト値を使用します。
+* 期待するタイプの値の[検証](http://vuejs.org/v2/guide/components.html#Prop-Validation)のために、`type`オプションを使用します。**[1\*]**
+* 使用される前にpropsが存在するかチェックします。
+
+```html
+<template>
+  <input type="range" v-model="value" :max="max" :min="min">
+</template>
+<script type="text/javascript">
+  export default {
+    props: {
+      max: {
+        type: Number, // [1*] これは'max'propが数値であることを検証します。
+        default() { return 10; },
+      },
+      min: {
+        type: Number,
+        default() { return 0; },
+      },
+      value: {
+        type: Number,
+        default() { return 4; },
+      },
+    },
+  };
+</script>
+```
+
+[↑ 目次に戻る](#table-of-contents)
+
+
+## `this`を`component`に割り当てる
+
+Vue.jsコンポーネントのコンテキスト内では、 `this`はコンポーネントインスタンスにバインドされています。
+したがって、別のコンテキストで参照する必要がある場合は、 `this` が`component`として使用できることを確認してください。
+
+言い換えれば: `const self = this;`のようなコーディングはもう **しないで** ください。 Vueコンポーネントの使用は安全です。
+
+### 理由
+
+* `this`を`component`という名前の変数に代入することにより、この変数が使用されているコンポーネントインスタンスにバインドされていることが開発者に伝わります。
+
+### 方法
+
+```html
+<script type="text/javascript">
+export default {
+  methods: {
+    hello() {
+      return 'hello';
+    },
+    printHello() {
+      console.log(this.hello());
+    },
+  },
+};
+</script>
+
+<!-- 非推奨 -->
+<script type="text/javascript">
+export default {
+  methods: {
+    hello() {
+      return 'hello';
+    },
+    printHello() {
+      const self = this; // 不要
+      console.log(self.hello());
+    },
+  },
+};
+</script>
+```
+
+[↑ 目次に戻る](#table-of-contents)
+
+
+## コンポーネント構成
+
+論理的に考えやすく、思考の流れに従いやすいようにしましょう. 方法を見てください。
+
+### 理由
+
+* コンポーネントを明確かつグループ化されたオブジェクトとすることで、コードを読みやすくし、開発者はコードの基準を簡単に持てるようになります。
+* 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);
+* Vue.jsの製作者Evan Youが推奨するように、テンプレートスクリプト形式の.vueファイル構成を使用しましょう。
+
+### 方法
+
+コンポーネンのト構成:
+
+```html
+<template lang="html">
+  <div class="Ranger__Wrapper">
+    <!-- ... -->
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    // このちいさな要素を忘れないでください
+    name: 'RangeSlider',
+    // 新しいコンポーネントを合成します
+    extends: {},
+    // コンポーネントのプロパティ/値
+    props: {
+      bar: {}, // アルファベット順
+      foo: {},
+      fooBar: {},
+    },
+    // 変数
+    data() {},
+    computed: {},
+    // 他のコンポーネントを使用
+    components: {},
+    // メソッド
+    watch: {},
+    methods: {},
+    // コンポーネントライフサイクルフック
+    beforeCreate() {},
+    mounted() {},
+};
+</script>
+
+<style scoped>
+  .Ranger__Wrapper { /* ... */ }
+</style>
+```
+
+[↑ 目次に戻る](#table-of-contents)
+
+## コンポーネントイベント名
+
+Vue.jsはすべてのVueハンドラ関数を提供し、式はViewModelに厳密にバインドされています。各コンポーネントのイベントは、開発中の問題を回避するような良い名前付けのスタイルを適用しましょう。 以下の **理由** を参照してください。
+
+### 理由
+
+* 開発者は好きなイベント名を自由に使うことができるため、混乱を招く可能性があります。
+* イベントに名前をつける自由は、 [DOMテンプレートの非互換性](https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats)につながる可能性があります。
+
+### 方法
+
+* イベント名前はケバブケースにするべきです。
+* あなたのコンポーネントで外部で関心を持つ独自のアクションのため、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`を避ける
+
+Vue.jsは、親コンテキストにアクセスできるネストされたコンポーネントをサポートしています。 あなたのVueコンポーネントの外部のコンテキストにアクセスすることは、 [モジュールベースの開発](#module-based-development)の[FIRST](https://addyosmani.com/first/)のルールに違反するため、 ** `this.$parent`の使用を避ける ** べきです。
+
+### 理由
+
+* vueコンポーネントは、他のコンポーネントと同様に、独立して動作する必要があります。 コンポーネントがその親にアクセスする必要がある場合、このルールは壊されます。
+* コンポーネントがその親にアクセスする必要がある場合、別のコンテキストで再利用することはできません。
+
+### 方法
+
+* 属性/プロパティを使用して、親から子コンポーネントに値を渡します。
+* 属性の式のコールバックを使用して、親コンポーネントで定義されたメソッドを子コンポーネントに渡します。
+* 子コンポーネントからイベントを発行し、それを親コンポーネントでキャッチします。
+
+[↑ 目次に戻る](#table-of-contents)
+
+## `this.$refs`は注意して使用する
+
+Vue.jsは`ref`属性を介して他のコンポーネントや、基本的なHTML要素のコンテキストにアクセスできるコンポーネントをサポートしています。この属性は`this.$refs`を介して、コンポーネントまたDOM要素のコンテキストにアクセス可能な方法を提供します。ほとんどの場合、 `this.$refs`を介して **他のコンポーネント** のコンテキストにアクセスする必要性は避けることができます。このため、間違ったコンポーネントAPIを避けるためにこれを使用するときは注意が必要です。
+
+### 理由
+
+* vueコンポーネントは、他のコンポーネントと同様に、**独立して動作する必要があります**。 コンポーネントが必要なすべてのアクセスをサポートしていない場合、それは悪い設計/実装です。
+* ほとんどのコンポーネントでは、プロパティとイベントで十分です。
+
+### 方法
+
+* 良いコンポーネントAPIを作りましょう。
+* 独創的なコンポーネントの目的に常に注意してください。
+* 特殊なコードを書かないでください。ジェネリックコンポーネント内に特殊なコードを記述する必要がある場合は、APIが十分に一般的でないか、他のケースを管理するために新しいコンポーネントが必要になるということです。
+* すべてのpropsをチェックして、欠けているものがあるかどうか確認します。 もしあれば、課題を作成するかあなたのコンポーネントを強化しましょう。
+* すべてのイベントをチェックしましょう。ほとんどのケースで、開発者は子-親のコミュニケーション（イベント）が必要であることを忘れてしまいます。 そのため、（propsを使用した）親-子のコミュニケーションだけを覚えているのです。
+* **Propsは下へ、eventsは上へ!** ゴールとして良いAPIと分離を要求された場合、コンポーネントをアップグレードしましょう。
+* propsやeventsが消耗し、コンポーネントでの`this.$refs`の利用が利にかなっているときは、それを使用するべきです。 (下の例を参照してください).
+* データバインディングやディレクティブで要素を操作できない場合、 (`jQuery`, `document.getElement*`, `document.queryElement`の代わりに) `this.$refs`を使用してDOM要素にアクセスすることは良い方法です。
+
+```html
+<!-- 良いです。refは必要ありません。 -->
+<range :max="max"
+  :min="min"
+  @current-value="currentValue"
+  :step="1"></range>
+```
+
+```html
+<!-- 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>
+
+<!-- モーダルコンポーネント -->
+<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
+<!-- 発行される可能性のあるものへのアクセスは避けましょう -->
+<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)
+
+
+## スタイルスコープとしてコンポーネント名を使用する
+
+Vue.jsのコンポーネント要素は、スタイルスコープのルートとして非常によく使用されるカスタム要素です。
+あるいは、コンポーネント名はCSSクラスネームスペースとして、使用できます。
+
+### 理由
+
+* コンポーネント要素のスタイルをスコープすると、コンポーネントの外にスタイルが漏れるのを防ぐため、予測可能性が向上します。
+
+* モジュールディレクトリに同じ名前を使用すると、Vue.jsコンポーネントとスタイルルートが同じところに属していることを開発者が理解しやすくなります。
+
+### 方法
+
+BEMとOOCSSに基づくネームスペースプレフィックスとしてコンポーネント名を使いましょう。 **そして** スタイルクラスで`scoped`属性を使いましょう。
+`scoped`を使用すると、`<style>`にあるすべてのクラスにシグネチャを追加するようVueコンパイラに指示します。このシグネチャは、コンポーネントを構成するすべてのタグにコンポーネントCSSを適用するようブラウザに（サポートしている場合）強制し、CSSのスタイリングが漏れないようにします。
+
+```html
+<style scoped>
+  /* 推奨 */
+  .MyExample { }
+  .MyExample li { }
+  .MyExample__item { }
+
+  /* 非推奨 */
+  .My-Example { } /* コンポーネント名またはモジュール名にスコープされておらず、BEM準拠でもありません */
+</style>
+```
+
+[↑ 目次に戻る](#table-of-contents)
+
+
+## コンポーネントAPIをドキュメント化する
+
+Vue.jsコンポーネントのインスタンスは、アプリケーション内のコンポーネント要素を使用して作成されます。インスタンスはそのカスタム属性によって構成されます。他の開発者がコンポーネントを使用するときのため、これらのカスタム属性（コンポーネントのAPI）を`README.md`ファイルに記述しましょう。
+
+### 理由
+
+* ドキュメンテーションは、開発者に、そのコードのすべてを伝えることなく、コンポーネントの概要を高レベルで表示します。これにより、コンポーネントのアクセスが容易になり、使いやすくなります。
+* コンポーネントのAPIは、それを構成するカスタム属性のセットです。したがって、これらは、コンポーネントを使用する（開発しない）開発者にとって特に重要です。
+* ドキュメンテーションはAPIを形式化し、コンポーネントのコードを変更するときに下位互換性を維持する機能を開発者に教えます。
+* `README.md`は最初に読み込まれるドキュメントのデファクトスタンダードファイル名です。 コードリポジトリホスティングサービス（Github、Bitbucket、Gitlabなど）は、ソースディレクトリを参照するときに、READMEファイルの内容を直接表示します。これは私たちのモジュールディレクトリにも当てはまります。
+
+### 方法
+
+コンポーネントのモジュールディレクトリに`README.md`ファイルを追加しましょう。
+
+```
+range-slider/
+├── range-slider.vue
+├── range-slider.less
+└── README.md
+```
+
+READMEファイルに、モジュールの機能と使用方法を記述しましょう。 vueコンポーネントの場合、APIとしてサポートされているカスタム属性を記述するのが最も役立ちます。
+
+
+# Range slider
+
+## 機能
+
+range sliderは、スライダーレールのハンドルを開始値と終了値の両方でドラッグして数値範囲を設定できます。
+
+このモジュールはクロスブラウザとタッチサポートのため、noUiSliderを使用します。
+
+## 使用方法
+
+`<range-slider>` 次のカスタムコンポーネント属性をサポートしています:
+
+| 属性 | 型 | 説明
+| --- | --- | ---
+| `min` | 数値 | レンジの始まりの数値 (下限)。
+| `max` | 数値 | レンジの終わりの数値 (上限).
+| `values` | 数値[] *任意* | 開始値と終了値を含む配列。  例. `values="[10, 20]"`. デフォルトは`[opts.min, opts.max]`.
+| `step` | 数値 *任意* | インクリメント/デクリメントの数値。デフォルトは1。
+| `on-slide` | 関数 *任意* | ユーザーが開始（`HANDLE == 0`）または終了（`HANDLE == 1`）ハンドルをドラッグしているときに、`(values, HANDLE)`で呼び出される関数。例. `on-slide={ updateInputs }` `component.updateInputs = (values, HANDLE) => { const value = values[HANDLE]; }`.
+| `on-end` | 関数 *任意* | ユーザーがハンドルのドラッグを停止したとき、`(values, HANDLE)`で呼び出される関数。
+
+スライダの外観をカスタマイズするには[noUiSliderドキュメントのStylingセクション](http://refreshless.com/nouislider/more/#section-styling)を参照してください。
+
+
+[↑ 目次に戻る](#table-of-contents)
+
+
+## コンポーネントデモの追加
+
+構成の異なるコンポーネントのデモを含むindex.htmlファイルを追加し、コンポーネントの使用方法を示しましょう。
+
+### 理由
+
+* コンポーネントのデモは、コンポーネントが単独で動作することを示します。
+* コンポーネントのデモは、ドキュメンテーションやコードを掘り起こす前に、開発者にプレビューを提供します。
+* デモでは、コンポーネントを使用できるすべての可能な構成とバリエーションを示すことができます。
+
+[↑ 目次に戻る](#table-of-contents)
+
+
+## コンポーネントファイルをLintする
+
+Lintersはコードの一貫性を高め、構文エラーの追跡に役立ちます。.vueファイルはプロジェクトに`eslint-plugin-html`を追加してlintすることができます。vue-cliを使用すれば、ESLintをデフォルトで有効にしてプロジェクトを開始できます。
+
+### 理由
+
+* コンポーネントファイルのLintは、すべての開発者が同じコードスタイルを使用するようにします。
+* コンポーネントファイルのLintは、遅くなる前に構文エラーの追跡をするのに役立ちます。
+
+### 方法
+
+lintersがあなたの`*.vue`ファイルからスクリプトを抽出するためには, [スクリプトを<script>コンポーネントの中に置き](#use-script-inside-component)、 [コンポーネントの記述をシンプルに保つ](#keep-component-expressions-simple)ようにしてください (lintersはそれらを理解できないので)。 グローバル変数`vue`とコンポーネントの`props`を許可するようにリンターを設定します。
+
+#### ESLint
+
+[ESLint](http://eslint.org/)には、コンポーネントファイルからスクリプトを抽出するための追加の[ESLint HTML plugin](https://github.com/BenoitZugmeyer/eslint-plugin-html#eslint-plugin-html)が必要です。
+
+ESLintを`.eslintrc`ファイルに設定します。(IDEもそれを解釈することができます):
+```json
+{
+  "extends": "eslint:recommended",
+  "plugins": ["html"],
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "opts": true,
+    "vue": true
+  }
+}
+```
+
+ESLint実行
+```bash
+eslint src/**/*.vue
+```
+
+#### JSHint
+
+[JSHint](http://jshint.com/)は (`--extra-ext`を使用して)HTMLをパースでき、(`--extract=auto`を使用して)スクリプトを抽出できます。
+
+JSHintを`.jshintrc`ファイルに設定します。 (IDEもそれを解釈することができます):
+```json
+{
+  "browser": true,
+  "predef": ["opts", "vue"]
+}
+```
+
+JSHint実行
+```bash
+jshint --config modules/.jshintrc --extra-ext=html --extract=auto modules/
+```
+注意: JSHintは`vue`を拡張子として受け入れず, htmlだけを受け入れます。
+
+[↑ 目次に戻る](#table-of-contents)
+
+
+## 必要に応じてコンポーネントを作成する
+
+### 理由
+
+Vue.jsはコンポーネントフレームワークに基づいています。コンポーネントの作成タイミングを知らないと、次のような問題が発生する可能性があります。
+
+* コンポーネントが大きすぎる場合は、おそらく（再）使用し、維持することは困難です。
+* コンポーネントが小さすぎると、プロジェクトが浸水し、コンポーネント間の通信が困難になります。
+
+### 方法
+
+* あなたのプロジェクトのニーズに合わせてコンポーネントを構築することを常に忘れないでください。しかし、それらのコンポーネントが取り出せると考えるようにしてください。ライブラリのようにプロジェクトから取り出せれば、より堅牢で一貫性のあるものになります。
+* 既存のコンポーネントや安定したコンポーネントにコミュニケーション（propsやevents）を組み込むことができるため、できるだけ早くコンポーネントを構築する方が良いでしょう。
+
+### ルール
+
+* まず、できるだけ早くモーダル、ポップオーバー、ツールバー、メニュー、ヘッダーなどの明白なコンポーネントを作成してみてください。あなたの現在のページ、または全体的に、あなたが後で必要となることをあなたが知っているコンポーネントを。
+* 第２に、新しい開発ごとに、ページ全体またはその一部分について、急いで開発する前に考えてみてください。その一部がコンポーネントであることが分かっている場合は、作成してください。
+* 最後に、もし確信がなければ、コンポーネントを作らないでください！"後で役立つかもしれない"コンポーネントであなたのプロジェクトを汚染するのを避けましょう。それらは空っぽで、永遠にそこにあるだけかもしれません。プロジェクトの残りの部分との互換性の複雑さを避けるために、その状態になっていたことに気づいたらすぐにそれを分解するよう注意してください。
+
+[↑ 目次に戻る](#table-of-contents)
+
+---
+
+## 貢献するには
+
+フォークしてプルリクエストを送るか、[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)
+
+### Why?
+
+Inform other developers your project is following the Vue.js Style Guide. And let them know where they can find this guide.
+
+### How?
+
+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.
+ -->
+
+
+## 翻訳者
+
+* [ブラジルポルトガル語](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 eb4f81be0b8d14bbc7127d75b3a75d446263405c Mon Sep 17 00:00:00 2001
From: pablohpsilva <pablohpsilva@gmail.com>
Date: Sat, 3 Jun 2017 09:31:08 -0300
Subject: [PATCH 24/56] considerations made by @etiennellipse

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

diff --git a/README.md b/README.md
index a049e62..94e291c 100644
--- a/README.md
+++ b/README.md
@@ -227,11 +227,13 @@ Harnessing your component props ensures your component will always function (def
 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 `const self = this;` anymore. You're safe using Vue components.
+In other words: Do **NOT** code things like `var self = this;` anymore if you're using **ES6**. You're safe using Vue components.
 
 ### Why?
 
-* By assigning `this` to a variable named `component` the variable tells developers it's bound to the component instance wherever it's used.
+* 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.
 
 ### How?
 

From 9098de6129907094bbe5df3e81cbd91c14e67726 Mon Sep 17 00:00:00 2001
From: pablohpsilva <pablohpsilva@gmail.com>
Date: Sat, 3 Jun 2017 09:39:47 -0300
Subject: [PATCH 25/56] adding Japanese translationgit status! :D

---
 README-CN.md    | 1 +
 README-JP.md    | 1 +
 README-KR.md    | 1 +
 README-PTBR.md  | 1 +
 README-RU.md    | 1 +
 README.md       | 1 +
 docs/index.html | 1 +
 7 files changed, 7 insertions(+)

diff --git a/README-CN.md b/README-CN.md
index 52b5746..1e36851 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -9,6 +9,7 @@
 ### 其它语言
 * [英文](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)
 * [韩语](https://pablohpsilva.github.io/vuejs-component-style-guide/#/korean)
 * [俄语](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian)
 
diff --git a/README-JP.md b/README-JP.md
index 87f6acf..2b395ba 100644
--- a/README-JP.md
+++ b/README-JP.md
@@ -5,6 +5,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/#/chinese)
 * [韓国語](https://pablohpsilva.github.io/vuejs-component-style-guide/#/korean)
diff --git a/README-KR.md b/README-KR.md
index b6e3d8a..32574fa 100644
--- a/README-KR.md
+++ b/README-KR.md
@@ -7,6 +7,7 @@
 ### 번역
 * [브라질 포르투갈어](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/#/)
 * [러시아어](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian)
 
diff --git a/README-PTBR.md b/README-PTBR.md
index 7160f48..90f38fb 100644
--- a/README-PTBR.md
+++ b/README-PTBR.md
@@ -8,6 +8,7 @@
 * [Chinês](https://pablohpsilva.github.io/vuejs-component-style-guide/#/chinese)
 * [Coreano](https://pablohpsilva.github.io/vuejs-component-style-guide/#/korean)
 * [Inglês](https://pablohpsilva.github.io/vuejs-component-style-guide/#/)
+* [Japonês](https://pablohpsilva.github.io/vuejs-component-style-guide/#/japanese)
 * [Russo](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian)
 
 ## Propósito
diff --git a/README-RU.md b/README-RU.md
index a206b4d..d1d92eb 100644
--- a/README-RU.md
+++ b/README-RU.md
@@ -5,6 +5,7 @@
 ### Переводы
  * [бразильский португальский](https://pablohpsilva.github.io/vuejs-component-style-guide/#/portuguese)
  * [английский](https://pablohpsilva.github.io/vuejs-component-style-guide/#)
+ * [Японский](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/#/chinese)
 
diff --git a/README.md b/README.md
index 94e291c..4ac9a95 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@
 ### Translations
 * [Brazilian Portuguese](https://pablohpsilva.github.io/vuejs-component-style-guide/#/portuguese)
 * [Chinese](https://pablohpsilva.github.io/vuejs-component-style-guide/#/chinese)
+* [Japanese](https://pablohpsilva.github.io/vuejs-component-style-guide/#/japanese)
 * [Korean](https://pablohpsilva.github.io/vuejs-component-style-guide/#/korean)
 * [Russian](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian)
 
diff --git a/docs/index.html b/docs/index.html
index a372db1..be0b2d3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -26,6 +26,7 @@
           {title: 'English', path: '/'},
           {title: 'Português do Brasil', path: '/portuguese', source: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README-PTBR.md'},
           {title: '中文', path: '/chinese', source: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README-CN.md'},
+          {title: '日本語', path: '/japanese', source: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README-JP.md'},
           {title: '한국어', path: '/korean', source: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README-KR.md'},
           {title: 'русский язык', path: '/russian', source: 'https://raw.githubusercontent.com/pablohpsilva/vuejs-component-style-guide/master/README-RU.md'}
         ]}

From aa1fb186bc68c1bd4a56ef628bdf64478790b95f Mon Sep 17 00:00:00 2001
From: pablohpsilva <pablohpsilva@gmail.com>
Date: Sat, 3 Jun 2017 09:43:39 -0300
Subject: [PATCH 26/56] fixing head

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

diff --git a/README.md b/README.md
index 4ac9a95..494cc98 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,6 @@ This guide is inspired by the [RiotJS Style Guide](https://github.com/voorhoede/
 
 * [Module based development](#module-based-development)
 * [vue component names](#vue-component-names)
-<!-- * [Use `*.vue` extension](#use-vue-extension) -->
 * [Keep component expressions simple](#keep-component-expressions-simple)
 * [Keep component props primitive](#keep-component-props-primitive)
 * [Harness your component props](#harness-your-component-props)
@@ -40,6 +39,7 @@ This guide is inspired by the [RiotJS Style Guide](https://github.com/voorhoede/
 * [Add a component demo](#add-a-component-demo)
 * [Lint your component files](#lint-your-component-files)
 * [Create components when needed](#create-components-when-needed)
+<!-- * [Use `*.vue` extension](#use-vue-extension) -->
 <!-- * [Add badge to your project](#add-badge-to-your-project) -->
 
 

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 27/56] :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 28/56] 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 29/56] 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 30/56] 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 31/56] 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 32/56] 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 33/56] 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 34/56] 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 35/56] 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 36/56] 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 37/56] 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 38/56] 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 39/56] 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 40/56] 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 41/56] =?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 42/56] 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 43/56] 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 44/56] 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 45/56] 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 46/56] 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 47/56] 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 48/56] :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 49/56] 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 50/56] 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 51/56] 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 52/56] 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 53/56] 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 54/56] 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 55/56] 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 56/56] 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.