CURSO DE VUE JS 2

https://academy.especializati.com.br/curso/vuejs-2

APRENDA A CRIAR APLICAÇÕES COM O MELHOR FRAMEWORK JAVASCRIPT DA ATUALIDADE, ESTE É O FRAMEWORK JS QUE MAIS CRESCE, TUDO POR CONTA DA SIMPLICIDADE E RECURSOS AVANÇADOS.

Índice

1. 01 - Organização do Curso de Vue JS
2. 02 - Data Binding Vue JS
3. 03 - Events
4. 04 - Propriedades e Style
5. 05 - Condições e Loops
6. 06 - Jogo
7. 07 - Components
8. 08 - Vue CLI com Webpack
9. 09 - Formulários e Validação
10. 10 - Avançando com components
11. 11 - Vue router
12. 12 - Animations e Transactions
13. 13 - Vue http
14. 14 - Vuex
15. 15 - Axios

---

1 - 01 - Organização do Curso de Vue JS

• 01 - O que é o Vue JS

  • https://vuejs.org/v2/guide/

• 02 - Ferramentas Necessárias Curso de Vue JS

  • Visual Studio Code: https://code.visualstudio.com/
  • Chrome: https://www.google.com.br/chrome/browser/desktop/index.html
  • Git: https://git-scm.com/
  • Cmder: http://cmder.net/
  • Vue DevTools: https://github.com/vuejs/vue-devtools
  • NodeJS: https://nodejs.org/en/

Voltar ao Índice

---

2 - 02 - Data Binding Vue JS

• 01 - Hello World em Vue JS
• 02 - Data Binding Vue JS

<div id="app">
    <h1>{{title}}</h1>
    <p>{{description}}</p>
    <p>{{isActive == true ? 'Ativo' : 'Não ativo'}}</p>
    <a v-bind:href="url" :title="title" href="">{{textAcademic}}</a>
</div>


<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: 'Hello Vue!',
            description: 'Descrição...',
            isActive: true,
            textAcademic: "Curso de Vue",
            url: "https://josemalcher.net"
        }
    })
</script>

• 03 - Two Way Data Binding Vue JS

<div id="app">
    <input type="text" placeholder="Informe algo" v-model:value="name">
    <p>{{name}}</p>
    <p>{{name}}</p>
    <p>{{name}}</p>
</div>


<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: ''
        }
    })
</script>

• 04 - Diretiva v-once Vue JS

<div id="app">
    <h1 v-once>{{name}}</h1>
    <input type="text" placeholder="texto qualquer" v-model:value="name">
    <p>{{name}}</p>
    <p>{{name}}</p>
</div>


<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: 'Nome teste'
        }
    })
</script>

• 05 - Diretiva v-html Vue JS

<div id="app">
    <h1>{{title}}</h1>
    <div v-html="description"></div>
</div>


<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: "Titulo teste",
            description: "<strong>Texto teste em negrito html</strong> texto normal"
        }
    })
</script>

Voltar ao Índice

---

3 - 03 - Events

• 01 - Eventos no Vue JS

<div id="app">
    <input type="text" v-on:keyup="count++">

    <hr>
    <button @click="count++">Incrementar</button>
    {{count}}
    <button @click="count--">Decrementar</button>

</div>



<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            count: 0
        }
    })
</script>

• ssssssss

<div id="app">

    <input type="text" @keyup="changeInput">
    <button @click="changeInputTwo(2)">Incrementar 2</button>

    <input type="text" @keyup="changeInputThree(2, $event)">

    {{count}}
</div>



<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods:{
            changeInput: function (event) {
                console.log(event.target.value)
            },
            changeInputTwo: function (value) {
                this.count += value
            },
            changeInputThree: function (value, event) {
                value += parseInt(event.target.value)
                this.count += value
            }
        }

    })
</script>

• 03 - Eventos de Teclados no Vue JS

<div id="app">
    <input type="text" @keyup.enter="changeValue" @keyup.up="changeValueUp" @blur="medhotBlur">

    {{valueText}}
</div>



<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            valueText: ''
        },
        methods:{
            changeValue(event){
                this.valueText = event.target.value
            },
            changeValueUp(event){
                alert('ALERT UP OK')
            },
            medhotBlur(event){
                console.log(event);
            },
            codTecla(event){
                console.log(event.keyCode);
            }
        }
    })
