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
Codigo en github.com: https://github.com/programadornovato/vuejs
Codigo en codepen.io: https://codepen.io/programadornovato/pen/QRrBQN
Video
Ave que vuela, a la cazuela.