Vue.js es un marco progresivo para crear interfaces de usuario. La biblioteca principal se centra solo en la capa de visualización y es fácil de seleccionar e integrar con otras bibliotecas. Vue también es perfectamente capaz de impulsar sofisticadas aplicaciones de una sola página en combinación con herramientas modernas y bibliotecas de soporte.
La directiva v-model hace que el enlace bidireccional entre la entrada de un formulario y el estado de la aplicación sea muy fácil de implementar. Se puede vincular un elemento de entrada de formulario y hacer que cambie la propiedad de datos de Vue cuando cambia el contenido del campo. Estos conceptos se pueden utilizar en aquellos casos en los que, de acuerdo con el valor de un campo, también queremos actualizar algunos otros valores de campo. Después de actualizaciones recientes, v-model también se puede usar en los componentes secundarios, lo que ayuda a los desarrolladores a crear entradas reutilizables con comportamientos completamente diferentes. Los siguientes ejemplos demuestran este concepto.
Ejemplo 1:
Nombre de archivo- index.html:
HTML
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
<div id='parent'>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Two Way Data Binding</h3>
<p><Strong>{{text}}</Strong></p>
<input v-model="text">
</div>
<script src='app.js'></script>
</body>
</html>
Nombre de archivo- app.js:
Javascript
const parent = new Vue({
el : '#parent',
data : {
text : "Hi"
}
})
Producción:
Ejemplo 2:
Nombre de archivo- index.html:
HTML
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
<div id='parent'>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Sex : </strong>
<input type="radio" id="m" value="male"
v-model="sex">
<label for="male">Male</label>
<input type="radio" id="f" value="female"
v-model="sex">
<label for="female">Female</label>
<input type="radio" id="b" value="bi-sexual"
v-model="sex">
<label for="bi-sexual">Bisexual</label>
<p><strong>Your Sex: </strong>{{ sex }}</p>
</div>
<script src='app.js'></script>
</body>
</html>
Nombre de archivo- app.js:
Javascript
const parent = new Vue({
el : '#parent',
data : {
address:''
}
})
Producción:
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA