Merge branch 'examples/basic' of https://github.com/alirezahamid/docs-fa

 into alirezahamid-examples/basic

src/examples/src/attribute-bindings/App/composition.js

@@ -2,7 +2,7 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-    const message = ref('Hello World!')
+    const message = ref('سلام دنیا!')
     const isRed = ref(true)
     const color = ref('green')
 

src/examples/src/attribute-bindings/App/options.js

@@ -1,7 +1,7 @@
 export default {
   data() {
     return {
-      message: 'Hello World!',
+      message: 'سلام دنیا!',
       isRed: true,
       color: 'green'
     }
@@ -14,4 +14,4 @@ export default {
       this.color = this.color === 'green' ? 'blue' : 'green'
     }
   }
-}
+}

src/examples/src/attribute-bindings/App/template.html

@@ -1,18 +1,19 @@
 <p>
   <span :title="message">
-    Hover your mouse over me for a few seconds to see my dynamically bound title!
+    برای چند ثانیه ماوس خود را روی من نگه دارید تا عنوان پیوندی دینامیک من
+    را ببینید!
   </span>
 </p>
 
 <!--
-class bindings have special support for objects and arrays
-in addition to plain strings
--->
+  کلاس پشتیبانی ویژه‌ای برای اشیاء و آرایه‌ها
+  علاوه بر رشته‌های ساده دارد
+  -->
 <p :class="{ red: isRed }" @click="toggleRed">
-  This should be red... but click me to toggle it.
+  این باید قرمز باشد... اما روی من کلیک کنید تا تغییر کند.
 </p>
 
-<!-- style bindings also support object and arrays -->
+<!--  استایل نیز از اشیاء و آرایه‌ها پشتیبانی می‌کنند -->
 <p :style="{ color }" @click="toggleColor">
-  This should be green, and should toggle between green and blue on click.
+  این باید سبز باشد و باید با هر کلیک بین سبز و آبی تغییر کند.
 </p>

src/examples/src/attribute-bindings/description.txt

@@ -1,2 +1,2 @@
-Here we are reactively binding element attributes / properties to the state.
-The :title syntax is short for v-bind:title.
+در اینجا ما به طور واکنش‌گرا، شاخصه‌ها / ویژگی‌های المان را به state متصل می‌کنیم.
+نحو :title کوتاه شده‌ی v-bind:title است.

src/examples/src/conditionals-and-loops/App/template.html

@@ -6,5 +6,5 @@
 <ul v-if="show && list.length">
   <li v-for="item of list">{{ item }}</li>
 </ul>
-<p v-else-if="list.length">List is not empty, but hidden.</p>
-<p v-else>List is empty.</p>
+<p v-else-if="list.length">لیست خالی نیست، اما پنهان است.</p>
+<p v-else>لیست خالی است.</p>

src/examples/src/conditionals-and-loops/description.txt

@@ -1 +1 @@
-We can render content conditionally or in a loop with the v-if and v-for directives.
+می‌توانیم محتوا را به طور شرطی یا در یک حلقه با استفاده از دایرکتیو‌های v-if و v-for نمایش دهیم.

src/examples/src/form-bindings/App/template.html

@@ -6,8 +6,8 @@ <h2>Checkbox</h2>
 <label for="checkbox">Checked: {{ checked }}</label>
 
 <!--
-  multiple checkboxes can bind to the same
-  array v-model value
+  چندین جعبه انتخاب می‌توانند به همان
+  مقدار v-model آرایه متصل شوند
 -->
 <h2>Multi Checkbox</h2>
 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

src/examples/src/form-bindings/description.txt

@@ -1 +1 @@
-We can create two-way bindings between state and form inputs using the v-model directive.
+می‌توانیم اتصالات دو طرفه بین state و ورودی‌های فرم را با استفاده از دایرکتیو v-model ایجاد کنیم.

src/examples/src/handling-input/App/composition.js

