جلسه بیست و دوم آموزش فریم ورک vue.js : آموزش فرم ها در vue.js

آموزش فرم ها در vue.js

در جلسه قبلی از آموزش vue.js، به مبحث کامپوننت های پویا پرداختیم، حال در این جلسه به آموزش فرم ها در vue.js می پردازیم.

کار را با مثال شروع میکنیم:

بررسی فرم ها در vue.js

1- یک فرم sample شامل چند text-box و radio و dropdown و چک باکس ایجاد میکنیم:
2- مقادیر اولیه اجزای فرممون مثل email وage و…. را توسط data تعریف میکنیم
3- توسط v-model به فیلدهامون bind میکنیم
4- حال در بخشی که میخواهیم محتوای ایمیل و غیره نمایش داده شود، داخل {{}} صداش میکنیم.
5- در خروجی میبینیم که همزمان که ایمیل را تایپ میکنیم، در خروجی نمایشمون میبینیم که ایمیل هم نمایش داده میشود.

 

textbox در vue.js

<div class="form-group">
  <label for="email">Email</label>
  <input
    type="text"
    name="email"
    id="email"
    class="form-control"
    placeholder="enter your email"
    v-model.lazy="user.email"
  >
</div>
<div class="form-group">
  <label for="age">Age</label>
  <input
    type="number"
    name="age"
    id="age"
    class="form-control"
    placeholder="enter your age"
    v-model="user.age"
  >
</div>
<div class="form-group">
  <label>Password</label>
  <input
    type="password"
    name="password"
    class="form-control"
    placeholder="enter your password"
    v-model="user.password"
  >
</div>
<hr>



<div>
  <span>Email :</span>
  <strong>{{ user.email }}</strong>
</div>

<div>
  <span>Age :</span>
  <strong>{{ user.age }}</strong>
</div>

<div>
  <span>Password :</span>
  <strong>{{ user.password }}</strong>
</div>



<script>
export default {
  data() {
    return {
      user: {
        email: "",
        age: 22,
        password: ""
      },
    };
  }
};
</script>

6- میتونیم email و age و password چون مربوط به user هستند به صورت object هم تعریف کنیم و با user.age مثلا ، به آن دسترسی داشته باشیم
نکته : وقتی که از v-model به تنهایی برای bind کردن مقادیر استفاده میکنیم، به صورت همزمان با تایپ کردن، مقدار را در خروجی مشاهده میکنیم؛

شاید ما نخواهیم این اتفاق بیافته و در واقع بخواهیم که بعد از اینکه از input مثلا خارج شدیم بعد مقدار در خروجی نمایش داده شود؟

مدیفایر lazy:

برای اینکار ما یک modifier داریم بنام lazy که دقیقا کاری که میخواهیم را برامون انجام میدهد یعنی ما با استفاده از v-model.lazy به جای v-model خالی ، می آییم و مقدار ورودی input را نه به صورت همزمان، بلکه دقیقا بعد از خارج شدن از input نمایش میدهیم.
البته هر کدام از موارد بالا، در زمان خودش و باتوجه به نیاز قابل استفاده هستند.

textarea در vue.js

7- برای bind کردن text-area هم دقیقا مثل مابقی فیلدهایی که bind کردیم از v-model استفاده میکنیم.

نکته : وقتی که در text-area می آییم و اینتر میزنیم ، در خروجی اینتر را نمایش نمیدهد؟

برای اینکه اینتر را هم نمایش بدهد کافیه به تگی که گفتیم message داخل textarea رو بهمون نمایش بده:

یک استایل به شکل white-space:pre بدهیم؛

<div class="form-group">
  <label>Message</label>
  <textarea class="form-control" v-model="message"></textarea>
</div>

<div>
  <span>TextArea Message :</span>
  <strong style="white-space:pre">{{ message }}</strong>
</div>
<script>
export default {
  data() {
    return {
      message: "",
    };
  }
};
</script>

به این ترتیب در خروجی اینتر را هم مشاهده خواهیم کرد.

 

checkbox ها در vue.js

8- مورد بعدی checkbox ها:
برای چک باکس ها کافیه یک آرایه تعریف کنیم و با استفاده از v-model بیایم همه checkbox ها را به نام آن آرایه ، bind کنیم.
برای نمایش هم یک لیستی از ul و li ایجاد میکنیم و با استفاده از حلقه for نمایششون میدهیم.

<hr>
<div class="col-md-4">
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" value="ReciveMail" v-model="recieveTypes"> Recive Mail
      </label>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" value="ReciveMessages" v-model="recieveTypes"> Recive Messages
      </label>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" value="ReciveCalls" v-model="recieveTypes"> Recive Calls
      </label>
    </div>
  </div>
</div>
<div class="clearfix"></div>


<hr>
<ul>
  <li v-for="item in recieveTypes" :key="item">{{ item }}</li>
</ul>
<hr>

<script>
export default {
  data() {
    return {
      recieveTypes: [],
    };
  }
};


vue.js در  Radio button

Radio button-9 :
در مورد radio button چون فقط یک مورد باید انتخاب شود، دیگه آرایه تعریف نمیکنیم بلکه v-model آن یکی هست، بنابراین یک نامی را باز تعریف میکنیم و به همه radio ها همون را bind میکنیم.

