A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Interpolaci贸n de datos 2

6/23
Recursos

Aportes 6

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Por si alguien no las encuentra en su teclado:

``

Dudas sobre el concepto de reactividad ?

Os dejo esta clase que aborda este tema 馃槂

https://platzi.com/clases/2239-frameworks-javascript/36155-que-es-reactividad/

Algo muy genial de Vue es que tambi茅n puedes crear tus propias directivas con un poco de c贸digo.

Esto te da much铆sima flexibilidad y te permite que extiendas tus componentes de formas muy intuitivas, ya que gracias a las directivas personalizadas, es posible que accedas de forma f谩cil a los elementos del DOM y les des la funcionalidad o caracter铆sticas que desees.

Una peque帽a introducci贸n a custom directives: https://vuejs.org/guide/reusability/custom-directives.html

v-once

Las directivas son tags de HTML que permiten que los valores de las etiquetas en el DOM cambien. dinamicamente. ejemplos son:

v-text=鈥榯ext鈥 --> a帽ade texto al elemento html o componente, este escucha cambios en la variable text.

v-once 鈥 > permite que no se modifique el valor de un elemento, guarda el valor con el que se renderiza la primera vez.

v-html =鈥渢ext鈥 鈥> permite leer en las variables los tags o elementos de html que esten en la variable text, de lo contrario tomara estos tags o elemntos como texto(string). **Por seguridad nunca usar v-html para hacer formularios (inputs) de usarios. **


// Ejemplo v-once con v-text

<body>
    <script src="https://unpkg.com/[email protected]"></script>
    <div id="app">{{ text }}</div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    text: "Hola vue"
                };
            },
        template:` <div v-once v-text="text"></div>`
        }).mount("#app");
        console.log(vm);
    </script>
</body>

// Ejemplo v-html

<body>
    <script src="https://unpkg.com/[email protected]"></script>
    <div id="app">{{ text }}</div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    text: <p>Hola vue</p>
                };
            },
        template:` <div v-html="text"></div>`
        }).mount("#app");
        console.log(vm);
    </script>
</body>