.Net Core - Vue.js - Two Way Data Binding

Nesta aula iremos aprender como fazer o binding de dados gerenciando o escopo de clientes em nossa aplicação, também iremos trabalhar com rotas, deixando nossa aplicação mais organizada.

Vamos separar essa aula em duas partes: primeiro vamos utilizar o conceito do TWO WAY DATA BINDING. Basicamente o que precisamos fazer é colocar no atributo do HTML a propriedade chamada v-model, ou seja, é muito parecido com ng-model que utilizei com vocês criando aplicação em angular.

Quando declaramos o v-model toda alteração feita diretamente no input já é refletido no objeto que você declarou o escopo seja essa propriedade de um objeto ou seja de uma variável.

Fazendo isso temos um ciclo de manutenção de dados da variável que tem no seu escopo muito melhor, evitando alterar no post ou capturar esses dados através do getElementByID.

Preenchendo esses dados do seu objeto de escopo, não é necessário fazer essa manutenção de escopo de forma manual.

Vamos resolver essa refatoração na aula de hoje, removendo alguns dados que não vamos precisar.

Iremos ver também como criar as rotas da nossa aplicação de forma muito parecida com uma aplicação monolítica, onde quando criamos uma aplicação monolitica são definidas as rotas necessárias para acessar cada página.

No input, vamos inserir o atributo v-model, atribuindo o objeto cliente e o nome da propriedade.

      
        v-model="cliente.nome"
        v-model="cliente.telefone"
        v-model="cliente.endereco"
       
    

      
          < form >
            < div class="form-group">
              < label for "nome"> Nome: < /label>
              < input type="hidden" id="id" name="id" >
              < input type="text" class="form-control" v-model="cliente.nome" id="nome" name="nome" placeholder="Digite o nome" >
            < /div >
            < div class="form-group">
              < label for "telefone"> Telefone: < /label>
              < input type="tel" class="form-control" v-model="cliente.telefone" id="telefone" name="telefone" placeholder="Digite o telefone">
            < /div >
            < div class="form-group">
              < label for "endereco"> Endereço: < /label>
              < input type="text" class="form-control" v-model="cliente.endereco" id="endereco" name="endereco" placeholder="Digite o endereço">
            < /div >
            < button v-on:click="salvar()" type="button" class="btn btn-default"> Enviar < /button>
            < div style="color:red" >
              {{ mensagem }}
            < /div>
          < /form>

      
    

No método salvar vamos retirar o GetElementByID e inserir o componente cliente.

      
           
        import axios from 'axios'
        
        export default{
         name: 'Clientes',
         props: {
          msg:String
         },
         data: () => {
          return {
            clientes: [],
            cliente: undefined,
            mensagem:""
          }
         },
         methods:{
          lista() => {
            this.cliente ={nome:"", telefone:"", endereco:""}
            axios.get(`https://localhost:5001/clientes`).then((res) => ){
              this.clientes = res.data
            })
          },
          salvar()=> {
            if(this.cliente.id){
              this.alterar()
              return
            }
            axios.post(`https://localhost:5001/clientes`,this.cliente).then(() => {
              this.lista()
            }),          
          editar(cliente) {
            this.cliente = cliente
          },
          alterar() {
            axios.put(`https://localhost:5001/clientes/${this.cliente.id}`,this.cliente).then(() => ){
              this.lista()
              this.cliente ={nome:"", telefone:"", endereco:""}
          })
        },
        excluir(id)=> {
          if(confirm("Confirm a exclusão?")){
            axios.delete(`https://localhost:5001/clientes/${id}`.then(() => {
              this.lista()
            })
          }
        created() {
          this.lista()
         }
        }
       
    

Inserindo rotas na aplicação.

Vamos instalar um plugin

      
       npm install --save-dev vue-router
       
    

Vamos criar um arquivo chamado Home.vue para fazermos a rota.

      
       < template>
        < div> 
        < p> Boa Vindas a aula de Vue.js < /p>
        < /div> 
       < /template>
       
    

No arquivo main.js, vamos fazer o import dos pacotes e criar as rotas.

      
        import Clientes from './components/Clientes.vue'
        import Home from './components/Home.vue'
        import Sobre from './components/Sobre.vue'
        import VueRouter from "vue-router"

        Vue.use(VueRouter)

        const routes = [
          {path: "/",component:Home},
          {path: "/clientes",component:Clientes},
          {path: "/sobre",component:Sobre},
        ]
        const router = new VueRouter ({
          routes: routes,
          mode: history
        })

        new Vue ({
          router,
          render: h => h(App),
        }).$mounth('#app')
       
    

No arquivo App.vue, vamos criar um menu com a tag nav, para chamar as rotas com o link chamado router-link

      
        < router-link to="/" class="p-2" text-muted> Home < /router-link>
        < router-link to="/clientes" class="p-2" text-muted> Clientes < /router-link>
        < router-link to="/sobre" class="p-2" text-muted> Sobre < /router-link>