VueJS - Contoh
Untuk memulai dengan VueJS, kita perlu membuat instance Vue, yang disebut file root Vue Instance.
Sintaksis
var app = new Vue({
// options
})Mari kita lihat contoh untuk memahami apa yang perlu menjadi bagian dari konstruktor 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;
}
}
})Untuk Vue, ada parameter bernama el. Ini mengambil id dari elemen DOM. Dalam contoh di atas, kami memiliki id#vue_det. Ini adalah id dari elemen div, yang ada dalam .html.
<div id = "vue_det"></div>Sekarang, apa pun yang akan kita lakukan akan memengaruhi elemen div dan tidak ada di luarnya.
Selanjutnya, kita telah mendefinisikan objek data. Ini memiliki nilai nama depan, nama belakang, dan alamat.
Hal yang sama diberikan di dalam div. Sebagai contoh,
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>Nilai Firstname: {{firstname}} akan diganti di dalam interpolasi, yaitu {{}} dengan nilai yang ditetapkan dalam objek data, yaitu Ria. Hal yang sama berlaku untuk nama belakang.
Selanjutnya, kami memiliki metode di mana kami telah mendefinisikan fungsi mydetails dan nilai kembali. Itu ditugaskan di dalam div sebagai
<h1>{{mydetails()}}</h1>Karenanya, di dalam {{}} fungsi mydetails dipanggil. Nilai yang dikembalikan dalam instance Vue akan dicetak di dalam {{}}. Periksa keluaran untuk referensi.
Keluaran
Sekarang, kita perlu meneruskan opsi ke konstruktor Vue yang utamanya adalah data, templat, elemen untuk dipasang, metode, callback, dll.
Mari kita lihat opsi yang akan diteruskan ke Vue.
#data- Jenis data ini bisa berupa objek atau fungsi. Vue mengubah propertinya menjadi getter / setter untuk membuatnya reaktif.
Mari kita lihat bagaimana data diteruskan dalam opsi.
Contoh
<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>Keluaran
console.log(vm.fname); // mencetak Raj
console.log(vm.$data); mencetak objek penuh seperti yang ditunjukkan di atas
console.log(vm.$data.fname); // mencetak Raj
Jika ada komponen, objek data harus direferensikan dari fungsi seperti yang ditunjukkan pada kode berikut.
<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>Dalam kasus komponen, datanya adalah fungsi, yang digunakan dengan Vue.extend seperti yang ditunjukkan di atas. Data adalah sebuah fungsi. Sebagai contoh,
data: function () {
return _obj
}Untuk merujuk ke data dari komponen, kita perlu membuat turunannya. Sebagai contoh,
var myComponentInstance = new Component();Untuk mengambil detail dari data, kita perlu melakukan hal yang sama seperti yang kita lakukan dengan komponen induk di atas. Sebagai contoh.
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);Berikut adalah detail yang ditampilkan di browser.
Props- Jenis untuk alat peraga adalah larik string atau objek. Dibutuhkan sintaks berbasis larik atau berbasis objek. Mereka dikatakan sebagai atribut yang digunakan untuk menerima data dari komponen induk.
Contoh 1
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})Contoh 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 - Ini digunakan untuk pengujian unit.
Type- larik string. Misalnya, {[key: string]: any}. Ini harus diteruskan selama pembuatan instance Vue.
Contoh
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})Computed- Jenis: {[key: string]: Fungsi | {get: Function, set: Function}}
Contoh
<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>Dihitung memiliki dua fungsi aSum dan aSquare.
Fungsi aSum baru saja kembali this.a+2. Fungsi aSquare lagi dua fungsiget dan set.
Variabel vm adalah turunan dari Vue dan memanggil aSquare dan aSum. Juga vm.aSquare = 3 memanggil fungsi set dari aSquare dan vm.aSquare memanggil fungsi get. Kami dapat memeriksa output di browser yang terlihat seperti tangkapan layar berikut.
Methods- Metode harus disertakan dengan instance Vue seperti yang ditunjukkan pada kode berikut. Kita dapat mengakses fungsi tersebut menggunakan objek 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>Metode adalah bagian dari konstruktor Vue. Mari kita panggil metode menggunakan objek Vuevm.asquare (), nilai properti a diperbarui di asquarefungsi. Nilai a diubah dari 1 menjadi 25, dan hal yang sama terlihat di konsol browser berikut.