@@ -2,16 +2,15 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-    const message = ref('Hello World!')
+    const message = ref('سلام دنیا!')
 
     function reverseMessage() {
-      // Access/mutate the value of a ref via
-      // its .value property.
+      // مقدار ref رااز طریق .value به آن دسترسی پیدا کنید یا تغییر دهید.
       message.value = message.value.split('').reverse().join('')
     }
 
     function notify() {
-      alert('navigation was prevented.')
+      alert('جلوگیری از ناوبری صورت گرفت.')
     }
 
     return {

src/examples/src/handling-input/App/options.js

@@ -1,7 +1,7 @@
 export default {
   data() {
     return {
-      message: 'Hello World!'
+      message: 'سلام دنیا!'
     }
   },
   methods: {

src/examples/src/handling-input/App/template.html

@@ -1,22 +1,22 @@
 <!--
-  Note we don't need .value inside templates because
-  refs are automatically "unwrapped" in templates.
+توجه داشته باشید که ما به .value درون قالب ها نیاز نداریم زیرا
+ref ها به طور خودکار در قالب ها "باز" می شوند.
 -->
 <h1>{{ message }}</h1>
 
 <!--
-  Bind to a method/function.
-  The @click syntax is short for v-on:click.
+اتصال به یک روش/عملکرد.
+سینتکس @click مخفف v-on:click است.
 -->
 <button @click="reverseMessage">Reverse Message</button>
 
-<!-- Can also be an inline expression statement -->
+<!-- همچنین می تواند یک عبارت عبارت درونی باشد -->
 <button @click="message += '!'">Append "!"</button>
 
 <!--
-  Vue also provides modifiers for common tasks
-  such as e.preventDefault() and e.stopPropagation()
+Vue همچنین اصلاح کننده هایی را برای کارهای رایج ارائه می دهد
+مانند e.preventDefault() و e.stopPropagation()
 -->
 <a href="https://vuejs.org" @click.prevent="notify">
-  A link with e.preventDefault()
+  پیوندی با e.preventDefault()
 </a>

src/examples/src/handling-input/description.txt

@@ -1 +1 @@
-This example demonstrates handling user input with the v-on directive.
+این مثال نحوه برخورد با ورودی کاربر با استفاده از دایرکتیو v-on را نشان می‌دهد.

src/examples/src/hello-world/App/composition.js

@@ -2,12 +2,11 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-    // A "ref" is a reactive data source that stores a value.
-    // Technically, we don't need to wrap the string with ref()
-    // in order to display it, but we will see in the next
-    // example why it is needed if we ever intend to change
-    // the value.
-    const message = ref('Hello World!')
+    // "ref" یک منبع داده واکنش‌گرا است که یک مقدار را ذخیره می‌کند.
+    // از نظر فنی، نیازی نیست که رشته را با استفاده از ref() بپیچیم
+    // برای نمایش آن، اما در مثال بعدی خواهیم دید که چرا این کار لازم است اگر قصد داریم
+    // مقدار را تغییر دهیم.
+    const message = ref('سلام دنیا!')
 
     return {
       message

src/examples/src/hello-world/App/options.js

@@ -1,7 +1,7 @@
 export default {
   data() {
     return {
-      message: 'Hello World!'
+      message: 'سلام دنیا!'
     }
   }
-}
+}

src/examples/src/hello-world/description.txt

@@ -1 +1 @@
-Say Hello World with Vue!
+با استفاده از Vue به جهان سلام کنید!

src/examples/src/simple-component/App/template.html

@@ -1,9 +1,9 @@
 <ol>
   <!--
-    We are providing each todo-item with the todo object
-    it's representing, so that its content can be dynamic.
-    We also need to provide each component with a "key",
-    which is explained in the guide section on v-for.
+    ما در حال ارائه هر مورد todo با شی todo هستیم
+    آن را نشان می دهد، به طوری که محتوای آن می تواند پویا باشد.
+    ما همچنین باید برای هر جزء یک "کلید" ارائه دهیم،
+    که در قسمت راهنمای v-for توضیح داده شده است.
   -->
   <TodoItem
     v-for="item in groceryList"

src/examples/src/simple-component/description.txt

@@ -1,2 +1,2 @@
-Here we show the simplest possible component which accepts a prop and renders it.
-Learn more about components in the guide!
+در اینجا ما ساده ترین مؤلفه ممکن را نشان می دهیم که یک prop را می پذیرد و آن را رندر می کند.
+اطلاعات بیشتر در مورد اجزاء در راهنما!