[PT-BR] Fazendo uma todo list com VueJS.

팔라 갈레라! No primeiro artigo do ano de 2021 irei mostrar um pouco do Vue.js 3, fazendo uma todo list.


전제 조건:

Ter o Node.js pc에 설치하지 않음;

HTML, Css 및 Javascript의 기본 구성.

Para criar o projeto com vuejs já configurado precisamos do Vue CLI.

O Vue CLI é um ferramenta para auxiliar no desenvolvimento nos projetos Vue.js.

다음과 같은 설치 형식이 있습니다.

컴 npm:

npm install -g @vue/cli

Ou com 원사:

yarn global add @vue/cli

Com o Vue CLI já instalado podemos criar o nosso projeto vue.

vue create <nomedoprojeto>

Vamos nomear este projeto comotodolist-vuejs .

Quando você rodar esse comando vai aparecer essas 3 opções:



Neste artigo vamos는 Vue.js의 버전 3을 사용합니다.


Depois do Vue CLI criar o projeto, já podemos ver a estrutura de arquivos básica de um projeto vue.




No terminal se você rodar o comando:

npm run serve

오우

yarn serve

Você estará rodando localmente o projeto vue.


Para começar o projeto vamos criar a logica basica de uma todo list, adicionar uma tarefa.

No arquivo HelloWorld.vue vamos apagar todo o conteudo do bloco <template> e todo o conteudo do bloco <style>
No bloco <template vamos fazer a estrutura html do projeto:

<div class="app">
    <ol>
      <li >
        <p>Aprender Vue</p>
      </li>
    </ol>
    <div class="inputs">
      <input placeholder="Todo"/>
      <div class="buttons">
        <button >Adicionar Tarefa</button>
        <button>Remover Todas as tarefas</button>
      </div>
    </div>
  </div>

No javascript vamos implementar a logica da todo list:

내보내기 기본 vamos 추가 기능이 없는 경우data 응답은 렌더링 파일 또는 프로토타입에서 수행됩니다.

data() {
    return {
      todos: [{ id: 1, text: "Aprender VueJs" }],
    };
}

No return criamos um objeto chamadotodos que armazena as tarefas cadastradas.

Novamente no export default vamos adicionar um objeto chamado methods :

methods: {

},

Nele vamos criar os métodos da aplicação como remover tarefas e adicionar tarefas.

Vamos criar o nosso primeiro metodo o de adicionar tarefas:

addTodo(text) {
    if (text !== " ") {
        this.todos.push({
           id: this.todos.length + 1,
           text,
        });
    }
}

제거제 제거제:

removeTodos() {
      this.todos = [];
},

Para fazer tudo funcionar vamos adicionar atributos nas tags html:

No li vamos adicionar um atributo para renderizar todas as tarefas cadastradas, com o v-for:

<ol>
    <li v-for="todo in todos" v-bind:key="todo.id">
        <p>{{ todo.text }}</p>
    </li>
</ol>

O v-bind:key="todo.id" é para cada li tem um id unico.

O {{ todo.text }} vai fazer o <p></p> renderizar o texto da tarefa.


Vamos fazer a logica de adicionar tarefas no html com os atributos v-model e v-on:click :

<div class="inputs">
      <input placeholder="Todo" v-model="text" />
      <div class="buttons">
        <button v-on:click="addTodo(text)">Adicionar Tarefa</button>
        <button v-on:click="removeTodos()">Remover Todas as tarefas</button>
      </div>
</div>

O v-model vai nos auxiliar a pegar o dado do input de adicionar tarefa, guardando em uma variavel.

O v-on:click vai executar uma função caso o botão seja clicado.


Por fim vamos renomear o arquivo HelloWorld.vue para TodoList.vue .

E também no arquivo App.vue vamos fazer as seguintes alterações:

블록 없음<template> :

Vamos Criar는 할 일 목록에 태그를 지정합니다.

<template>
  <h1>TodoList com Vue.js 3!</h1>
  <TodoList/>
</template>

E no Javascript vamos renomear o import do componente:

<script>
import TodoList from './components/TodoList.vue'

export default {
  name: 'App',
  components: {
    TodoList
  }
}
</script>

Depois de muito código é só rodarnpm run serve , para ver o resultado final!


Se este artigo realmente te ajudou compartilhe com seus amigos e amigas deixe o gostei(se tiver) e até a próxima!

github가 아닌 repositório에서 confira o todo código desenvolvido neste artigo를 확인하십시오!

Link para o repositório .