VueJS e Anotações

//data: {},

 //computed: {},

 //method: {}, 

//watch: {}, //monitora tudo de algum elemento 

//components: {}

//diretivas

//v-on:click="função" 

//v-model="nome" <<< puxa o nome do view para o model 

//v-for="(comment, index) in allComments" :key"comment.id"

//v-html = v-about é para quando contém elemento de html

//v-show 

//v-cloack 

//v-if="comments.length <=0" 

//v-else //v-bind:key 

 //INSTALANDO VUEJS 

//npm install -g @vue/cli 

//node install 

//vue ui

//criar novo projeto, configuração coloque como npm e depois config padrão 

//cd vuejs-cli 

//npm run serve 

ouuu

//npm run serve -- --port 3000

//localhost:8080

//single file component 

//app.vue base do arquivo {/* */}

//vue create nome-doprojeto

//default

//DEPENDENCIAS UTEIS

AXIOS = para auxiliar no connect da api

npm install axios

criar pasta services no src e dentro dela criar um arquivo api.js dentro dele >>

//CONFIGURANDO AXIOS

import axios from 'axios';

const api = axios.create({

    baseURL:'https://raw.githubusercontent.com/william-costa/wdev-mock-site-resources/master/api',

});

export default api;

vue-ROUTER = gerenciar rotas de arquivos

npm install vue-router

criar pasta routes no src e dentro dela criar um arquivo routes.js

import Vue from "vue";

import VueRouter from "vue-router";

Vue.use(VueRouter);

import Home from '@/pages/Home';

import Videos from '@/pages/Videos';

const routes = [

    {

        path:'/',

        component:Home

    },

    {

        path:'/videos',

        component:Videos

    }

];

const router = new VueRouter ({

    routes,

    //permite mostrar as rotas exemplo site/categoria/produto.js

    mode:'history'

});

export default router;

//-!important --// Sempre adicionar no array a nova página e sempre lembrar de importar o caminho

após isso importar o router  no main.js:

import router from "./routes/router.js";

depois add o router no new vue:

new Vue({

  router,

  render: h => h(App),

}).$mount('#app')

add no app.js para chamar a home

<template>

  <div id="app">

   

    <Header />

    <router-view path="$router.key" />

    <Footer />

  </div>

</template>

https://github.com/william-costa/wdev-mock-site-resources https://www.youtube.com/watch?v=kmsM_hHrDHE