<hr>
<div class="col-md-4">
  <div class="form-group">
    <div class="radio">
      <label>
        <input type="radio" value="male" v-model="gender"> Male
      </label>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="form-group">
    <div class="radio">
      <label>
        <input type="radio" value="female" id="ReciveMessages" v-model="gender"> Female
      </label>
    </div>
  </div>
</div>
<div class="clearfix"></div>



<div>
  <span>User Gender :</span>
  <strong>{{ gender }}</strong>
</div>

<script>
export default {
  data() {
    return {
      gender: "male",
    };
  }
};

selectbox در vue.js :

Selectbox-10:
برای selectbox هم می آییم یک آرایه با مقادیر مورد نیاز در selectbox درون data ایجاد میکنیم و باز از v-model استفاده میکنیم.

<hr>
<div class="form-group">
  <select id="selectOptions" class="form-control" v-model="selectedPriority">
    <option v-for="item in priorities" :key="item">{{ item }}</option>
  </select>
</div>

-----------------------------------------

<div>
  <span>User Priority :</span>
  <strong>{{ selectedPriority }}</strong>
</div>

------------------------------------------
<script>
export default {
  data() {
    return {
      priorities: ["high", "medium", "low"],
      selectedPriority: "low"
    };
  }
};
</script>

کد مثال بالا را میتوانید به صورت کامل در زیر مشاهده کنید:

App.vue

<template>
  <div class="container">
    <h1 id="header">Form</h1>
    <hr>
    <div class="row">
      <div class="col-md-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Form Inputs :</div>
          <div class="panel-body">
            <div class="form-group">
              <label for="email">Email</label>
              <input
                type="text"
                name="email"
                id="email"
                class="form-control"
                placeholder="enter your email"
                v-model.lazy="user.email"
              >
            </div>
            <div class="form-group">
              <label for="age">Age</label>
              <input
                type="number"
                name="age"
                id="age"
                class="form-control"
                placeholder="enter your age"
                v-model="user.age"
              >
            </div>
            <div class="form-group">
              <label>Password</label>
              <input
                type="password"
                name="password"
                class="form-control"
                placeholder="enter your password"
                v-model="user.password"
              >
            </div>
            <hr>
            <div class="form-group">
              <label>Message</label>
              <textarea class="form-control" v-model="message"></textarea>
            </div>
            <hr>
            <div class="col-md-4">
              <div class="form-group">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" value="ReciveMail" v-model="recieveTypes"> Recive Mail
                  </label>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" value="ReciveMessages" v-model="recieveTypes"> Recive Messages
                  </label>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" value="ReciveCalls" v-model="recieveTypes"> Recive Calls
                  </label>
                </div>
              </div>
            </div>
            <div class="clearfix"></div>
            <hr>
            <div class="col-md-4">
              <div class="form-group">
                <div class="radio">
                  <label>
                    <input type="radio" value="male" v-model="gender"> Male
                  </label>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <div class="radio">
                  <label>
                    <input type="radio" value="female" id="ReciveMessages" v-model="gender"> Female
                  </label>
                </div>
              </div>
            </div>
            <div class="clearfix"></div>
            <hr>
            <div class="form-group">
              <select id="selectOptions" class="form-control" v-model="selectedPriority">
                <option v-for="item in priorities" :key="item">{{ item }}</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Input Results :</div>
          <div class="panel-body">
            <div>
              <span>Email :</span>
              <strong>{{ user.email }}</strong>
            </div>

            <div>
              <span>Age :</span>
              <strong>{{ user.age }}</strong>
            </div>

            <div>
              <span>Password :</span>
              <strong>{{ user.password }}</strong>
            </div>

            <div>
              <span>TextArea Message :</span>
              <strong style="white-space:pre">{{ message }}</strong>
            </div>
            <hr>
            <ul>
              <li v-for="item in recieveTypes" :key="item">{{ item }}</li>
            </ul>
            <hr>
            <div>
              <span>User Gender :</span>
              <strong>{{ gender }}</strong>
            </div>
            <div>
              <span>User Priority :</span>
              <strong>{{ selectedPriority }}</strong>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        email: "",
        age: 22,
        password: ""
      },
      message: "",
      recieveTypes: [],
      gender: "male",
      priorities: ["high", "medium", "low"],
      selectedPriority: "low"
    };
  }
};
</script>

<style>
#header {
  text-align: center;
}

span {
  color: red;
  font-size: 1.5em;
}

textarea {
  resize: vertical;
}
</style>

در این جلسه از آموزش به مبحث آموزش فرم ها در vue.js پرداختیم.

در جلسه آینده custom directive ها را بررسی خواهیم کرد.

برچسب‌ها:

کامنت ها

  1. وحید :

    اکتبر 17th, 2019 در 9:02 ق.ظ

    آموزش مفیدی بود، سپاسگزارم

با کامنت گذاری ما را در ارائه آموزش بهتر یاری کنید

026-32601 داخلی 4

info@pinsite.ir

ثبت سفارش طراحی سایت

برای دریافت تخفیف، در هنگام تماس، نحوه آشنایی با شرکت را از طریق سایت pinsite.ir اعلام کنید