</script>

• 04 - Eventos Teclas Modificadoras no Vue JS

<div id="app">
    <!--<div @click.ctrl="testeEvent">
        Click AQUI!
    </div>-->

    <div @click.ctrl.exact="testeEvent">
        Click AQUI!
    </div>

    <div @click.ctrl.63="testeEvent">
        Click AQUI!
    </div>

    <div @click.alt="testeEvent">
        Click AQUI!
    </div>

    <div @click.shift="testeEvent">
        Click AQUI!
    </div>

    <div @click.meta="testeEvent">
        Click AQUI!
    </div>
</div>



<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {

        }, methods:{
            testeEvent(){
                alert("TESTE OK");
            }
        }
    })
</script>

• 05 - Eventos Teclas Modificadoras de Sistema

<div id="app">
    <a :href="urlLink" @click.prevent="showAlert">{{textLink}}</a>
    <hr>
    <form action="#" method="post" @submit.prevent="showAlert">
        <input type="text" placeholder="Nome">
        <button type="submit">Enviar Form</button>
    </form>
    <hr>
    <button @click.once="showAlert">Enviar Formulário</button>
</div>



<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            textLink: "Jose Malcher Jr.",
            urlLink: "https://josemalcher.net"
        }, methods:{
            showAlert(event){
                //event.preventDefault();
                alert('clicou aqui');
            }
        }
    })
</script>

• 06 - Mais Sobre Eventos no Vue JS

  • https://br.vuejs.org/v2/guide/events.html

Voltar ao Índice

---

4 - 04 - Propriedades e Style

• 01 - Propriedades Computadas vs Métodos no Vue JS

• https://vuejs.org/v2/guide/computed.html

<div id="app">
    <button @click="count++">Incrementar</button>
    <button @click="count--">Decrementar</button>
    <button @click="counttwo--">Decrementar 2</button>
    <p>{{count}} || {{countComputed}}  || {{countMethods()}} </p>
    <p>{{counttwo}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            count: 0,
            counttwo: 0
        },
        computed:{
            countComputed: function (){
                if(this.count >= 5){
                    console.log('COMPUTED');
                }
                return this.count >= 5 ? 'MAIOR que 5' : 'menor que 5';
            }
        },methods:{
            countMethods: function (){
                if(this.count >= 5){
                    console.log('METHOD');
                }
                return this.count >= 5 ? 'MAIOR que 5' : 'menor que 5';
            }
        }

    })
</script>

• 02 - (Watchers) Observadores Vue JS

• https://vuejs.org/v2/guide/computed.html#Watchers

<div id="app">
    <button @click="count++">Aumentar</button>
    <p>{{count}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            count:0
        },
        watch:{
            count: function (value) {
                var vm = this;
                setTimeout(function (){
                    vm.count = 0
                }, 3000)
            }
        }

    })
</script>

• 03 - Styles Vue JS

• https://vuejs.org/v2/guide/class-and-style.html

    <style>
        .active{
            background: green;
        }
        .no-active{
            background: red;
        }
        .default{
            color: yellow;
        }
    </style>

</head>
<body>

<div id="app">
    <div :class="{active : isActive}">
        Exemplo de Style no VUE
    </div>
    <div :class="{active : isActive}">
        Exemplo de Style no VUE
    </div>
    <div class="default" :class="isActive ? 'active': 'no-active'">
        Exemplo de Style no VUE
    </div>

    <div :class="['default', isActive ? 'active' : 'no-active']">
        Exemplo de Style no VUE with Array
    </div>

    <div :class="classObject">
        Exemplo com objeto
    </div>

    <div :style="{display: ['-webkit-flex', '-moz-flex', 'flex']}">
        Exemplo com objeto
    </div>

    <button @click="isActive = !isActive">Alternar Classe</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: false,
            classObject: {
                active: true,
                'text-red': true,
                'color-white': true
            }
        }

    })
</script>

Voltar ao Índice

---

5 - 05 - Condições e Loops

• 01 - Renderização Condicional no Vue JS (v-if, v-else-if, v-else)

• https://vuejs.org/v2/guide/conditional.html#v-if

