Una aplicación Vue.js comienza con una instancia de Vue. El objeto de instancias es el objeto principal de nuestra aplicación Vue. Nos ayuda a usar componentes Vue en nuestra aplicación. Una instancia de Vue usa el patrón MVVM (Model-View-View-Model). El constructor de Vue acepta un solo objeto de JavaScript llamado objeto de opciones. Cuando crea una instancia de Vue, debe pasar un objeto de opciones que puede contener opciones para datos, métodos, elementos, plantillas, etc.
Sintaxis:
var app = new Vue({
// options
});
Enfoque: primero, necesitamos crear un objeto para usar Vue y asignarlo a la aplicación variable. En Vue, hay un parámetro llamado el que toma la identificación del elemento DOM. Entonces crearemos un elemento div con id como home . Los elementos de Vue funcionarán solo dentro de esta identificación (#home). Podemos asignar valores de parámetros dentro de este objeto de datos.
En los siguientes ejemplos, usamos Vue.js para mostrar el funcionamiento de las instancias.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue">
</script>
</head>
<body>
<div style="text-align: center;" id="home">
<!-- Rendering data to DOM -->
<h1 style="color: seagreen;">{{title}}</h1>
<h2>Title : {{name}}</h2>
<h2>Topic : {{topic}}</h2>
</div>
<script type="text/javascript">
// Creating Vue Instance
var app = new Vue({
// Assigning id of DOM in parameter
el: '#home',
// Assigning values of parameters
data: {
title: "Geeks for Geeks",
name: "Vue.js",
topic: "Instances"
}
});
</script>
</body>
</html>
Producción:
Aplicación Vue
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue">
</script>
</head>
<body>
<div style="text-align: center;" id="home">
<!-- Rendering data to DOM -->
<h1 style="color: seagreen;">
{{title}}
</h1>
<h1>Enter first name :
<input type="text" id="firstname">
</h1>
<h1>Enter last name :
<input type="text" id="lastname">
</h1>
<button @click="fullname()">Click</button>
<h2 id="full_name"></h2>
</div>
</body>
<script type="text/javascript">
// Creating Vue Instance
var app = new Vue({
// Setting id of DOM in parameter
el: '#home',
// Passing datas
data: {
title: "Geeks for geeks",
},
methods: {
fullname: function () {
// Getting values from inputs
var first_name = document
.getElementById("firstname").value
var last_name = document
.getElementById("lastname").value
// Setting text in element
document.getElementById("full_name")
.innerHTML = "Hi, " + first_name
+ " " + last_name
}
}
});
</script>
</html>
Producción:
