08.-Vue js 2 tutorial espa帽ol 馃憖 [Componentes]馃憖馃憖


Introducci贸n

En este tutorial vamos a trabajar con los poderosos componentes y lo no digo yo lo dice VueJS aqu铆 y es verdad porque nos ayuda a encapsular c贸digo y hacerlo reutilizable y no se imaginan lo facil eficiente y bonitos que hace vue para encapsular el c贸digo en componentes.

Codigo

tuto8.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Vuejs</title>
  </head>
  <body>
    <div id="elemento">
        <div>
            <h1>{{numero}}</h1>
            <button @click="numero++">+</button>
        </div>    
        <componente></componente>
        <componente></componente>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="componente.js"></script>
  <script>
    const con=new Vue({
      el:"#elemento",
      data:{
        numero:0
      }
    });
  </script>
</html>

componente.js

Vue.component('componente',{
    template: //html
    `        
    <div>
        <h1>{{numero}}</h1>
        <button @click="numero++">+</button>
    </div>    
    `,data(){
        return{
            numero:0
        }
    }
});

Colorear c贸digo dentro de un string: es6-string-html
https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html


Video






Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 馃摗

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04