<div id="app">
    <div v-if="number < 12">
        {{textExemplo}} = menor que 12
    </div>

    <div v-else-if="number == 20">
        igual a 20
    </div>

    <div v-else>
        Não bateu...
    </div>

    <div v-if="isActive">
        {{textExemplo}}
    </div>
    <div v-else>
        Não Ativo - v-else
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            number: 20,
            isActive: false,
            textExemplo: "Texto Data"
        }

    })
</script>

• 02 - Diretiva v-show no Vue JS

<div id="app">
    <div v-if="isActive">
        V-IF
    </div>
    <!---->

    <div v-show="isActive">
        V-SHOW
    </div>
    <!--
    <div wfd-invisible="true" style="display: none;">
        V-SHOW
    </div>
    -->

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: false

        }

    })
</script>

• 03 - Loops de Repetição no Vue JS (Diretiva v-for)

  • https://vuejs.org/v2/guide/list.html

    <style>
        .active{
            background: greenyellow;
        }
    </style>

</head>
<body>

<div id="app">
    <ul>
        <li v-for="i in 10">{{i}}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="product in products">{{product}}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="(task, index) in tasks" :class="{active: task.isActive}">
            {{index}} -> {{task.id}} - {{task.name}}
        </li>
    </ul>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            products: ['TV', 'GELADEIRA', 'MICRO-ONDAS'],
            tasks: [
                {id:1, name: 'Lavar louça', isActive: false},
                {id:2, name: 'Cortar grama', isActive: false},
                {id:3, name: 'estudar', isActive: true}
            ]
        }

    })
</script>

• 04 - Filtros no Vue JS

• https://br.vuejs.org/v2/guide/filters.html

    <style>
        .active {
            background: greenyellow;
        }
    </style>

</head>
<body>

<div id="app">
    <ul>
        <li v-for="task in tasks" :class="{active: task.completed}">
            {{task.id}} - {{task.name | toUpperCase}} - {{task.name | toLowerCase}}
        </li>
    </ul>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    Vue.filter('toLowerCase', function (val){
        return val.toLowerCase();
    })

    var app = new Vue({
        el: '#app',
        data: {
            tasks: [
                {id: 1, name: 'Lavar louça', completed: false},
                {id: 2, name: 'Cortar grama', completed: false},
                {id: 3, name: 'estudar', completed: true}
            ]
        },
        filters:{
            toUpperCase(val) {
                return val.toUpperCase()
            }
        }

    })
</script>

Voltar ao Índice

---

6 - 06 - Jogo

• 01 - Layout Jogo Vue JS

<!doctype html>
<html lang="pt_br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>06 - JOGO do 21</title>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="app">

    <div class="container text-center">
        <h1>Jogo do 21</h1>
        <div class="row">
            <div class="col-6 active">
                <img src="assets/player1.png" alt="Play 1">
                <p>player 1</p>
            </div>
            <div class="col-6">
                <img src="assets/player2.png" alt="Play 1">
                <p>player 2</p>
            </div>

            <div class="controls col">
                <a href="" class="btn btn-success">Pular</a>
                <a href="" class="btn btn-primary">Finalizar Jogo</a>
                <a href="" class="btn btn-danger">Resetar</a>
            </div>

        </div>
        <hr>
        <div class="row">
            <div class="col-6">
                <a href="">
                    <img src="assets/baralho-cartas.png" alt="" class="carts">
                </a>
            </div>
            <div class="col-6">
                <a href="">
                    <img src="assets/carts/1.png" alt="" class="cart">
                </a>
            </div>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    Vue.filter('toLowerCase', function (val){
        return val.toLowerCase();
    })

    var app = new Vue({
        el: '#app',
        data: {

        }

    })
</script>
</body>
</html>

• 02 - Ação de Pular Jogo Vue JS

<div id="app" class="container text-center">
    <h1>Jogo do 21</h1>
    <div class="row">
        <div :class="['col-6', playerActived == 1 ? 'active' : '']">
            <img src="assets/player1.png" alt="Play 1">
            <p>player 1</p>
        </div>
        <div :class="['col-6', playerActived == 2 ? 'active' : '']">
            <img src="assets/player2.png" alt="Play 1">
            <p>player 2</p>
        </div>

        <div class="controls col">
            <a href="#" class="btn btn-success" @click.prevent="changePlayer">Pular</a>
            <a href="" class="btn btn-primary">Finalizar Jogo</a>
            <a href="" class="btn btn-danger">Resetar</a>
        </div>

    </div>
    <hr>
    <div class="row">
        <div class="col-6">
            <a href="">
                <img src="assets/baralho-cartas.png" alt="" class="carts">
            </a>
        </div>
        <div class="col-6">
            <a href="">
                <img src="assets/carts/1.png" alt="" class="cart">
            </a>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    Vue.filter('toLowerCase', function (val) {
        return val.toLowerCase();
    })

    var app = new Vue({
        el: '#app',
        data: {
            playerActived: 1
        },
        methods:{
            changePlayer(){
                this.playerActived = this.playerActived == 1 ? 2 :1
            }
        }

    })
