VueJS - เหตุการณ์

v-on เป็นแอตทริบิวต์ที่เพิ่มให้กับองค์ประกอบ DOM เพื่อรับฟังเหตุการณ์ใน VueJS

คลิกเหตุการณ์

ตัวอย่าง

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "displaynumbers">Click ME</button>
         <h2> Add Number 100 + 200 = {{total}}</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : ''
            },
            methods : {
               displaynumbers : function(event) {
                  console.log(event);
                  return this.total =  this.num1+ this.num2;
               }
            },
         });
      </script>
   </body>
</html>

เอาต์พุต

รหัสต่อไปนี้ใช้เพื่อกำหนดเหตุการณ์การคลิกสำหรับองค์ประกอบ DOM

<button v-on:click = "displaynumbers">Click ME</button>

มีชวเลขสำหรับ v-on ซึ่งหมายความว่าเราสามารถเรียกเหตุการณ์ได้ดังนี้ -

<button @click = "displaynumbers">Click ME</button>

เมื่อคลิกปุ่มมันจะเรียกเมธอด 'displaynumbers' ซึ่งใช้ในเหตุการณ์และเราได้ปลอบใจสิ่งเดียวกันในเบราว์เซอร์ดังที่แสดงด้านบน

ตอนนี้เราจะตรวจสอบ mouseover mouseout อีกหนึ่งเหตุการณ์

ตัวอย่าง

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : '',
               styleobj : {
                  width:"100px",
                  height:"100px",
                  backgroundColor:"red"
               }
            },
            methods : {
               changebgcolor : function() {
                  this.styleobj.backgroundColor = "green";
               },
               originalcolor : function() {
                  this.styleobj.backgroundColor = "red";
               }
            },
         });
      </script>
   </body>
</html>

ในตัวอย่างข้างต้นเราได้สร้าง div ที่มีความกว้างและความสูงเป็น 100px ได้รับสีพื้นหลังเป็นสีแดง เมื่อวางเมาส์เรากำลังเปลี่ยนสีเป็นสีเขียวและเมื่อวางเมาส์เรากำลังเปลี่ยนสีกลับเป็นสีแดง

ดังนั้นในระหว่างการวางเมาส์จะมีการเรียกวิธีการ changebgcolor และเมื่อเราเลื่อนเมาส์ออกจาก div จะมีการเรียกเมธอด originalcolor.

ทำได้ดังนี้ -

<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>

สองเหตุการณ์ - วางเมาส์เหนือและวางเมาส์ - กำหนดให้กับ div ดังที่แสดงด้านบน เราได้สร้างตัวแปร styleobj และกำหนดสไตล์ที่ต้องการเพื่อกำหนดให้กับ div ตัวแปรเดียวกันผูกกับ div โดยใช้ v-bind: style =” styleobj”

ใน changebgcolor เรากำลังเปลี่ยนสีเป็นสีเขียวโดยใช้รหัสต่อไปนี้

changebgcolor : function() {
   this.styleobj.backgroundColor = "green";
}

เมื่อใช้ตัวแปร stylobj เรากำลังเปลี่ยนสีเป็นสีเขียว

ในทำนองเดียวกันรหัสต่อไปนี้จะใช้เพื่อเปลี่ยนกลับเป็นสีเดิม

originalcolor : function() {
   this.styleobj.backgroundColor = "red";
}

นี่คือสิ่งที่เราเห็นในเบราว์เซอร์

เมื่อเราวางเมาส์สีจะเปลี่ยนเป็นสีเขียวดังที่แสดงในภาพหน้าจอต่อไปนี้

ตัวปรับเปลี่ยนเหตุการณ์

Vue มีตัวแก้ไขเหตุการณ์ที่พร้อมใช้งานบนแอตทริบิวต์ v-on ต่อไปนี้เป็นตัวปรับแต่งที่มี -

.once

อนุญาตให้เหตุการณ์ดำเนินการเพียงครั้งเดียว

ไวยากรณ์

<button v-on:click.once = "buttonclicked">Click Once</button>

เราจำเป็นต้องเพิ่มตัวดำเนินการจุดในขณะที่เรียกตัวดัดแปลงดังที่แสดงในไวยากรณ์ด้านบน ให้เราใช้เป็นตัวอย่างและทำความเข้าใจการทำงานของตัวปรับเปลี่ยนครั้งเดียว

ตัวอย่าง

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
         Output:{{clicknum}}
         <br/><br/>
         <button v-on:click = "buttonclicked"  v-bind:style = "styleobj">Click Me</button>
         Output:{{clicknum1}}
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               buttonclickedonce : function() {
                  this.clicknum++;
               },
               buttonclicked : function() {
                  this.clicknum1++;
               }
            }
         });
      </script>
   </body>
</html>

เอาต์พุต

ในตัวอย่างข้างต้นเราได้สร้างบัตตันสองอัน ปุ่มที่มีป้ายกำกับคลิกเมื่อได้เพิ่มตัวปรับเปลี่ยนครั้งเดียวและปุ่มอื่น ๆ ไม่มีตัวปรับแต่งใด ๆ นี่คือวิธีการกำหนดปุ่มต่างๆ

