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 representación declarativa en Vue nos permite representar datos en el DOM utilizando una sintaxis de plantilla sencilla. Las llaves dobles se utilizan como marcadores de posición para interpolar los datos requeridos en el DOM.
Los siguientes ejemplos demuestran la representación declarativa en Vue.js:
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'>
<h3>
Welcome to the exciting world of {{name}}
</h3>
<script src='app.js'>
</script>
</div>
</body>
</html>
Nombre de archivo: app.js
Javascript
const parent = new Vue({
el : '#parent',
data : {
// The data that will be
// interpolated in the DOM
name : 'Vue.Js'
}
})
Producción:
Representación declarativa
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'>
<h3>
Different Frameworks and
Libraries in Javascript
</h3>
<ul>
<li>
<strong>{{priority1}}</strong>
is Awesome
</li>
<li>
<strong>{{priority2}}</strong>
is quite good
</li>
<li>
<strong>{{priority3}}</strong>
is good too
</li>
</ul>
<script src='app.js'></script>
</div>
</body>
</html>
Nombre de archivo: app.js
Javascript
const parent = new Vue({
el : '#parent',
data : {
// The data that will be
// interpolated in the DOM
priority1: "vue.js",
priority2: "React.js",
priority3: "Angular.js"
}
})
Producción:
Representación declarativa
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