</script>

• 03 - Escolher Carta e Somar Pontos Jogo Vue JS
• 04 - Opção Finalizar Jogo e Informar Vencedor Jogo Vue JS
• 05 - Resetar Jogo Vue JS
• 06 - Melhorias e Histórico de Jogadas Jogo Vue JS

<!doctype html>
<html lang="pt_br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>06 - JOGO do 21</title>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>


<div id="app" class="container text-center">
    <h1>Jogo do 21</h1>
    <div class="row">
        <div :class="['col-6', playerActived == 1 ? 'active' : '']">
            <img src="assets/player1.png" alt="Play 1">
            <p>player 1
                <span class="badge badge-default">{{numberHistoricPlayerOne}}</span>
            </p>
            <p><strong>Pontos:</strong> {{playOne.points}}</p>
        </div>
        <div :class="['col-6', playerActived == 2 ? 'active' : '']">
            <img src="assets/player2.png" alt="Play 1">
            <p>player 2
                <span class="badge badge-default">{{numberHistoricPlayerTwo}}</span></p>
            <p><strong>Pontos:</strong> {{playTwo.points}}</p>
        </div>

        <div class="controls col">
            <a href="#" class="btn btn-success" @click.prevent="changePlayer">Pular</a>
            <a href="#" class="btn btn-primary" @click.prevent="finishGame">Finalizar Jogo</a>
            <a href="#" class="btn btn-danger" @click.prevent="resetGame">Resetar</a>
        </div>

    </div>
    <hr>
    <div class="row">
        <div class="col-6">
            <a href="#" @click.prevent="selectedCart">
                <img src="assets/baralho-cartas.png" alt="" class="carts">
            </a>
        </div>
        <div class="col-6">
            <div v-if="cartSelected != '' ">
                <img :src=" 'assets/carts/'+cartSelected+'.png' " alt="Carte" class="cart">
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    Vue.filter('toLowerCase', function (val) {
        return val.toLowerCase();
    })

    var app = new Vue({
        el: '#app',
        data: {
            playerActived: 1,
            playOne:{
                points : 0,
                historic: []
            },
            playTwo:{
                points: 0,
                historic: []
            },
            cartSelected: ''
        },
        methods:{
            changePlayer(){
                this.playerActived = this.playerActived == 1 ? 2 :1
                this.cartSelected = ''
            },
            selectedCart(){
                this.cartSelected = Math.floor((Math.random() * 13)+1)
                if(this.playerActived == 1){
                    this.playOne.points += this.cartSelected
                    this.playOne.historic.push(this.cartSelected);
                }
                if(this.playerActived == 2){
                    this.playTwo.points += this.cartSelected
                    this.playTwo.historic.push(this.cartSelected);
                }
                if (this.playOne.points >= 21 || this.playTwo.points >= 21) {
                    this.finishGame();
                }

            },
            finishGame(){
                if (this.playOne.points <= 21 && this.playOne.points > this.playTwo.points) {
                    alert("Play 1 é campeão");
                }else if(this.playTwo.points <= 21 && this.playTwo.points > this.playOne.points){
                    alert("Play 2 é campeão");
                }else if (this.playOne.points > 21) {
                    alert("Player 2 é o campeão")
                }else if(this.playTwo.points > 21){
                    alert("Player 1 é o campeão")
                }else{
                    alert("Empate");
                }

                let vm = this
                setTimeout(function (){
                    vm.resetGame();
                }, 3000)
            },
            resetGame(){
                this.playOne.points = 0
                this.playTwo.points = 0
                this.cartSelected = ''
                this.playerActived = 1
            }
        },
        computed: {
            numberHistoricPlayerOne(){
                return this.playOne.historic.length
            },
            numberHistoricPlayerTwo(){
                return this.playTwo.historic.length
            }
        }

    })
