Crea tu propio miniframework: MiniVue

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)

Tremendo, Sam! sos un crac!

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