<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
<button v-on:click = "buttonclicked"  v-bind:style = "styleobj">Click Me</button>

ปุ่มแรกเรียกเมธอดว่า "buttonclickedonce" และปุ่มที่สองเรียกเมธอดว่า "buttonclicked"

buttonclickedonce : function() {
   this.clicknum++;
},
buttonclicked : function() {
   this.clicknum1++;
}

มีสองตัวแปรที่กำหนดไว้ใน clicknum และ clicknum1 ทั้งสองจะเพิ่มขึ้นเมื่อคลิกปุ่ม ตัวแปรทั้งสองเริ่มต้นเป็น 0 และการแสดงผลจะเห็นในเอาต์พุตด้านบน

เมื่อคลิกปุ่มแรกตัวแปร clicknum จะเพิ่มขึ้นทีละ 1 ในการคลิกครั้งที่สองตัวเลขจะไม่เพิ่มขึ้นเนื่องจากตัวปรับแต่งป้องกันไม่ให้ดำเนินการหรือดำเนินการตามรายการที่กำหนดให้เมื่อคลิกปุ่ม

เมื่อคลิกปุ่มที่สองจะมีการดำเนินการเดียวกันกล่าวคือตัวแปรจะเพิ่มขึ้น ทุกครั้งที่คลิกค่าจะเพิ่มขึ้นและแสดงขึ้น

ต่อไปนี้เป็นผลลัพธ์ที่เราได้รับในเบราว์เซอร์

.prevent

Syntax

<a href = "http://www.google.com" v-on:click.prevent = "clickme">Click Me</a>

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  color: '#4CAF50',
                  marginLeft: '20px',
                  fontSize: '30px'
               }
            },
            methods : {
               clickme : function() {
                  alert("Anchor tag is clicked");
               }
            }
         });
      </script>
   </body>
</html>

Output

หากเราคลิกลิงก์ clickme มันจะส่งการแจ้งเตือนว่า“ Anchor tag is clicked” และจะเปิดลิงค์ https://www.google.com ในแท็บใหม่ดังที่แสดงในภาพหน้าจอต่อไปนี้

ตอนนี้ใช้งานได้ตามปกติกล่าวคือลิงก์จะเปิดขึ้นตามที่เราต้องการ ในกรณีที่เราไม่ต้องการให้ลิงก์เปิดขึ้นเราจำเป็นต้องเพิ่มตัวแก้ไข 'ป้องกัน' ให้กับเหตุการณ์ดังที่แสดงในโค้ดต่อไปนี้

<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>

เมื่อเพิ่มแล้วหากเราคลิกที่ปุ่มมันจะส่งข้อความแจ้งเตือนและจะไม่เปิดลิงค์อีกต่อไป ตัวแก้ไขป้องกันจะป้องกันไม่ให้ลิงก์เปิดและดำเนินการเฉพาะเมธอดที่กำหนดให้กับแท็กเท่านั้น

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  color: '#4CAF50',
                  marginLeft: '20px',
                  fontSize: '30px'
               }
            },
            methods : {
               clickme : function() {
                  alert("Anchor tag is clicked");
               }
            }
         });
      </script>
   </body>
</html>

Output

เมื่อคลิกลิงก์จะแสดงข้อความแจ้งเตือนและไม่เปิด url อีกต่อไป

เหตุการณ์ - ตัวปรับเปลี่ยนคีย์

VueJS เสนอตัวปรับแต่งคีย์ตามที่เราสามารถควบคุมการจัดการเหตุการณ์ พิจารณาว่าเรามีกล่องข้อความและเราต้องการให้มีการเรียกใช้เมธอดเมื่อเรากด Enter เท่านั้น เราสามารถทำได้โดยการเพิ่มตัวปรับแต่งคีย์ให้กับเหตุการณ์ดังนี้

ไวยากรณ์

<input type = "text"  v-on:keyup.enter = "showinputvalue"/>

กุญแจสำคัญที่เราต้องการนำไปใช้กับกิจกรรมของเราคือ V-on.eventname.keyname (ตามที่แสดงด้านบน)

เราสามารถใช้ชื่อคีย์ได้หลายชื่อ ตัวอย่างเช่น,V-on.keyup.ctrl.enter

ตัวอย่าง

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/>
         <h3> {{name}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.name=event.target.value;
               }
            }
         });
      </script>
   </body>
</html>

เอาต์พุต

พิมพ์บางอย่างในกล่องข้อความและเราจะเห็นมันปรากฏขึ้นเมื่อเรากด Enter เท่านั้น

เหตุการณ์ที่กำหนดเอง

ผู้ปกครองสามารถส่งข้อมูลไปยังองค์ประกอบโดยใช้แอตทริบิวต์ prop อย่างไรก็ตามเราจำเป็นต้องแจ้งผู้ปกครองเมื่อมีการเปลี่ยนแปลงในองค์ประกอบลูก สำหรับสิ่งนี้เราสามารถใช้เหตุการณ์ที่กำหนดเองได้

