v-on (v-on)

اینجا «دستور v-on ویو» را خیلی ساده می گوییم. «رویداد (Event)» یعنی واکنش به کاری کاربر. مانند کلیک یا اسکرول. با v-on یک گوش دادن می سازیم. سپس هنگام رخداد، کد ما اجرا می شود.

تعریف و کاربرد اصلی

v-on روی تگ یا کامپوننت می آید. نوع رویداد را می گیرد. همچنین می تواند «مودیفایر (Modifier)» بگیرد. سپس یک متد یا عبارت اجرا می کند. میانبر @ برابر v-on: است.

مثال سریع: تغییر پس زمینه با کلیک

با کلیک، مقدار bgColor عوض می شود. سپس کلاس واکنش نشان می دهد.

<template>
  <h1>v-on Example</h1>
  <div v-bind:class="{ yelClass: bgColor }">
    <p>Click the button to change background color of this DIV box.</p>
    <button v-on:click="bgColor = !bgColor">Click</button>
    <p>bgColor property: "{{ bgColor }}"</p>
  </div>
</template>

مشاهده در ادیتور

مودیفایر capture: اول والد بگیرد

.capture یعنی رخداد ابتدا در والد گرفته شود. سپس فرزند.

<template>
  <h1>v-on Example</h1>
  <p>With '.capture', parent handles the click first.</p>
  <div v-on:click.capture="this.msg.push('parent')" id="parent">
    <p>This is the parent element.</p>
    <div v-on:click="this.msg.push('child')">
      <p>This is the child element. CLICK HERE!</p>
    </div>
  </div>
  <ol>
    <li v-for="x in msg">{{ x }}</li>
  </ol>
</template>
<script>
export default {
  data() {
    return {
      msg: []
    };
  }
};
<\/script>
<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
}
#parent {
  width: 250px;
  background-color: lightpink;
}
#parent > div {
  cursor: pointer;
  background-color: lightgreen;
}
<\/style>

مشاهده در ادیتور

مودیفایر stop: جلوی حباب سازی

.stop انتشار رویداد را متوقف می کند. والد دیگر نمی گیرد.

<template>
  <h1>v-on Example</h1>
  <div v-on:click="this.msg.push('parent')" id="parent">
    <p>This is the parent element.</p>
    <div v-on:click.stop="this.msg.push('child')">
      <p>This is the child element. CLICK HERE!</p>
    </div>
  </div>
  <ol>
    <li v-for="x in msg">{{ x }}</li>
  </ol>
</template>
<script>
export default {
  data() {
    return {
      msg: []
    };
  }
};
<\/script>
<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
}
#parent {
  width: 250px;
  background-color: lightpink;
}
#parent > div {
  cursor: pointer;
  background-color: lightgreen;
}
<\/style>

مشاهده در ادیتور

passive و once برای کارایی

.passive می گوید پیش فرض لغو نمی شود. اسکرول روان تر می شود. .once فقط یک بار اجرا می کند.

<template>
  <h1>v-on Example</h1>
  <div v-on:scroll.passive="this.scrollTimes++" id="parent">
    <p>Scroll here.</p>
  </div>
  <p>Scroll happened {{ scrollTimes }} times.</p>
</template>
<script>
export default {
  data() {
    return {
      scrollTimes: 0
    };
  }
};
<\/script>
<style scoped>
#parent {
  width: 200px;
  height: 50px;
  overflow: scroll;
}
<\/style>

مشاهده در ادیتور

<template>
  <h1>v-on Example</h1>
  <button v-on:click.once="clickTimes++">Click</button>
  <p>Click event happened {{ clickTimes }} times.</p>
</template>
<script>
export default {
  data() {
    return {
      clickTimes: 0
    };
  }
};
<\/script>

مشاهده در ادیتور

self و prevent و کلیدها

.self فقط رویداد خود عنصر را می گیرد. .prevent پیش فرض را لغو می کند. همچنین می توان کلیدها را ترکیب کرد. مانند .left.shift.

<template>
  <h1>v-on Example</h1>
  <div v-on:click="addMsg('grandParent')" id="grandParent">
    Grandparent
    <div v-on:click.self="addMsg('parent')">
      Parent
      <div v-on:click="addMsg('child')">
        Child. CLICK HERE!
      </div>
    </div>
  </div>
  <ol>
    <li v-for="x in msg">{{ x }}</li>
  </ol>
</template>
<script>
export default {
  data() {
    return {
      msg: []
    };
  },
  methods: {
    addMsg(txt) {
      this.msg.push(txt);
    }
  }
};
<\/script>
<style scoped>
#grandParent {
  width: 250px;
}
<\/style>

مشاهده در ادیتور

<template>
  <h1>v-on Example</h1>
  <div 
    v-on:click.right.prevent="changeColor" 
    v-bind:style="{ backgroundColor: 'hsl(' + bgColor + ',80%,80%)' }">
    <p>Press right mouse button here.</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bgColor: 0
    };
  },
  methods: {
    changeColor() {
      this.bgColor += 50;
    }
  }
};
<\/script>
<style scoped>
div {
  width: 200px;
}
<\/style>

مشاهده در ادیتور

<template>
  <h1>v-on Example</h1>
  <p>Hold 'Shift' and left-click the image.</p>
  <img v-on:click.left.shift="changeImg" v-bind:src="imgUrl" />
</template>
<script>
export default {
  data() {
    return {
      imgFish: true,
      imgUrl: 'img_fish.svg'
    };
  },
  methods: {
    changeImg() {
      this.imgFish = !this.imgFish;
      if (this.imgFish) {
        this.imgUrl = 'img_fish.svg';
      }
      else {
        this.imgUrl = 'img_tiger.svg';
      }
    }
  }
};
<\/script>
<style scoped>
img {
  width: 200px;
}
<\/style>

مشاهده در ادیتور

گام های عملی

1. نوع رویداد را مشخص کن. مثلا click یا scroll.
2. متد مناسب را بنویس. سپس در methods بگذار.
3. در صورت نیاز، مودیفایر مناسب اضافه کن.
4. برای کلیدها، از .left و .right و ترکیب ها کمک بگیر.

نکته: برای آموزش های مرتبط، سر بزن به v-model و v-once. همچنین لینک کلیدی: دستور v-on ویو.

جمع بندی سریع

• v-on رویداد را می گیرد و کد را اجرا می کند.
• میانبر @ برابر v-on: است.
• .stop و .capture انتشار را کنترل می کنند.
• .once یک بار اجرا می کند؛ .passive کارایی را بهتر می کند.
• .self و کلیدها رفتار دقیق تری می دهند.