شروع با Vuejs
در تاریخ توسط
برای دریافت متغیرهای ایجاد شده در vue در سمت html از {{}} استفاده میشود. که به آن  string interpolation گفته میشود .

برای فراخوانی یک متد در یک تگ html  از v-on و بعد ایونت جاوااسکریپتی و بعد بعد فانکشنی که باید اجرا بشه استفاده میکنیم .

  <input type="text" id="txt-title" v-on:input="changeText">
و در فایل vuejs
new Vue({
    el: '#first-app',
    data: {
        title: 'Hello World',
    },
    methods: {
        changeText: function (event) {
            this.title = event.target.value;
        }    
})
مثلا برای فراخوانی متد بعد از اینتر زدن
 <input type="text" id="txt-title" v-on:keyup.enter="changeText">

اگر بخواهیم مقدار یک متغییر همیشه مقدار اولیه اون که ست شده دریافت شود و اگر متغیر تغییر کرده بود اونا رو نادیده بگیره از دکوراتور v-once در تگ مورد نظرمون استفاده میکنیم. حالا میدونیم توی this.title مقدار تغییر کرده ولی به اون توجهی نمیشه .
<h1 v-once>{{title}}</h1>
برای فراخوانی یک متد به طور مستقیم در string interpolation از نام متد و () استفاده میکنیم مثل
{{myMethod()}}
برای بایند کردن تگ‌های html به یک تگ از v-bind استفاده میکنیم.
new Vue({
    el: '#first-app',
    data: {
        link: 'http://openlearn.ir'
    }
})

<a v-bind:href="link">openlearn</a>
در واقع عمل v-on برای ارسال از سمت html به js  استفاده میشه و v-bind برای ارسال از js  و استفاده در html استفاده میشه.
برای بایند کردن تگ‌های html به یک string interpolation نمیشه این کار رو مستقیم انجام داد چون همون مقدار تکست html ای رو دقیقا نشون میده و به جاش از یک تگ html ای مثل p و  از v-html استفاده میکنیم.
new Vue({
    el: '#first-app',
    data: {
       htmlLink: '<a href="http://openlearn.ir">OpenLearn</a>'
    }
})

{{htmlLink}}
<p v-html="htmlLink"></p>
در هنگام ارسال آرگومان‌ها از html به js در html کد event$ یک آرگومان رزرو شده است است که میشه با اون اطلاعات ایونت مورد نظر رو ارسال کرد.
v-bind:click:"myFunction($event)"
به متدهای توکاری که به ایونت‌های جاوااسکریپت اضافه میشوند تا تغییری توی اونا بدن modifier گفته میشود.  مثلا گفتیم اگر به فلان ناحیه رسیدی وایسا و طبیعتا فانکشنی هم بعد اون اجرا نمیشه.
v-bind:mousemove.stop:""
میشه چند تا modifier رو با . پشت سرهم آورد .
keyup.enter.space.esc
Two way binding
 <input type="text" v-model="name" />
{{name}}

new Vue({
    el: '#first-app',
    data: {
        name: 'openlearn',
    },
}
برای خلاصه نویسی
به جای v-on:click میشه نوشت click@ در واقع جای v-on مینویسیم @ و جای v-bind:href میشه فقط : گذاشت . از بایندینگ برای اضافه کردن خصوصیات vuejs ای به html استفاده میشود مثلا میخوایم به صورت شرطی یک کلاس بنویسیم .
  <div class="demo" :class="{ red: attachRed , blue : !attachRed }" @click="attachRed = !attachRed"></div>
با کلیک attachRed برابر true میشه و کلاس red فراخوانی میشه و با کلیک بعدی false میشه و کلاس blue فراخوانی میشه.
new Vue({
  el: '#roxo-app',
  data: {
    attachRed: false
  }
}
که بوسیله computed‌ها میشه جلوی کلاس نام computed رو فراخوانی کرد .
  <div class="demo" :class="divClasses" @click="attachRed = !attachRed"></div>
  <div class="demo" :class="{red: attachRed}"></div>
  <div class="demo" :class="[color, {blue: attachRed}]"></div>

  <input type="text" v-model="color">
  <hr>

  <h1>Dynamic Styles</h1>
  <div class="demo" :style="{backgroundColor: bgColor}"></div>
  <div class="demo" :style="divStyles"></div>
  <div class="demo" :style="[divStyles, {height: width + 'px'}]"></div>
و
new Vue({
  el: '#roxo-app',
  data: {
    attachRed: false,
    color: 'green',
    width: 100,
    bgColor: 'gray'
  },
  computed:{
    divClasses: function(){
      return {
        red: this.attachRed,
        blue: !this.attachRed
      }
    },
    divStyles: function(){
      return {
        backgroundColor: this.bgColor,
        width: this.width + 'px'
      }
    }
  }
})

دستورات شرطی و حلقه ها
new Vue({
  el: '#roxo-app',
  data: {
    show: true,
    foods: ['پیتزا', 'قرمه سبزی','چلو کباب'],
    persons: [
      {name: 'masoud', age: 28, website: 'www.roxo.ir'},
      {name: 'morvarid', age: 28, website:'www.google.com'}
    ]
  }
})
و در html
<p v-if="show">شما می‌توانید این پاراگراف را ببینید.</p>
  <p v-else>شما نمی‌توانید این پاراگرافت را مشاهده کنید</p>
  <template v-if="show">
  <h3>گروه بندی قالب</h3>
  <p>این پاراگراف در یک گروه بندی قرار دارد</p>
  </template>
<p v-show="show">آیا می‌توانید من را ببینید؟</p>
  <button type="button" @click="show = !show">تغییر وضعیت</button>
  <hr>
  <ul>
  <li v-for="(food, i) in foods" :key="food">{{food}} - ({{i}})</li>
  <button type="button" @click="foods.push('دنده کباب')">افزودن غذای جدید</button>
  </ul>
  <hr>
  <ul dir="ltr">
  <li v-for="person in persons">
  <span v-for="(value, key, index) in person">
  {{key}}: {{value}} - ({{index}})
  </span>
  </li>
  </ul>
v-if در صورت نادرست بودن در اینجا کلا یک تگ رو نشون نمیده . v-show   در صورت نادرست بودن hide میکنه .
توی حلقه for  اگه فقط خود object رو بخواهیم مثل person in persons نوشته میشه . اگر Index و key اون رو هم بخواهیم درون پرانتز () به صورت دو یا سه عبارتی مینویسیم .


گروه های پست :
تعداد مشاهده : 106
تعداد پسندها : 0
تعداد نظرات : 0
تعداد پیوست ها : 0

ارسال دیدگاه

ایمیل شما به کاربران نمایش داده نمی شود .

دیدگاه ها

تا کنون نظری داده نشده است .
اولین کسی باشید که دیدگاه خود را ثبت می کند .

loading...

لطفا منتظر بمانید...