¿Qué es Vue.js?
Vue.js le permite extender HTML con atributos HTML llamados directivas
Las directivas de Vue.js ofrecen funcionalidad a las aplicaciones HTML
Vue.js proporciona directivas integradas y directivas definidas por el usuario
Directivas de Vue.js
Vue.js usa llaves dobles {{ }}como marcadores de posición para los datos.
Las directivas de Vue.js son atributos HTML con el prefijov-
Vista de ejemplo
En el siguiente ejemplo, se crea un nuevo objeto Vue con new Vue() .
La propiedad el: vincula el nuevo objeto Vue al elemento HTML con id="app" .
Ejemplo
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Enlace Vue.js
Cuando un objeto Vue está vinculado a un elemento HTML, el elemento HTML cambiará cuando cambie el objeto Vue:
Ejemplo
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Enlace bidireccional de Vue.js
La v-modeldirectiva vincula el valor de los elementos HTML a los datos de la aplicación.
Esto se llama enlace bidireccional:
Ejemplo
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Enlace de bucle Vue.js
Usando la v-fordirectiva para vincular una matriz de objetos Vue a una "matriz" de elemento HTML:
Ejemplo
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>