+
+### ترجمه ها
+
+- [پرتغالی برزیلی](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)
+
+## هدف
+
+این راهنما یک راه یکسان برای ساختار دادن به کد [ویو جی اس](http://vuejs.org/) شما است و موارد زیر را ممکن می سازد:
+
+- برای توسعه دهندگان و اعضای تیم درک کردن و متوجه شدن موضوعات آسان تر می شود.
+- برای محیط های یکپارچه توسعه، تفسیر کد و فراهم کردن پشتیبانی آسان تر می شود.
+- استفاده از ابزار های بیلد آسان تر می شود.
+- نهان سازی و ارائه بسته های کد به طور جداگانه آسان تر می شود.
+
+این راهنما از مخزن [RiotJS Style Guide](https://github.com/voorhoede/riotjs-style-guide) که توسط [De Voorhoede](https://github.com/voorhoede) نوشته شده است الهام گرفته شده است.
+
+## فهرست مطالب
+
+- [توسعه مبتنی بر ماژول](#توسعه-مبتنی-بر-ماژول)
+- [نام های کامپوننت ویو](#نام-های-کامپوننت-ویو)
+- [کد های کامپوننت را ساده نگه دارید](#کد-های-کامپوننت-را-ساده-نگه-دارید)
+- [پراپ های کامپوننت را ساده نگه دارید](#پراپ-های-کامپوننت-را-ساده-نگه-دارید)
+- [از پراپ های کامپوننت استفاده بهینه کنید](#از-پراپ-های-کامپوننت-استفاده-بهینه-کنید)
+- [`this` را به `کامپوننت` نسبت دهید](#this-را-به-کامپوننت-نسبت-دهید)
+- [ساختار کامپوننت](#ساختار-کامپوننت)
+- [نام های ایونت کامپوننت](#نام-های-ایونت-کامپوننت)
+- [از استفاده کردن از `this.$parent` پرهیز کنید](#avoid-thisparent)
+- [از `this.$refs` با احتیاط استفاده کنید](#use-thisrefs-with-caution)
+- [از نام کامپوننت به عنوان محدوده style استفاده کنید](#از-نام-کامپوننت-به-عنوان-محدوده-style-استفاده-کنید)
+- [برای ای پی آی کامپوننت خود مستند بنویسید](#برای-ای-پی-آی-کامپوننت-خود-مستند-بنویسید)
+- [دمو کامپوننت را اضافه کنید](#دمو-کامپوننت-را-اضافه-کنید)
+- [فایل های کامپوننت خود را لینت کنید](#فایل-های-کامپوننت-خود-را-لینت-کنید)
+- [کامپوننت ها را زمانی بسازید که به آن ها نیاز دارید](#کامپوننت-ها-را-زمانی-بسازید-که-به-آن-ها-نیاز-دارید)
+
+
+
+## توسعه مبتنی بر ماژول
+
+همیشه برنامه خود را با استفاده از ماژول های کوچکی که فقط یک کار و آن کار را هم درست انجام می دهند، بسازید.
+
+ماژول یک بخش کوچک و مستقل از یک برنامه است. کتابخانه ویو جی اس به طور مشخص برای کمک کردن برای ساخت _ماژول های view-logic_ طراحی شده است .
+
+### چرا؟
+
+یادگیری، درک کردن، نگهداری، استفاده مجدد و رفع مشکلات ماژول های کوچک، چه برای خود شما و چه برای توسعه دهندگان دیگر راحت تر می شود.
+
+###
+
+هر کامپوننت ویو (مثل یک ماژول) باید [در ابتدا](https://addyosmani.com/first/): _دارای یک هدف مشخص_ ([تک وظیفه‌ای](http://en.wikipedia.org/wiki/Single_responsibility_principle))، _مستقل_، _قابل استفاده مجدد_، _کوچک_ و _با قابلیت تست_ باشد.
+
+اگر کامپوننت شما کار های زیادی انجام می دهد و یا خیلی بزرگ شده است آن را به کامپوننت های کوچکتر تقسیم کنید به طوری که هر کدام فقط یه کار را انجام دهند و بر حسب تجربه، تلاش کنید که فایل هر کامپوننت کمتر از 100 خط کد باشد.
+همچنین مطمئن شوید کامپوننت های شما به صورت مستقل از هم کار می کنند، برای مثال یک دمو مستقل برای آن قرار دهید.
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## نام های کامپوننت ویو
+
+نام هر کامپوننت باید موارد زیر را شامل شود:
+
+- **پر معنا**: نه بیش از حد دقیق و نه بیش از حد خلاصه شده و انتزاعی باشد.
+- **کوتاه**: 2 یا 3 کلمه.
+- **قابل تلفظ**: زیرا ما می خواهیم درباره آن حرف بزنیم و اسم آن را به زبان بیاوریم.
+
+همچنین نام هر کامپوننت ویو باید مطابق موارد زیر باشد:
+
+- **مطابق با تعریف عنصر سفارشی**: [شامل خط فاصله باشد](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), و از نام های رزرو شده استفاده نشده باشد.
+- **`app-` namespaced**: نام باید عمومی و از طرف دیگر شامل یک کلمه باشد که بتوان به راحتی از آن در پروژه های دیگر استفاده مجدد کرد.
+
+### چرا؟
+
+- از نام برای ارتباط برقرار کردن با کامپوننت استفاده می شود. پس باید کوتاه، پر معنا و قابل تلفظ باشد.
+
+### با چه روشی؟
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## کد های کامپوننت را ساده نگه دارید
+
+کد های خطی ویو جی اس کلا جاوا اسکریپت هستند. و این قضیه آن ها را به شدت قدرتمند می سازد، اما ذاتا پیچیده هستند. بنابرین شما باید **کد های خطی را ساده نگه دارید**.
+
+### چرا؟
+
+- خواندن کد های خطی پیچیده، سخت است.
+- کد های خطی پیچیده نمی توانند در جای دیگر مورد استفاده مجدد قرار بگیرند که این می تواند منجر به تکرار و پوسیدگی کدها شود.
+- محیط های یکپارچه توسعه، معمولا پشتیبانی برای سینتکس های کد های خطی ندارد، بنابراین نمی توانند به طور خودکار تکمیل یا اعتبار سنجی شوند.
+
+### با چه روشی؟
+
+اگر کد خیلی پیچیده شد و یا خواندن آن سخت شد، **شما می بایست کد را به methods یا computed انتقال دهید**!
+
+```html
+
+
+
+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## پراپ های کامپوننت را ساده نگه دارید
+
+در حالی که ویو جی اس به خاطر ویژگی هایش از ارسال آبجکت های پیچیده جاوا اسکریپتی پشتیبانی می کند شما باید تلاش کنید تا **پراپ های کامپوننت را تا جای ممکن ساده نگه دارید**. تلاش کنید تا فقط از [داده های اولیه جاوا اسکریپت](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) که شامل (رشته ها، اعداد، بولین) و توابع می شوند، استفاده کنید. و از آبجکت های پیچیده پرهیز کنید.
+
+### چرا؟
+
+- زمانی از یک اتریبیوت به طور جداگانه برای هر پراپ استفاده می کنیم، کامپوننت ای پی آی واضح و صریحی دارد;
+- با استفاده کردن از داده های اولیه و توابع به عنوان مقادیر پراپ ها، ای پی آی های کامپوننت ما شبیه به ای پی آی های عنصر های بومی اچ تی ام ال 5 می شود;
+- با استفاده کردن از اتریبیوت ها به ازای هر پراپ، بقیه توسعه دهندگان به راحتی می توانند بفهمند که چه چیز هایی به نمونه کامپوننت ارسال شده است.
+- زمانی که آبجکت های پیچیده را ارسال می کنید، واضح نیست که چه ویژگی ها و متود هایی از آبجکت واقعا مورد استفاده کامپوننت های سفارشی قرار گرفته است. این باعث می شود ریفکتور کردن کد سخت شود و کد ها به سمت پوسیده شدن بروند.
+
+### با چه روشی؟
+
+به ازای هر اتریبیوت برای کامپوننت، از یک پراپ استفاده کنید، که مقدارشان داده اولیه یا تابع باشد:
+
+```html
+
+
+
+
+
+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## از پراپ های کامپوننت استفاده بهینه کنید
+
+در ویو جی اس پراپ های کامپوننت، ای پی آی شما هستند. یک ای پی آی منسجم و قابل پیش بینی، استفاده از کامپوننت شما را برای بقیه توسعه دهندگان راحت می کند.
+
+پراپ های کامپوننت از طریق اتریبیوت های اچ تی ام ال ارسال می شوند. مقادیر این اتریبیوت ها می تواند رشته های ساده ویو جی اس (`:attr="value"` یا `v-bind:attr="value"`) باشد یا به طور کامل صرف نظر شود. شما باید **پراپ های کامپوننت کنترل کنید** تا بتوانید سناریو های مختلف را امکان پذیر کنید.
+
+### چرا؟
+
+کنترل کردن پراپ های کامپوننت به شما اطمینان می دهند کامپوننت شما همیشه به درستی کار کند (برنامه نویسی تدافعی). حتی اگر بقیه توسعه دهندگان، در زمانی دیگر از کامپوننت های شما به شیوه دیگری استفاده کنند که شما فکرش را از قبل نکرده بودید.
+
+### با چه روشی؟
+
+- از پیش فرض ها برای مقادیر پراپ ها استفاده کنید
+- از گزینه `type` برای [اعتبارسنجی](http://vuejs.org/v2/guide/components.html#Prop-Validation) مقادیر به منظور دریافت نوع مورد انتظار استفاده کنید.**[1\*]**
+- قبل از استفاده کردن از پراپ ها، بررسی کنید تا ببینید پراپ ها وجود داشته باشند.
+
+```html
+
+
+
+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## `this` را به `کامپوننت` نسبت دهید
+
+در داخل فضای عنصر کامپوننت ویو جی اس، `this` به نمونه کامپوننت اشاره می کند.
+بنابراین زمانی که شما نیاز دارید در فضای دیگری ارجاع دهید، اطمینان پیدا کنید که `this` به عنوان `کامپوننت` در دسترس باشد.
+
+به عبارت دیگر: اگر میخواهید از استاندارد **ES6** استفاده کنید، چیز هایی شبیه `var self = this;` را دیگر **ننویسید**. شما با این کار، از کامپوننت های ویو به صورت ایمن استفاده می کنید.
+
+### چرا؟
+
+- با استفاده از در استاندارد ES6، نیازی نیست `this` را در یک متغیر ذخیره کنیدک
+ -در کل، زمانی که از توابع Arrow استفاده می کنیم اسکوپ لکسیکال حفظ می شود.
+- اگر شما از استاندارد ES6 استفاده **نمی کنید**، بنابراین از توابع Arrow هم استفاده نمی کنید پس شما می بایست `this` را به یک متغیر نسبت دهید. این تنها حالت استثنا می باشد.
+
+### با چه روشی؟
+
+```html
+
+
+
+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## ساختار کامپوننت
+
+این دستورالعمل ها را دنبال کنید تا چگونگی آن را دریابید.
+
+### چرا؟
+
+- داشتن خروجی کامپوننت منجر به یک آبجکت گروه بندی شده و تمیز می شود، که باعث می شود خواندن کد آسان شود و توسعه دهندگان کد استانداردی را داشته باشند.
+- چینش 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;
+- از متودولوژی های نامگذاری سی اس اس استفاده کنید ، مانند [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 خالق ویو پیشنهاد شده است.
+
+### با چه روشی؟
+
+ساختار کامپوننت:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## 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;
+- آزادی برای نام گذاری ایونت ها میتواند به مورد رو به رو منجر شود [DOM ناسازگاری الگو های](https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats);
+
+### با چه روشی؟
+
+- نام ایونت ها باید 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));
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## 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.
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## 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
+
+
+```
+
+```html
+
+
+
Basic Modal
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```html
+
+
+
+
+
+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## از نام کامپوننت به عنوان محدوده 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.
+
+### چرا؟
+
+- 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 `
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## برای ای پی آی کامپوننت خود مستند بنویسید
+
+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
+
+## قابلیت
+
+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.
+
+## نحوه استفاده
+
+`` 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[] _اختیاری_ | 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).
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## دمو کامپوننت را اضافه کنید
+
+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.
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## فایل های کامپوننت خود را لینت کنید
+
+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`;
+
+### چرا؟
+
+- لینت کردن فایل های کامپوننت این اطمینان را می دهد همه توسعه دهندگان از یک استایل کدی مشابه استفاده کنند
+- لینت کردن فایل ها کمک می کند که ارور های سینتکسی را قبل از اینکه به مشکل بخورید پیدا کنید
+
+### با چه روشی؟
+
+To allow linters to extract the scripts from your `*.vue` files, put script inside a `
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+---
+
+## می خواهید کمک کنید?
+
+فورک کنید و برای چیزی که فکر می کنید بهتر است بیان شود پول ریکوئست دهید یا یک [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/new) بسازید.
+
+
+
+## مترجم ها
+
+- [پرتغالی برزیلی](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)
diff --git a/README-JP.md b/README-JP.md
index 2b395ba..49e1972 100644
--- a/README-JP.md
+++ b/README-JP.md
@@ -24,22 +24,22 @@
## 目次
-* [モジュールベースの開発](#module-based-development)
-* [Vueコンポーネントの名前](#vue-component-names)
+* [モジュールベースの開発](#モジュールベースの開発)
+* [Vueコンポーネントの名前](#vueコンポーネントの名前)
-* [コンポーネントの記述をシンプルに保つ](#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する)
+* [必要に応じてコンポーネントを作成する](#必要に応じてコンポーネントを作成する)
@@ -62,7 +62,7 @@
経験則から言うと、各コンポーネントは１００行以下のコードになるようにするのがいいでしょう。また、例えばスタンドアローンのデモを追加することによって、
Vueコンポーネントが独立して動作することを確認しましょう。
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
## Vueコンポーネントの名前
@@ -100,7 +100,7 @@ Vueコンポーネントが独立して動作することを確認しましょ
```
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
## コンポーネントの記述をシンプルに保つ
@@ -151,7 +151,7 @@ Vue.jsのインラインの記述は100％JavaScriptです。これは非常に
```
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
## コンポーネントのpropsをプリミティブに保つ
@@ -162,7 +162,7 @@ Vue.jsは複雑なJavaScriptオブジェクトを渡せるようになってい
* 各propの属性を別々に使用することにより、コンポーネントは明確で表現力豊かなAPIを持つことになります。
* propsの値としてプリミティブとファンクションのみを使用することで、コンポーネントのAPIをネイティブHTML（5）のAPIに似たものにできます。
-* 各propの属性を使用することで、他の開発者がコンポネーントインスタンスに何が渡されるかを理解しやすくなります。
+* 各propの属性を使用することで、他の開発者がコンポーネントインスタンスに何が渡されるかを理解しやすくなります。
* 複雑なオブジェクトが渡されると、そのオブジェクトのどのプロパティとメソッドが実際にカスタムコンポーネントで使われるかがわかりにくくなります。これによりコードのリファクタリングが難しくなり、腐敗を招くことになります。
### 方法
@@ -184,7 +184,7 @@ Vue.jsは複雑なJavaScriptオブジェクトを渡せるようになってい
```
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
## コンポーネントのpropsの利用
@@ -227,7 +227,7 @@ Vue.jsでは、あなたのコンポーネントのpropsはあなたのAPIです
```
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
## `this`を`component`に割り当てる
@@ -239,7 +239,9 @@ Vue.jsコンポーネントのコンテキスト内では、 `this`はコンポ
### 理由
-* `this`を`component`という名前の変数に代入することにより、この変数が使用されているコンポーネントインスタンスにバインドされていることが開発者に伝わります。
+* ES6を使っている場合、`this`を変数に保存しておく必要はありません。
+* 通常、アロー関数を使用すれば静的スコープは保持されます。
+* ES6を使用して**いない**ために、`アロー関数`を使用できない場合は、`this`を変数に格納する必要があります。それが唯一の例外です。
### 方法
@@ -273,7 +275,7 @@ export default {
```
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
## コンポーネント構成
@@ -286,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ファイル構成を使用しましょう。
### 方法
@@ -331,7 +333,7 @@ export default {
```
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
## コンポーネントイベント名
@@ -348,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`を避ける
@@ -365,7 +367,7 @@ Vue.jsは、親コンテキストにアクセスできるネストされたコ
* 属性の式のコールバックを使用して、親コンポーネントで定義されたメソッドを子コンポーネントに渡します。
* 子コンポーネントからイベントを発行し、それを親コンポーネントでキャッチします。
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
## `this.$refs`は注意して使用する
@@ -454,7 +456,7 @@ Vue.jsは`ref`属性を介して他のコンポーネントや、基本的なHTM
```
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
## スタイルスコープとしてコンポーネント名を使用する
@@ -485,7 +487,7 @@ BEMとOOCSSに基づくネームスペースプレフィックスとしてコン
```
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
## コンポーネントAPIをドキュメント化する
@@ -537,7 +539,7 @@ range sliderは、スライダーレールのハンドルを開始値と終了
スライダの外観をカスタマイズするには[noUiSliderドキュメントのStylingセクション](http://refreshless.com/nouislider/more/#section-styling)を参照してください。
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
## コンポーネントデモの追加
@@ -550,7 +552,7 @@ range sliderは、スライダーレールのハンドルを開始値と終了
* コンポーネントのデモは、ドキュメンテーションやコードを掘り起こす前に、開発者にプレビューを提供します。
* デモでは、コンポーネントを使用できるすべての可能な構成とバリエーションを示すことができます。
-[↑ 目次に戻る](#table-of-contents)
+[↑ 目次に戻る](#目次)
## コンポーネントファイルをLintする
@@ -564,7 +566,7 @@ Lintersはコードの一貫性を高め、構文エラーの追跡に役立ち
### 方法
-lintersがあなたの`*.vue`ファイルからスクリプトを抽出するためには, [スクリプトを
```
@@ -559,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 `
+```
+
+[↑ back to Table of Contents](#table-of-contents)
+
---
## Wanna help?
