VueJS - อินสแตนซ์
ในการเริ่มต้นด้วย VueJS เราต้องสร้างอินสแตนซ์ของ Vue ซึ่งเรียกว่าไฟล์ root Vue Instance.
ไวยากรณ์
var app = new Vue({
// options
})ให้เราดูตัวอย่างเพื่อทำความเข้าใจสิ่งที่ต้องเป็นส่วนหนึ่งของตัวสร้าง Vue
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{mydetails()}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
</body>
</html>vue_instance.js
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
address : "Mumbai"
},
methods: {
mydetails : function() {
return "I am "+this.firstname +" "+ this.lastname;
}
}
})สำหรับ Vue มีพารามิเตอร์ที่เรียกว่า el. ใช้รหัสขององค์ประกอบ DOM ในตัวอย่างข้างต้นเรามีรหัส#vue_det. เป็นรหัสขององค์ประกอบ div ซึ่งมีอยู่ใน. html
<div id = "vue_det"></div>ตอนนี้สิ่งที่เรากำลังจะทำจะส่งผลต่อองค์ประกอบ div และไม่มีอะไรอยู่นอกองค์ประกอบนั้น
ต่อไปเราได้กำหนดวัตถุข้อมูล มีค่าชื่อนามสกุลและที่อยู่
สิ่งเดียวกันนี้ถูกกำหนดไว้ใน div ตัวอย่างเช่น,
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>ค่า Firstname: {{firstname}} จะถูกแทนที่ภายในการแก้ไขเช่น {{}} ด้วยค่าที่กำหนดในออบเจ็กต์ข้อมูลคือ Ria เช่นเดียวกับนามสกุล
ต่อไปเรามีวิธีการที่เรากำหนดฟังก์ชัน mydetails และค่าที่ส่งคืน ถูกกำหนดภายใน div เป็น
<h1>{{mydetails()}}</h1>ดังนั้นภายใน {{}} ฟังก์ชัน mydetails จึงถูกเรียกใช้ ค่าที่ส่งคืนในอินสแตนซ์ Vue จะถูกพิมพ์ภายใน {{}} ตรวจสอบผลลัพธ์สำหรับการอ้างอิง
เอาต์พุต
ตอนนี้เราจำเป็นต้องส่งผ่านตัวเลือกไปยังตัวสร้าง Vue ซึ่งส่วนใหญ่เป็นข้อมูลเทมเพลตองค์ประกอบที่จะติดตั้งวิธีการโทรกลับ ฯลฯ
ให้เราดูตัวเลือกที่จะส่งต่อไปยัง Vue
#data- ข้อมูลประเภทนี้อาจเป็นวัตถุหรือฟังก์ชันก็ได้ Vue แปลงคุณสมบัติเป็น getters / setters เพื่อให้มีปฏิกิริยา
มาดูวิธีการส่งผ่านข้อมูลในตัวเลือก
ตัวอย่าง
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"}
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
</script>
</body>
</html>เอาต์พุต
console.log(vm.fname); // พิมพ์ราช
console.log(vm.$data); พิมพ์วัตถุเต็มตามที่แสดงด้านบน
console.log(vm.$data.fname); // พิมพ์ราช
หากมีคอมโพเนนต์อ็อบเจ็กต์ข้อมูลจะต้องถูกอ้างถึงจากฟังก์ชันดังที่แสดงในโค้ดต่อไปนี้
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"};
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
// must use function when in Vue.extend()
var Component = Vue.extend({
data: function () {
return _obj
}
});
var myComponentInstance = new Component();
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);
</script>
</body>
</html>ในกรณีของส่วนประกอบข้อมูลคือฟังก์ชันซึ่งใช้กับ Vue.extend ดังที่แสดงด้านบน ข้อมูลเป็นฟังก์ชัน ตัวอย่างเช่น,
data: function () {
return _obj
}ในการอ้างถึงข้อมูลจากส่วนประกอบเราจำเป็นต้องสร้างอินสแตนซ์ของมัน ตัวอย่างเช่น,
var myComponentInstance = new Component();ในการดึงรายละเอียดจากข้อมูลเราต้องทำเช่นเดียวกับที่เราทำกับองค์ประกอบหลักด้านบน ตัวอย่างเช่น.
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);ต่อไปนี้เป็นรายละเอียดที่แสดงในเบราว์เซอร์
Props- ประเภทของอุปกรณ์ประกอบฉากคืออาร์เรย์ของสตริงหรือวัตถุ ใช้ไวยากรณ์ตามอาร์เรย์หรือตามวัตถุ กล่าวกันว่าเป็นแอตทริบิวต์ที่ใช้ในการยอมรับข้อมูลจากองค์ประกอบหลัก
ตัวอย่าง 1
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})ตัวอย่าง 2
Vue.component('props-demo-advanced', {
props: {
// just type check
height: Number,
// type check plus other validations
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})propsData - ใช้สำหรับการทดสอบหน่วย
Type- อาร์เรย์ของสตริง ตัวอย่างเช่น {[key: string]: any} จะต้องผ่านระหว่างการสร้างอินสแตนซ์ Vue
ตัวอย่าง
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})Computed- ประเภท: {[key: string]: Function | {get: Function, set: Function}}
ตัวอย่าง
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 2 },
computed: {
// get only, just need a function
aSum: function () {
return this.a + 2;
},
// both get and set
aSquare: {
get: function () {
return this.a*this.a;
},
set: function (v) {
this.a = v*2;
}
}
}
})
console.log(vm.aSquare); // -> 4
vm.aSquare = 3;
console.log(vm.a); // -> 6
console.log(vm.aSum); // -> 8
</script>
</body>
</html>คอมพิวเตอร์มีสองฟังก์ชัน aSum และ aSquare.
ฟังก์ชัน aSum เพียงแค่ส่งกลับ this.a+2. ฟังก์ชัน aSquare อีกสองฟังก์ชันget และ set.
ตัวแปร vm เป็นตัวอย่างของ Vue และเรียกว่า aSquare และ aSum นอกจากนี้ vm.aSquare = 3 เรียกใช้ฟังก์ชัน set จาก aSquare และ vm.aSquare เรียกใช้ฟังก์ชัน get เราสามารถตรวจสอบผลลัพธ์ในเบราว์เซอร์ซึ่งมีลักษณะเหมือนภาพหน้าจอต่อไปนี้
Methods- วิธีการจะรวมอยู่ในอินสแตนซ์ Vue ดังที่แสดงในรหัสต่อไปนี้ เราสามารถเข้าถึงฟังก์ชันโดยใช้วัตถุ Vue
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 5 },
methods: {
asquare: function () {
this.a *= this.a;
}
}
})
vm.asquare();
console.log(vm.a); // 25
</script>
</body>
</html>วิธีการเป็นส่วนหนึ่งของตัวสร้าง Vue ให้เราโทรไปยังเมธอดโดยใช้วัตถุ Vuevm.asquare ()มูลค่าของทรัพย์สิน a ได้รับการอัปเดตในไฟล์ asquareฟังก์ชัน ค่าของ a เปลี่ยนจาก 1 เป็น 25 และค่าเดียวกันนี้จะปรากฏในคอนโซลเบราว์เซอร์ต่อไปนี้