</script>
</body>
</html>

Voltar ao Índice

---

7 - 07 - Components

• 01 - Apresentação Components Vue JS

  • https://vuejs.org/v2/guide/components.html

• 02 - Components no Vue JS

<div id="app">

    <my-component></my-component>

</div>


<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    Vue.component('my-component', {
        template: `<div>
                    <p>My Component</p>
                    <child-component></child-component>
                   </div>`
    })

    Vue.component('child-component', {
        template: "<p>My CHILD Component</p>"
    })

    new Vue({
        el: "#app",
        data: {

        }
    });
</script>

Voltar ao Índice

---

8 - 08 - Vue CLI com Webpack

• 01 - Instalando Vue CLI

  • GitHub vue-cli oficial: https://github.com/vuejs/vue-cli
  • Template webpack-simple: https://github.com/vuejs-templates/webpack-simple

$ vue init webpack-simple my-project

? Project name my-project
? Project description A Vue.js project
? Author José Malcher Jr. <contato@josemalcher.net>
? License MIT
? Use sass? No

   vue-cli · Generated "my-project".

   To get started:

     cd my-project
     npm install
     npm run dev



npm run dev

• 02 - Estrutura webpack-simple Vue CLI

  • Webpack Simple: https://github.com/vuejs-templates/webpack-simple/tree/master/template
  • Webpack: https://webpack.github.io e https://webpack.js.org

• 03 - Components Vue CLI

<template>
  <div>
    <p>TESTE ok</p>
    <p>Component: </p>
    <FormComponent></FormComponent>

    <h3>{{msg}}</h3>

  </div>
</template>

<script>

import FormComponent from "./FormComponent";

export default {
  data(){
    return{
      msg: "Curso de VUE"
    }
  },
  components:{
    FormComponent
  }
}
</script>

<style scoped>
p{
  color: red;
}
</style>

<script>

import TesteComponent from './components/TesteComponent'
import FormComponent from "./components/FormComponent";


export default {
  name: 'app',
  data () {
    return {
      msg: 'OLá Mundo!'
    }
  },
  components:{
    TesteComponent,
    FormComponent
  }
}
</script>

• 04 - Component Listagem de Itens

  • https://vuejs.org/v2/guide/single-file-components.html

<template>

  <div class="comp">
    <table>
      <tr>
        <th>Nome</th>
        <th>Completa?</th>
      </tr>
      <tr v-for="(task, index) in tasks" :key="index">
        <td>{{task.name}}</td>
        <td>{{task.completed ? 'SIM' : 'NÃO'}}</td>
      </tr>
    </table>
  </div>

</template>


<script>
export default {
  data(){
    return {
      tasks: [
        {name: 'Lavar louça', completed: true},
        {name: 'Lavar Carro', completed: false},
        {name: 'Lavar bike', completed: true},
        {name: 'Lavar banheiro', completed: false},
        {name: 'Varrer casa', completed: false},

      ]
    }
  }
}
</script>

<style scoped>
  .comp{
    border: 1px solid red;
  }
</style>

Voltar ao Índice

---

9 - 09 - Formulários e Validação

• 01 - Criando Projeto Vue CLI

<template>
  <div>
    <form>
      <input type="text" placeholder="Nome">
      <hr>
      <input type="text" placeholder="E-mail">
      <hr>
      <input type="text" placeholder="Idade">
      <hr>
      <input type="radio" name="sexo" value="M"> Masculino |
      <input type="radio" name="sexo" value="F"> Feminino
      <hr>
      <select name="estado" id="estado">
        <option value="">Selecione o Estado</option>
        <option value="SP">São Paulo</option>
        <option value="RJ">Rio de Janeiri</option>
        <option value="MG">Minas Gerais</option>
      </select>
      <hr>
      <label for="agree">Concordo com os termos de uso</label>
      <input type="checkbox" id="agree">
      <hr>
      <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
      <hr>
      <button type="submit">Enviar</button>
    </form>
  </div>
</template>

<script>
export default {

}

</script>

<style scoped>

</style>

• 02 - Manipulando Formulários com Vue JS

• 03 - Textarea multiplas linhas (pre)

• 04 - Instalando e Configurando VeeValidate

  • http://vee-validate.logaretm.com/

• 05 - Validando Campos com VeeValidate

• 06 - Validar Submit com VeeValidate

