No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

12 Días
23 Hrs
38 Min
16 Seg

Crea tu propio miniframework: MiniVue

8/37
Recursos

Aportes 15

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En este caso, simplemente se crea un objeto que va a retornar todos los métodos que necesitamos de nuestro mini framework, mediante el destructuring de JavaScript, en el index.html, estamos llamando al método createApp(), dicho método está dentro del objeto Platzi (Por eso usamos el destructuring al importar la fucnión en el index.html)
.
El mount es quien se encarga de pintar todo en el documento, mediante el querySlectorAll (recuerden que aquí funcionan los selectores de CSS) es como seleccionamos a todos los elementos que tengan el atributo p-text, en CSS al poner algo entre corchetes hace referencia a que va a seleccionar por atributos, por eso encerramos entre corchetes el [p-text], el asterisco es para decir que puede ser cualquier etiqueta, aunque realmente podríamos prescindir de él.
.
Por último, con getAttribute obtenemos el valor de dicho atributo, y el valor de ese atributo va a ser el nombre de la propiedad que esté dentro del objeto que retorna data() porque es el valor que queremos enlazar. Simplemente con el innerText metemos ese nombre. 👀
.
Iré creando commits en mi repositorio por si quieren ir viendo el código de cada clase:

https://github.com/RetaxMaster/mini-vue/tree/3ae74210698d150317999adb96b1b252f6551ed4

Ojala Samuel hubiera aumentado el tamaño del texto ya que para las personas con dos monitores es super sencillo ponerlo en pantalla completa y se ve bien pero con una sola pantalla lo normal es poner a un lado el video y a otro el codigo para poder escribir mientras samuel escribe pero es casi imposible ver la letra y toca detenerse y poner el video en pantalla completa para debuggear typos

God! Creo que me acaba de explotar el cerebro. Así como cuando crees que sabes JS y BOOM! Aprendes una cosa superloca y cool. Personalmente me tomo un buen rato entender la función pText(…) especialmente por los parámetros que recibe.
Excelente clase! Muchas gracias Samuel!

El curso se ve bien pero cada vez me molesta más que es casi imposible ver las letras en el video

con el query selector busca a todo lo que tenga p-text para recorrerlo cada uno y ejecutar la funcion que le inserta texto de acuerdo al target(data), y nombre (message)

En resumen, el ejercicio lo que hace es: 1\. Instanciar una clase JS y pasarle un obj con atributos: valor (Informacion De Origen que deseamos aisgnar al DOM). 2\. Dentro de la clase se estructura la misma con sus propiedades privadas y sus métodos. 3\. El método Mount(): Realiza un recorrido por todos los elementos DOM que tengan el atributo "p-text" y sobre cada uno llama a una funcion para setear la data del objeto OrigenData enviado. 4\. La funcion pText: recibe el elemento dom al que se le va asignar el texto, la fuente de la data enviada por nosotros y el nombre de la propiedad de este ultimo objeto, asignando asi al span p-text:"message" el valor el obj origen{ propiedad: valor. Nota: Para el entendimiento del código, pos escritura, es muy importante usar nomenclatura que oriente al lector, por ejemplo: pText debió haber sido configurada como setText por ejemplo, asi sabiamos que es una funcion de seteo, igual que sus parametros: (Elemento, ObjOrigenInfo, PropiedadNombre), esto facilitaria al estudiante una mejor comprensión. Salu2

Tremendo, Sam! sos un crac!

Igualmente, el profe debió haber hecho uso de CTRL + "+" sobre el VSCode para aprovechar mejor el espacio de trabajo grabado para el curso.

Es complicado entender este tema y el profesor no ayuda a hacerlo más fácil, hay que dejarle estos temas complicados a quienes tengan una buena vocación de enseñanza.

Gracias, muy buena explicación

PREGUNTA: como hago para usar el comando
npx http-server .

después q ya lo instale. es decir, para q cada vez q vaya a montar el servidor no tener q instalarlo de nuevo

Wow, es como ver la creación de Vue JS, qué interesante 😮

  pText(el, target, name) {
    el.innerText = target[name];
  }
elemento.innerText = objeto[propiedad];

target = {message:"Hola Vue" }
name = "message" 

Buenas, a mi no me funcionaba el ejemplo porque nadie está llamando al método mount(), no se si es cosa de mi navegador o algo así, lo solucioné añadiendo la llamda en el constructor:

constructor(options) {
    this.origen = options.data()
    this.mount()
}

Vue

class VueReactive{
    constructor(options){
        this.origen = options.data();
    }

    mount(){
        document.querySelectorAll("*[v-text]").forEach(el =>{
            this.vText(el, this.origen, el.getAttribute("v-text"))
        })
    }

    vText(el, target, name){
        el.innerText = target[name];
    }
    
    vModel(){}
}

var Vue = {
    createApp(options){
        return new VueReactive(options);
    }
};