VueJS - Istanze
Per iniziare con VueJS, dobbiamo creare l'istanza di Vue, che si chiama root Vue Instance.
Sintassi
var app = new Vue({
// options
})
Vediamo un esempio per capire cosa deve essere parte del costruttore 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;
}
}
})
Per Vue, c'è un parametro chiamato el. Prende l'id dell'elemento DOM. Nell'esempio sopra, abbiamo l'id#vue_det. È l'id dell'elemento div, che è presente in .html.
<div id = "vue_det"></div>
Ora, qualunque cosa faremo influenzerà l'elemento div e nulla al di fuori di esso.
Successivamente, abbiamo definito l'oggetto dati. Ha valore firstname, lastname e address.
Lo stesso viene assegnato all'interno del div. Per esempio,
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>
Il valore Firstname: {{firstname}} verrà sostituito all'interno dell'interpolazione, cioè {{}} con il valore assegnato nell'oggetto dati, cioè Ria. Lo stesso vale per il cognome.
Successivamente, abbiamo metodi in cui abbiamo definito una funzione mydetails e un valore restituito. Viene assegnato all'interno del div come
<h1>{{mydetails()}}</h1>
Quindi, all'interno di {{}} viene chiamata la funzione mydetails. Il valore restituito nell'istanza di Vue verrà stampato all'interno di {{}}. Controllare l'output per riferimento.
Produzione
Ora, dobbiamo passare le opzioni al costruttore Vue che sono principalmente dati, modello, elemento su cui montare, metodi, callback, ecc.
Diamo uno sguardo alle opzioni da passare a Vue.
#data- Questo tipo di dati può essere un oggetto o una funzione. Vue converte le sue proprietà in getter / setter per renderlo reattivo.
Diamo un'occhiata a come vengono passati i dati nelle opzioni.
Esempio
<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>
Produzione
console.log(vm.fname); // stampa Raj
console.log(vm.$data); stampa l'intero oggetto come mostrato sopra
console.log(vm.$data.fname); // stampa Raj
Se è presente un componente, è necessario fare riferimento all'oggetto dati da una funzione come mostrato nel codice seguente.
<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>
Nel caso di un componente, i dati sono una funzione, che viene utilizzata con Vue.extend come mostrato sopra. I dati sono una funzione. Per esempio,
data: function () {
return _obj
}
Per fare riferimento ai dati del componente, è necessario crearne un'istanza. Per esempio,
var myComponentInstance = new Component();
Per recuperare i dettagli dai dati, dobbiamo fare la stessa cosa che abbiamo fatto con il componente principale sopra. Per esempio.
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);
Di seguito sono riportati i dettagli visualizzati nel browser.
Props- Il tipo di oggetti di scena è un array di stringhe o oggetti. Richiede una sintassi basata su array o su oggetti. Si dice che siano attributi utilizzati per accettare dati dal componente genitore.
Esempio 1
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
Esempio 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 - Viene utilizzato per i test unitari.
Type- array di stringhe. Ad esempio, {[key: string]: any}. Deve essere passato durante la creazione dell'istanza di Vue.
Esempio
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})
Computed- Tipo: {[key: string]: Function | {get: Function, set: Function}}
Esempio
<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>
Calcolato ha due funzioni aSum e aSquare.
La funzione aSum restituisce solo this.a+2. Funzione aSquare ancora due funzioniget e set.
La variabile vm è un'istanza di Vue e chiama aSquare e aSum. Anche vm.aSquare = 3 chiama la funzione set da aSquare e vm.aSquare chiama la funzione get. Possiamo controllare l'output nel browser che assomiglia allo screenshot seguente.
Methods- I metodi devono essere inclusi con l'istanza di Vue come mostrato nel codice seguente. Possiamo accedere alla funzione utilizzando l'oggetto 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>
I metodi fanno parte del costruttore Vue. Facciamo una chiamata al metodo utilizzando l'oggetto Vuevm.asquare (), Il valore della proprietà a è aggiornato nel asquarefunzione. Il valore di a viene modificato da 1 a 25 e lo stesso si vede riflesso nella seguente console del browser.