Voltar ao Índice

---

10 - 10 - Avançando com components

• 01 - Comunicação entre components

• 02 - Props Vue JS

  • https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

• 03 - Props Avançado Vue JS

• 04 - Emit no Vue JS

• 05 - Emit com Parâmetros no Vue JS

• 06 - Preparando Projeto Lista de Tarefas no Vue JS

• 07 - Instalando e Configurando o Bootstrap no Vue JS

  • Bootstrap Vue: https://bootstrap-vue.js.org/

• 08 - Listagem das Tarefas com Vue JS

• 09 - Cadastrar Nova Tarefa com Vue JS

• 10 - Editar Tarefas no Vue JS

• 11 - Deletar Tarefa no Vue JS

• 12 - Filtro de Tarefas no Vue JS

• 13 - Corrigir Edição de Tarefas com Filtro

Voltar ao Índice

---

11 - 11 - Vue router

• 01 - Criando Projeto e Instalando o vue-router
• 02 - Criando os Components Para Testar Rotas no Vue JS
• 03 - Criando Rotas e Configurando no Vue JS
• 04 - Remover Hash da URL no Vue JS
• 05 - Rotas Nomeadas no Vue JS
• 06 - Rotas com Parâmetros no Vue JS
• 07 - Rotas com Props no Vue JS
• 08 - Rotas com Redirecionamento no Vue JS
• 09 - Rotas 404 no Vue JS

Voltar ao Índice

---

12 - 12 - Animations e Transactions

• 01 - Primeira Animação com o Vue JS

• 02 - Preparando Quiz de Perguntas no Vue JS

• 03 - Gerar Pergunta Quiz Dinamicamente no Vue JS

• 04 - Exibir Components Dinamicamente no Vue JS

• 05 - Exibir Components Sucesso ou Falha da Resposta

• 06 - Aplicando Rotação Dinâmica entre Components

• 07 - Adicionar o Bootstrap ao Projeto Vue JS

• 08 - Mais Sobre Animações e Transições no Vue JS

  • Documentação: https://vuejs.org/v2/guide/transitions.html
  • Diversos Exemplos de Animações e Projetos em Vue JS: https://madewithvuejs.com/

Voltar ao Índice

---

13 - 13 - Vue http

• 01 - Instalando e Configurando o Vue Resource
• 02 - Consultar CEP com AJAX no Postmon com Vue JS
• 03 - Exibir Dados Endereço Consulta Ajax com Vue JS
• 04 - Preloader Ajax no Vue JS
• 05 - Tratar Erros Ajax no Vue JS
• 06 - Preparar Projeto Consumir API Restful em Laravel com Vue JS
• 07 - Preparar Rotas no Vue JS
• 08 - Listar Itens API Restful em Laravel no Vue JS
• 09 - Preloader ao Listar dados de API Restful no Vue JS
• 10 - Paginar Registros API com Vue JS
• 11 - Paginação Avançada API com Vue JS
• 12 - Component Cadastrar Produto API com Vue JS
• 13 - Cadastrar Produto API com Vue JS
• 14 - Exibir Validações API com Vue JS
• 15 - Criar Component de Preloader no Vue JS
• 16 - Preparar Para Editar Registro API com Vue JS
• 17 - Editar Registro API com Vue JS
• 18 - Deletar Registro API com Vue JS
• 19 - Confirmar Exclusão Registro API com Vue JS
• 20 - Filtrar Registros API com Vue JS

Voltar ao Índice

---

14 - 14 - Vuex

• 01 - O que é Vuex?
• 02 - Criando Projeto e Instalando o VueRouter e Vuex
• 03 - Criando Rotas Vue
• 04 - Vuex state
• 05 - Vuex mutations
• 06 - Vuex mutations commit
• 07 - Vuex actions
• 08 - Vuex getters
• 09 - Vuex getters filters
• 10 - Organizar Projeto Vuex
• 11 - Vuex Modules

Voltar ao Índice

---

15 - 15 - Axios

• 01 - Criar Projeto Vue JS e Instalar axios
• 02 - Criar Component Busca no Vue JS
• 03 - Requisições Ajax com axios no Vue JS
• 04 - Preloader com axios no Vue JS
• 05 - DevTools Network
• 06 - Tratamento de Erros axios no Vue JS
• 07 - Reset response axios

Voltar ao Índice

---