No tienes acceso a esta clase

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

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?

o inicia sesi贸n.

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

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.
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

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 馃槷

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)

  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);
    }
};