VueJS - อินเทอร์เฟซปฏิกิริยา
VueJS มีตัวเลือกในการเพิ่มปฏิกิริยาให้กับคุณสมบัติซึ่งจะเพิ่มแบบไดนามิก พิจารณาว่าเราได้สร้างอินสแตนซ์ vue แล้วและจำเป็นต้องเพิ่มคุณสมบัตินาฬิกา สามารถทำได้ดังนี้ -
ตัวอย่าง
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
setTimeout(
function(){
vm.counter = 20;
},2000
);
</script>
</body>
</html>มีตัวนับคุณสมบัติที่กำหนดเป็น 1 ในออบเจ็กต์ข้อมูล ตัวนับจะเพิ่มขึ้นเมื่อเราคลิกปุ่ม
สร้างอินสแตนซ์ Vue แล้ว ในการเพิ่มนาฬิกาเราต้องทำดังนี้ -
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});เราต้องใช้ $ watch เพื่อเพิ่ม watch นอกอินสแตนซ์ vue มีการเพิ่มการแจ้งเตือนซึ่งแสดงการเปลี่ยนแปลงค่าสำหรับคุณสมบัติตัวนับ นอกจากนี้ยังมีการเพิ่มฟังก์ชันจับเวลาเช่น setTimeout ซึ่งตั้งค่าตัวนับเป็น 20
setTimeout(
function(){
vm.counter = 20;
},2000
);เมื่อใดก็ตามที่ตัวนับมีการเปลี่ยนแปลงการแจ้งเตือนจากวิธีการดูจะเริ่มทำงานดังที่แสดงในภาพหน้าจอต่อไปนี้
VueJS ไม่สามารถตรวจพบการเพิ่มและการลบคุณสมบัติ วิธีที่ดีที่สุดคือการประกาศคุณสมบัติเสมอซึ่งจะต้องมีการตอบสนองล่วงหน้าในอินสแตนซ์ Vue ในกรณีที่เราต้องการเพิ่มคุณสมบัติในขณะดำเนินการเราสามารถใช้วิธี Vue global, Vue.set และ Vue.delete
Vue.set
วิธีนี้ช่วยในการตั้งค่าคุณสมบัติบนวัตถุ ใช้เพื่อหลีกเลี่ยงข้อ จำกัด ที่ Vue ไม่สามารถตรวจจับการเพิ่มคุณสมบัติได้
ไวยากรณ์
Vue.set( target, key, value )ที่ไหน
เป้าหมาย: สามารถเป็นวัตถุหรืออาร์เรย์
คีย์: สามารถเป็นสตริงหรือตัวเลข
ค่า: สามารถเป็นประเภทใดก็ได้
ลองมาดูตัวอย่าง
ตัวอย่าง
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>ในตัวอย่างข้างต้นมีตัวแปร myproduct ที่สร้างขึ้นเมื่อเริ่มต้นโดยใช้โค้ดต่อไปนี้
var myproduct = {"id":1, name:"book", "price":"20.00"};มอบให้กับออบเจ็กต์ข้อมูลในอินสแตนซ์ Vue ดังนี้ -
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});ลองพิจารณาว่าเราต้องการเพิ่มคุณสมบัติอีกหนึ่งรายการในอาร์เรย์ myproduct หลังจากสร้างอินสแตนซ์ Vue แล้ว สามารถทำได้ดังนี้ -
vm.products.qty = "1";มาดูผลลัพธ์ในคอนโซลกัน
ดังที่เห็นข้างต้นในผลิตภัณฑ์จะมีการเพิ่มปริมาณ เมธอด get / set ซึ่งโดยพื้นฐานแล้วการเพิ่มค่า reactivity นั้นมีให้สำหรับ id ชื่อและราคาและไม่สามารถใช้ได้กับจำนวน
เราไม่สามารถบรรลุปฏิกิริยาได้โดยเพียงแค่เพิ่มวัตถุ vue VueJS ส่วนใหญ่ต้องการให้คุณสมบัติทั้งหมดถูกสร้างขึ้นตั้งแต่เริ่มต้น อย่างไรก็ตามในกรณีที่เราต้องการเพิ่มในภายหลังเราสามารถใช้ Vue.set สำหรับสิ่งนี้เราจำเป็นต้องตั้งค่าโดยใช้ vue global เช่น Vue.set
ตัวอย่าง
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>เราได้ใช้ Vue.set เพื่อเพิ่มจำนวนให้กับอาร์เรย์โดยใช้โค้ดต่อไปนี้
Vue.set(myproduct, 'qty', 1);เราได้ปลอบวัตถุ vue แล้วและต่อไปนี้คือผลลัพธ์
ตอนนี้เราสามารถดู get / set สำหรับจำนวนที่เพิ่มโดยใช้ Vue.set
Vue.delete
ฟังก์ชันนี้ใช้เพื่อลบคุณสมบัติแบบไดนามิก
ตัวอย่าง
Vue.delete( target, key )ที่ไหน
เป้าหมาย: สามารถเป็นวัตถุหรืออาร์เรย์
คีย์: อาจเป็นสตริงหรือตัวเลขก็ได้
ในการลบคุณสมบัติใด ๆ เราสามารถใช้ Vue.delete ดังรหัสต่อไปนี้
ตัวอย่าง
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>ในตัวอย่างข้างต้นเราได้ใช้ Vue.delete เพื่อลบราคาออกจากอาร์เรย์โดยใช้โค้ดต่อไปนี้
Vue.delete(myproduct, 'price');ต่อไปนี้เป็นผลลัพธ์ที่เราเห็นในคอนโซล
หลังจากลบเราจะเห็นเฉพาะ id และชื่อเมื่อราคาถูกลบ นอกจากนี้เรายังสังเกตได้ว่าเมธอด get / set ถูกลบ