No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Data Binding

14/53
Recursos

Data Binding implica que podamos enlazar datos desde nuestra vista a nuestro c贸digo y desde nuestro c贸digo a nuestra vista. Esto quiere decir que cada vez que algo se cambie en el c贸digo, va a reflejarse autom谩ticamente en la vista, gracias al concepto de reactividad, pero tambi茅n cada vez que el usuario busca alg煤n dato en un campo de texto o interactue con otros sitios a trav茅s de eventos tambi茅n vamos a poder ver reflejados esos cambios en el c贸digo.

Aportes 9

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

S a煤n no te qued贸 muy claro la diferencia entre

v-bind
v-model

lo principal a tener en cuenta es que el v-bind es one-way data binding, as铆 c贸mo el prof lo explic贸 desde el modelo podemos reflejar al DOM,

El v-model es two-way data binding no s贸lo podemos podemos reflejar al dom sino que del DOM reflejar en el modelo.

Tal c贸mo lo hizo el prof con la propiedad name obtuvo lo que se escrib铆a del input, pero esta misma propiedad name la utiliz贸 para renderizar ese mismo contenido que estaba escribiendo en el input al parrafo

To Way Data Binding, una de las cosas que hacen a Vue, esto enlaza la vista con el c贸digo, y a medida que cambias el input, el valor enlazado tambi茅n va cambiando, es una de las cosas que me hacen amar a Vue 鉂わ笍

Bind (enlazar). en Vue un enlace es mutuo. Si algo se cambia desde el c贸digo se ve reflejado en la vista y si se cambia la vista se ver谩 reflejado en el c贸digo.

El poder de la re actividad con vue es totalmente incre铆ble, en especial por el sincronismo que nos provee el Data Binding con muchos componentes de HTML con directivas y expresiones tan simples como estas:

<template lang="pug">
  #app
    input(v-model="name")
    label {{ name }}
    a(:href="name") Link
</template>

consulta, cuando le paso de manera dinamica una imagen a variable 鈥減oster鈥 este genera error ([Vue warn]: Error in render: 鈥淓rror: Cannot find module 鈥./鈥.鈥) de iagual forma src . Si me funciona bien con la etiqueta img ahi si no tengo ningun problema, espero que me puedan ayudar. Agradezco de antemano.
<video v-bind:poster=鈥渞equire(@/assets/${arreceta[0].poster})鈥 controls=鈥渃ontrols鈥 width=鈥100%鈥 height=鈥100%鈥>
<source src="@/assets/video2.mp4" type=鈥渧ideo/mp4鈥/>
</video>

Data Binding, implica que podamos enlazar datos desde nuestra vista a nuestro c贸digo y desde nuestro c贸digo a nuestra vista. esto nos permite capturar la interaccion del usuario con la UI.

<template lang='pug'>
  #app
    img(src='./assets/logo.png')
    h1 Calculador de edad
    input(v-model="age")
    p La edad es:
    h1 {{ fullName }}
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      age: ''
    }
  },
  computed: {
    fullName () {
      return 2019 - this.age
    }
  }
}
</script>
<style lang='scss'>
@import './scss/main.scss'
</style>

Hola , alguien me podr铆a ayudar a resolver este error por favor:
estoy usando
input(v-model=鈥渘ame鈥)

y me sale el siguiente error

gracias

La directiva v-model permite interactuar el dom con el codigo directamente asignando datos entre si.