{"id":8,"date":"2021-07-10T02:01:33","date_gmt":"2021-07-10T02:01:33","guid":{"rendered":"https:\/\/e-icus.net\/blog\/?p=8"},"modified":"2021-07-10T15:04:38","modified_gmt":"2021-07-10T15:04:38","slug":"vue-js-guia-rapida","status":"publish","type":"post","link":"https:\/\/e-icus.net\/blog\/2021\/07\/10\/vue-js-guia-rapida\/","title":{"rendered":"Vue.js gu\u00eda r\u00e1pida"},"content":{"rendered":"\n

1. Instalar vue cli<\/h4>\n\n\n\n
npm install -g @vue\/cli<\/code><\/pre><\/div>\n\n\n\n
2. Crear un proyecto<\/h4>\n\n\n\n
vue create hello-world<\/code><\/pre><\/div>\n\n\n\n
Una vez creado el proyecto entrar al directorio y correr el servidor con el comando <\/p>\n\n\n\n
npm run serve<\/code><\/pre><\/div>\n\n\n\n
Tambi\u00e9n puedes crear un proyecto seleccionando de manera manual las opciones,  selecciona babel y la versi\u00f3n 3 de vue.js<\/p>\n\n\n\n
3. Componentes<\/h4>\n\n\n\n
Crea un archivo dentro del directorio components, es importante que los archivos inicien con una letra en may\u00fascula y tengan la extensi\u00f3n \u00ab.vue\u00bb, cada componente tiene 3 elementos: template, script y style.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
<template>\n  <h1>El t\u00edtulo de mi componente<\/h1>\n  <p>{{texto}}<\/p>\n<\/template>\n\n<script>\nexport default {\n    name:'Titulo',\n    props : {\n        texto:String\n    }\n}\n<\/script>\n\n<style>\n\n<\/style>\n<\/code><\/pre><\/div>\n\n\n\n
\n
<template>\n  <img alt="Vue logo" src=".\/assets\/logo.png">\n  <titulo texto = "El t\u00edtulo desde props"\/>\n<\/template>\n\n<script>\nimport Titulo from '.\/components\/Titulo.vue'\n\nexport default {\n  name: 'App',\n  components: {\n    Titulo\n  }\n}\n<\/script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n<\/style>\n<\/code><\/pre><\/div>\n\n\n\n
Props<\/h4>\n\n\n\n
Permiten enlazar datos entre componentes<\/p>\n\n\n\n
Custom Events<\/h4>\n\n\n\n
Cuando un componente hijo desea modificar alg\u00fan dato del elemento padre, se emite un evento que se encuentra previamente configurado en el evento padre.<\/p>\n\n\n\n
<template>\n  <h1>Cuenta de {{ cuentaHabiente}}<\/h1>\n  {{saldo}}\n  <div v-for="(servicios, index) in servicios" :key="index">\n      {{servicios}}\n  <\/div>\n  <accion-saldo \n        texto="Aumentar Saldo"\n        @accion="aumentar()"\n        \n        \/>\n  <accion-saldo \n        texto="Disminuir Saldo"\n         @accion="disminuir()"\n         :desactivar="desactivar"\n    \/>   \n<\/template>\n\n<script>\nimport AccionSaldo from ".\/AccionSaldo.vue"\n\nexport default {\n    components: {AccionSaldo},\n    data() {\n        return {\n            saldo: 50,\n            tipo:"Visa",\n            estado: true,\n            desactivar:false,\n            servicios: ['transferencias','abonos','pagos']\n        }\n    },\n    props:{\n        cuentaHabiente:String\n    },\n    methods:{\n        aumentar(){\n            this.saldo = this.saldo + 10\n        },\n        disminuir(){\n            \n            if(this.saldo > 0 ){\n                this.saldo = this.saldo-10\n            }\n            else{\n                this.desactivar=true\n            }\n        }\n    }\n}\n<\/script>\n\n<style>\n\n<\/style><\/code><\/pre><\/div>\n<\/div><\/div>\n\n\n\n
<template>\n    <button @click="accion" :disabled="desactivar">{{texto}}<\/button>\n<\/template>\n\n<script>\nexport default {\n    props:{\n        texto:String,\n        desactivar : Boolean\n    },\n    methods:{\n        accion(){\n            this.$emit('accion')\n        }\n    }\n}\n<\/script>\n\n<style>\n\n<\/style><\/code><\/pre><\/div>\n\n\n\n
Compilar el proyecto<\/h4>\n\n\n\n
npm run build\n<\/code><\/pre><\/div>\n\n\n\n
Ciclo de vida de vue<\/h2>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Plugins \u00fatiles en visual studio code<\/h2>\n\n\n\n
<\/p>\n\n\n\n
Vetur<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Visual VSCode Snippets<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
1. Instalar vue cli 2. Crear un proyecto Una vez creado el proyecto entrar al directorio y correr el servidor con el comando Tambi\u00e9n puedes crear un proyecto seleccionando de manera manual las opciones, selecciona babel y la versi\u00f3n 3 de vue.js 3. Componentes Crea un archivo dentro del directorio components, es importante que los… Seguir leyendo Vue.js gu\u00eda r\u00e1pida<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[3],"class_list":["post-8","post","type-post","status-publish","format-standard","hentry","category-vue","tag-vue-js","entry"],"_links":{"self":[{"href":"https:\/\/e-icus.net\/blog\/wp-json\/wp\/v2\/posts\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-icus.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-icus.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-icus.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-icus.net\/blog\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":16,"href":"https:\/\/e-icus.net\/blog\/wp-json\/wp\/v2\/posts\/8\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/e-icus.net\/blog\/wp-json\/wp\/v2\/posts\/8\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/e-icus.net\/blog\/wp-json\/wp\/v2\/media?parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-icus.net\/blog\/wp-json\/wp\/v2\/categories?post=8"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-icus.net\/blog\/wp-json\/wp\/v2\/tags?post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}