องค์ประกอบหลักสามารถฟังเหตุการณ์องค์ประกอบลูกโดยใช้ v-on แอตทริบิวต์

ตัวอย่าง

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div id = "counter-event-example">
            <p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
            <button-counter
            v-for = "(item, index) in languages"
            v-bind:item = "item"
            v-bind:index = "index"
            v-on:showlanguage = "languagedisp"></button-counter>
         </div>
      </div>
      <script type = "text/javascript">
         Vue.component('button-counter', {
            template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
            data: function () {
               return {
                  counter: 0
               }
            },
            props:['item'],
            methods: {
               displayLanguage: function (lng) {
                  console.log(lng);
                  this.$emit('showlanguage', lng);
               }
            },
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
               languageclicked: "",
               languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
            },
            methods: {
               languagedisp: function (a) {
                  this.languageclicked = a;
               }
            }
         })
      </script>
   </body>
</html>

เอาต์พุต

โค้ดด้านบนแสดงการถ่ายโอนข้อมูลระหว่างองค์ประกอบหลักและองค์ประกอบลูก

ส่วนประกอบถูกสร้างขึ้นโดยใช้รหัสต่อไปนี้

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

มี v-forแอตทริบิวต์ซึ่งจะวนซ้ำกับอาร์เรย์ภาษา อาร์เรย์มีรายการภาษาอยู่ในนั้น เราจำเป็นต้องส่งรายละเอียดไปยังองค์ประกอบย่อย ค่าของอาร์เรย์จะถูกเก็บไว้ในรายการและดัชนี

v-bind:item = "item"
v-bind:index = "index"

ในการอ้างถึงค่าของอาร์เรย์เราจำเป็นต้องผูกมันกับตัวแปรก่อนและตัวแปรจะถูกอ้างถึงโดยใช้คุณสมบัติของอุปกรณ์ประกอบฉากดังนี้

Vue.component('button-counter', {
   template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
   data: function () {
      return {
         counter: 0
      }
   },
   props:['item'],
   methods: {
      displayLanguage: function (lng) {
         console.log(lng);
         this.$emit('showlanguage', lng);
      }
   },
});

คุณสมบัติ props มีรายการในรูปแบบอาร์เรย์ เรายังสามารถอ้างถึงดัชนีได้ว่า -

props:[‘item’, ‘index’]

นอกจากนี้ยังมีการเพิ่มเหตุการณ์ในส่วนประกอบดังนี้ -

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

ชื่อของเหตุการณ์คือ showlanguage และเรียกวิธีการที่เรียกว่า languagedisp ซึ่งกำหนดไว้ในอินสแตนซ์ Vue

ในส่วนประกอบแม่แบบถูกกำหนดดังนี้ -

template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',

มีการสร้างปุ่ม ปุ่มจะถูกสร้างขึ้นโดยมีจำนวนนับมากที่สุดในอาร์เรย์ภาษา เมื่อคลิกปุ่มจะมีวิธีการที่เรียกว่า displayLanguage และรายการที่คลิกปุ่มจะถูกส่งเป็นพารามิเตอร์ไปยังฟังก์ชัน ตอนนี้ส่วนประกอบต้องส่งองค์ประกอบที่คลิกไปยังองค์ประกอบหลักเพื่อแสดงผลซึ่งทำได้ดังนี้ -

Vue.component('button-counter', {
   template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
   data: function () {
      return {
         counter: 0
      }
   },
   props:['item'],
   methods: {
      displayLanguage: function (lng) {
         console.log(lng);
         this.$emit('showlanguage', lng);
      }
   },
});

วิธีการ displayLanguage โทร this.$emit(‘showlanguage’, lng);

$emitใช้เพื่อเรียกเมธอดองค์ประกอบหลัก showlanguage วิธีการคือชื่อเหตุการณ์ที่กำหนดบนส่วนประกอบด้วย v-on

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

เรากำลังส่งพารามิเตอร์นั่นคือชื่อของภาษาที่คลิกไปยังเมธอดของอินสแตนซ์ Vue หลักซึ่งกำหนดไว้ดังนี้

var vm = new Vue({
   el: '#databinding',
   data: {
      languageclicked: "",
      languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
   },
   methods: {
      languagedisp: function (a) {
         this.languageclicked = a;
      }
   }
})

ที่นี่ปล่อยทริกเกอร์ showlanguage ซึ่งจะเรียก languagedispจากวิธีการอินสแตนซ์ Vue กำหนดค่าภาษาที่คลิกให้กับตัวแปรlanguageclicked และสิ่งเดียวกันจะปรากฏในเบราว์เซอร์ดังที่แสดงในภาพหน้าจอต่อไปนี้

<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>

ต่อไปนี้เป็นผลลัพธ์ที่เราได้รับในเบราว์เซอร์