VueJS - Instancias
Para comenzar con VueJS, necesitamos crear la instancia de Vue, que se llama root Vue Instance.
Sintaxis
var app = new Vue({
// options
})Veamos un ejemplo para entender qué debe ser parte del constructor de 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;
}
}
})Para Vue, hay un parámetro llamado el. Toma la identificación del elemento DOM. En el ejemplo anterior, tenemos el id#vue_det. Es el id del elemento div, que está presente en .html.
<div id = "vue_det"></div>Ahora, cualquier cosa que vayamos a hacer afectará al elemento div y nada fuera de él.
A continuación, hemos definido el objeto de datos. Tiene valor nombre, apellido y dirección.
Lo mismo se asigna dentro del div. Por ejemplo,
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>El valor de Firstname: {{firstname}} será reemplazado dentro de la interpolación, es decir, {{}} con el valor asignado en el objeto de datos, es decir, Ria. Lo mismo ocurre con el apellido.
A continuación, tenemos métodos en los que hemos definido una función mydetails y un valor de retorno. Se asigna dentro del div como
<h1>{{mydetails()}}</h1>Por lo tanto, dentro de {{}} se llama a la función mydetails. El valor devuelto en la instancia de Vue se imprimirá dentro de {{}}. Verifique la salida como referencia.
Salida
Ahora, debemos pasar opciones al constructor de Vue, que son principalmente datos, plantilla, elemento para montar, métodos, devoluciones de llamada, etc.
Echemos un vistazo a las opciones que se pasarán al Vue.
#data- Este tipo de datos puede ser un objeto o una función. Vue convierte sus propiedades en getters / setters para hacerlo reactivo.
Echemos un vistazo a cómo se pasan los datos en las opciones.
Ejemplo
<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>Salida
console.log(vm.fname); // imprime Raj
console.log(vm.$data); imprime el objeto completo como se muestra arriba
console.log(vm.$data.fname); // imprime Raj
Si hay un componente, el objeto de datos debe referirse desde una función como se muestra en el siguiente código.
<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>En el caso de un componente, los datos son una función, que se usa con Vue.extend como se muestra arriba. Los datos son una función. Por ejemplo,
data: function () {
return _obj
}Para hacer referencia a los datos del componente, necesitamos crear una instancia del mismo. Por ejemplo,
var myComponentInstance = new Component();Para obtener los detalles de los datos, debemos hacer lo mismo que hicimos con el componente principal anterior. Por ejemplo.
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);A continuación se muestran los detalles que se muestran en el navegador.
Props- El tipo de accesorios es una matriz de cadena u objeto. Toma una sintaxis basada en matrices o basada en objetos. Se dice que son atributos que se utilizan para aceptar datos del componente principal.
Ejemplo 1
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})Ejemplo 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 - Se utiliza para pruebas unitarias.
Type- matriz de cadena. Por ejemplo, {[key: string]: any}. Debe pasarse durante la creación de la instancia de Vue.
Ejemplo
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})Computed- Tipo: {[clave: cadena]: Función | {get: Function, set: Function}}
Ejemplo
<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>Computado tiene dos funciones aSum y aSquare.
La función aSum acaba de regresar this.a+2. Función aSquare de nuevo dos funcionesget y set.
La variable vm es una instancia de Vue y llama aSquare y aSum. También vm.aSquare = 3 llama a la función set desde aSquare y vm.aSquare llama a la función get. Podemos comprobar la salida en el navegador que se parece a la siguiente captura de pantalla.
Methods- Los métodos deben incluirse con la instancia de Vue como se muestra en el siguiente código. Podemos acceder a la función usando el objeto 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>Los métodos son parte del constructor de Vue. Hagamos una llamada al método usando el objeto Vuevm.asquare (), El valor de la propiedad a se actualiza en el asquarefunción. El valor de a se cambia de 1 a 25, y lo mismo se ve reflejado en la siguiente consola del navegador.
