Vue.Js Exemple
O Vue é uma estrutura JavaScript progressiva simples e mínima que pode ser usada para criar aplicativos da Web poderosos de forma incremental.
O Vue é uma alternativa leve a outros frameworks JavaScript como o AngularJS. Com um entendimento intermediário de HTML, CSS e JS, você deve estar pronto para começar a usar o Vue.
Índice
- Pré-requisitos
- Criando um aplicativo do Vue 2
- Estrutura de componentes
- Componente principal do aplicativo
- Criando um Componente
- Importando Componentes
- Adicionando Dados de Componentes
- Looping e renderização de dados
- Editing a Todo
- Deleting a Todo
- Adicionando um Novo Todo
- Completing A Todo
- Conclusão
Neste artigo, estaremos construindo um aplicativo de tarefas com o Vue enquanto destacamos o pacote de excelência que ele tem a oferecer.
Vamos começar!
#Pré-requisitos
Vamos precisar do Vue CLI para começar. A CLI fornece um meio de rapidamente organizar aplicativos de página única e, em pouco tempo, você terá um aplicativo em execução com compilações hot-reload, lint-on-save e pronto para produção.
O Vue CLI oferece uma ferramenta de desenvolvimento de configuração zero para iniciar seus aplicativos e componentes do Vue.
Muitas das decisões que você deve tomar a respeito de como seu aplicativo será dimensionado no futuro serão atendidas. O Vue CLI vem com uma matriz de modelos que fornecem um pacote pronto para uso autônomo e pronto para usar. Os modelos atualmente disponíveis são:
webpack - A full-featured Webpack + Vue-loader setup with hot reload, linting, testing & CSS extraction.
webpack-simple - A simple Webpack + Vue-loader setup for quick prototyping.
browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
browserify-simple - A simple Browserify + vueify setup for quick prototyping.
simple - The simplest possible Vue setup in a single HTML file
Simplificando, o Vue CLI é o seu caminho mais rápido para colocar seus aplicativos em funcionamento.
# install vue-cli
$ npm install --global vue-cli
Neste tutorial, focaremos no uso de componentes de arquivo único em vez de instâncias. Também abordaremos como usar os componentes pai e filho e a troca de dados entre eles. A curva de aprendizado do Vue é especialmente gentil quando você usa componentes de arquivo único. Além disso, eles permitem que você coloque tudo em um componente em um só lugar. Quando você começa a trabalhar em aplicativos grandes, a capacidade de escrever componentes reutilizáveis é um recurso que salva vidas.
#Criando um aplicativo Vue 2
Em seguida, vamos configurar nosso aplicativo Vue com o CLI.
# create a new project using the "webpack" template
$ vue init webpack todo-app
Você será solicitado a inserir um nome de projeto, descrição, autor e compilação Vue. Nós não vamos instalar o roteador Vue para o nosso aplicativo. Você também precisará ativar as opções de lintagem e teste ou o aplicativo. Você pode seguir meu exemplo abaixo.
Depois de inicializarmos nosso aplicativo, precisaremos instalar as dependências necessárias.
# install dependencies and go!
$ cd todo-app
$ npm install
Para veicular o aplicativo, execute
$ npm run dev
Isto irá abrir imediatamente o seu navegador e direcioná-lo para http: // localhost: 8080 . A página será exibida da seguinte maneira.
Para estilizar nossa aplicação, usaremos o Semantic . O Semantic é uma estrutura de desenvolvimento que ajuda a criar layouts bonitos e responsivos usando HTML amigável para humanos. Também usaremos o Sweetalert para solicitar que os usuários confirmem ações. Sweetalert é uma biblioteca que fornece belas alternativas para o alerta JavaScript padrão. Adicione os scripts e links minificados de JavaScript e CSS ao seu arquivo index.html localizado na raiz da sua estrutura de pastas.
<!-- ./index.html -->
<head>
<meta charset="utf-8">
<title>todo-app</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>#Estrutura de componentes
Todo aplicativo Vue precisa ter um componente de nível superior que sirva como estrutura para o aplicativo inteiro. Para nossa aplicação, teremos um componente principal e aninhados dentro de um componente TodoList. Dentro disso, haverá sub-componentes todo.
#Main App Component
Vamos mergulhar na construção da nossa aplicação. Primeiro, começaremos com o componente principal de nível superior. O Vue CLI já gera um componente principal que pode ser encontrado em
src/App.vue. Vamos construir os outros componentes necessários.#Criando um componente
O Vue CLI cria um componente Hello durante a configuração que pode ser encontrado em
src/components/Hello.vue. Vamos criar nosso próprio componente chamado TodoList.vue e não precisaremos mais disso.
Dentro do novo arquivo TodoList.vue, escreva o seguinte.
<template>
<div>
<ul>
<li> Todo A </li>
<li> Todo B </li>
<li> Todo C </li>
</ul>
</div>
</template>
<script type = "text/javascript" >
export default {
};
</script>
<style>
</style>
Um arquivo de componente consiste em três partes; seções de modelo, classe de componentes e estilos. A área do modelo é a parte visual de um componente. Comportamento, eventos e armazenamento de dados para o modelo são tratados pela classe. A seção de estilo serve para melhorar ainda mais a aparência do modelo.
#Importando componentes
Para utilizar o componente que acabamos de criar, precisamos importá-lo em nosso componente principal. Dentro de
src/App.vuefazer as seguintes alterações logo acima da seção de script e abaixo da tag de fechamento do modelo.// add this line
import TodoList from './components/TodoList'
// remove this line
import Hello from './components/Hello'
Também precisaremos referenciar o componente TodoList na propriedade components e excluir a referência anterior para Hello Component. Após as alterações, nosso script deve ficar assim.
<script>
import TodoList from './components/TodoList';
export default {
components: {
// Add a reference to the TodoList component in the components property
TodoList,
},
};
</script>
Para renderizar o componente, nós o chamamos como um elemento HTML. As palavras componentes são separadas por traços como abaixo, em vez de maiúsculas e minúsculas.
<template>
<div>
// Render the TodoList component
// TodoList becomes
<todo-list></todo-list>
</div>
</template>
Quando salvamos nossas alterações, nosso aplicativo rudimentar deve se parecer com isso.
#Adicionando dados de componentes
Vamos precisar fornecer dados para o componente principal que será usado para exibir a lista de todos. Nossos todos terão três propriedades; O título, projeto e feito (para indicar se o todo está completo ou não). Componentes disponibilizam dados para seus respectivos modelos usando uma função de dados. Essa função retorna um objeto com as propriedades destinadas ao modelo. Vamos adicionar alguns dados ao nosso componente.
export default {
name: 'app',
components: {
TodoList,
},
// data function avails data to the template
data() {
return {
todos: [{
title: 'Todo A',
project: 'Project A',
done: false,
}, {
title: 'Todo B',
project: 'Project B',
done: true,
}, {
title: 'Todo C',
project: 'Project C',
done: false,
}, {
title: 'Todo D',
project: 'Project D',
done: false,
}],
};
},
};
Nós precisaremos passar os dados do componente principal para o componente TodoList. Para isso, vamos usar a
v-binddiretiva. A diretiva leva um argumento que é indicado por dois pontos após o nome da diretiva. Nosso argumento será todos que diz à diretiva v-bind para vincular o atributo todos do elemento ao valor da expressão todos.<todo-list v-bind:todos="todos"></todo-list>
Os todos agora estarão disponíveis no componente TodoList como
todos. Teremos que modificar nosso componente TodoList para acessar esses dados. O componente TodoList tem que declarar as propriedades que ele aceitará ao usá-lo. Fazemos isso adicionando uma propriedade à classe do componente.export default {
props: ['todos'],
}#Looping e renderização de dados
Dentro do nosso modelo TodoList, vamos percorrer a lista de Todos e também mostrar o número de tarefas concluídas e incompletas. Para renderizar uma lista de itens, usamos a
v-fordiretiva. A sintaxe para fazer isso é representada como v-for="item in items"where items é o array com nossos dados e item é uma representação do elemento do array que está sendo iterado.<template>
<div>
// JavaScript expressions in Vue are enclosed in double curly brackets.
<p>Completed Tasks: {{todos.filter(todo => {return todo.done === true}).length}}</p>
<p>Pending Tasks: {{todos.filter(todo => {return todo.done === false}).length}}</p>
<div class='ui centered card' v-for="todo in todos">
<div class='content'>
<div class='header'>
{{ todo.title }}
</div>
<div class='meta'>
{{ todo.project }}
</div>
<div class='extra content'>
<span class='right floated edit icon'>
<i class='edit icon'></i>
</span>
</div>
</div>
<div class='ui bottom attached green basic button' v-show="todo.done">
Completed
</div>
<div class='ui bottom attached red basic button' v-show="!todo.done">
Complete
</div>
</div>
</template>
<script type = "text/javascript" >
export default {
props: ['todos'],
};
</script>#Editing a Todo
Vamos extrair o modelo todo em seu próprio componente para um código mais limpo. Crie um novo arquivo de componente Todo.vue
src/componentse transfira o template todo. Nosso arquivo agora deve ficar assim:<template>
<div class='ui centered card'>
<div class='content'>
<div class='header'>
{{ todo.title }}
</div>
<div class='meta'>
{{ todo.project }}
</div>
<div class='extra content'>
<span class='right floated edit icon'>
<i class='edit icon'></i>
</span>
</div>
</div>
<div class='ui bottom attached green basic button' v-show="todo.done">
Completed
</div>
<div class='ui bottom attached red basic button' v-show="!todo.done">
Complete
</div>
</div>
</template>
<script type="text/javascript">
export default {
props: ['todo'],
};
</script>
No componente TodoList, refatore o código para renderizar o componente Todo. Também precisaremos mudar a forma como nossos todos são passados para o componente Todo. Podemos usar o
v-foratributo em qualquer componente que criamos exatamente como faríamos em qualquer outro elemento. A sintaxe será assim: <my-component v-for="item in items" :key="item.id"></my-component>. Note que a partir de 2.2.0 e acima, uma chave é necessária ao usar v-forcom componentes. É importante notar que isso não passa automaticamente os dados para o componente, pois os componentes têm seus próprios escopos isolados. Para passar os dados, temos que usar adereços.<my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index">
</my-component>
Nosso modelo de componente TodoLost refatorado:
<template>
<div>
<p>Completed Tasks: {{todos.filter(todo => {return todo.done === true}).length}}</p>
<p>Pending Tasks: {{todos.filter(todo => {return todo.done === false}).length}}</p>
// we are now passing the data to the todo component to render the todo list
<todo v-for="todo in todos" v-bind:todo="todo"></todo>
</div>
</template>
<script type = "text/javascript" >
import Todo from './Todo';
export default {
props: ['todos'],
components: {
Todo,
},
};
</script>
Vamos adicionar uma propriedade à classe do componente Todo chamada isEditing. Isso será usado para determinar se o Todo está no modo de edição ou não. Teremos um manipulador de eventos no período de edição do modelo. Isso acionará o método showForm quando for clicado. Isso definirá a propriedade isEditing como true. Antes de darmos uma olhada nisso, vamos adicionar um formulário e definir condicionais para mostrar o todo ou o formulário de edição, dependendo se a propriedade isEditing é verdadeira ou falsa. Nosso modelo agora deve ficar assim.
<template>
<div class='ui centered card'>
// Todo shown when we are not in editing mode.
<div class="content" v-show="!isEditing">
<div class='header'>
{{ todo.title }}
</div>
<div class='meta'>
{{ todo.project }}
</div>
<div class='extra content'>
<span class='right floated edit icon' v-on:click="showForm">
<i class='edit icon'></i>
</span>
</div>
</div>
// form is visible when we are in editing mode
<div class="content" v-show="isEditing">
<div class='ui form'>
<div class='field'>
<label>Title</label>
<input type='text' v-model="todo.title" >
</div>
<div class='field'>
<label>Project</label>
<input type='text' v-model="todo.project" >
</div>
<div class='ui two button attached buttons'>
<button class='ui basic blue button' v-on:click="hideForm">
Close X
</button>
</div>
</div>
</div>
<div class='ui bottom attached green basic button' v-show="!isEditing &&todo.done" disabled>
Completed
</div>
<div class='ui bottom attached red basic button' v-show="!isEditing && !todo.done">
Pending
</div>
</div>
</template>
</template>
Além do método showForm, precisaremos adicionar um método hideForm para fechar o formulário quando o botão cancelar for clicado. Vamos ver como nosso script agora se parece.
<script>
export default {
props: ['todo'],
data() {
return {
isEditing: false,
};
},
methods: {
showForm() {
this.isEditing = true;
},
hideForm() {
this.isEditing = false;
},
},
};
</script>
Desde que tenhamos vinculado os valores do formulário aos valores todo, a edição dos valores irá editar imediatamente o todo. Uma vez feito, vamos pressionar o botão fechar para ver o todo atualizado.
#Deleting a Todo
Vamos começar adicionando um ícone para excluir um Todo logo abaixo do ícone de edição.
<template>
<span class='right floated edit icon' v-on:click="showForm">
<i class='edit icon'></i>
</span>
/* add the trash icon in below the edit icon in the template */
<span class='right floated trash icon' v-on:click="deleteTodo(todo)">
<i class='trash icon'></i>
</span>
</template>
Em seguida, adicionaremos um método à classe do componente para manipular o clique do ícone. Este método emitirá um evento
delete-todopara o Componente TodoList pai e passará o Todo atual para ser excluído. Vamos adicionar um ouvinte de evento para excluir o ícone.<span class='right floated trash icon' v-on:click="deleteTodo(todo)">// Todo component
methods: {
deleteTodo(todo) {
this.$emit('delete-todo', todo);
},
},
O componente pai (TodoList) precisará de um manipulador de eventos para manipular a exclusão. Vamos definir isso.
// TodoList component
methods: {
deleteTodo(todo) {
const todoIndex = this.todos.indexOf(todo);
this.todos.splice(todoIndex, 1);
},
},
O método deleteTodo será passado para o componente Todo da seguinte maneira.
// TodoList template
<todo v-on:delete-todo="deleteTodo" v-for="todo in todos" v-bind:todo="todo"></todo>
Quando clicamos no ícone de exclusão, um evento será emitido e propagado para o componente pai, que será excluído.
#Adicionando um novo Todo
Para criar um novo todo, começaremos criando um novo componente CreateTodo in
src/components. Isso exibirá um botão com um sinal de mais que se transformará em um formulário quando clicado. Deve ser algo assim.<template>
<div class='ui basic content center aligned segment'>
<button class='ui basic button icon' v-on:click="openForm" v-show="!isCreating">
<i class='plus icon'></i>
</button>
<div class='ui centered card' v-show="isCreating">
<div class='content'>
<div class='ui form'>
<div class='field'>
<label>Title</label>
<input v-model="titleText" type='text' ref='title' defaultValue="">
</div>
<div class='field'>
<label>Project</label>
<input type='text' ref='project' defaultValue="">
</div>
<div class='ui two button attached buttons'>
<button class='ui basic blue button' v-on:click="sendForm()">
Create
</button>
<button class='ui basic red button' v-on:click="closeForm">
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
titleText: '',
projectText: '',
isCreating: false,
};
},
methods: {
openForm() {
this.isCreating = true;
},
closeForm() {
this.isCreating = false;
},
sendForm() {
if (this.titleText.length > 0 && this.projectText.length > 0) {
const title = this.titleText;
const project = this.projectText;
this.$emit('create-todo', {
title,
project,
done: false,
});
this.newTodoText = '';
}
this.isCreating = false;
},
},
};
</script>
Depois de criar o novo componente, nós o importamos e o adicionamos à propriedade components na classe do componente.
// Main Component App.vue
components: {
TodoList,
CreateTodo,
},
Também vamos adicionar um método para criar novos Todos.
// App.vue
methods: {
addTodo(title) {
this.todos.push({
title,
done: false,
});
},
},
O componente CreateTodo será chamado no modelo App.vue da seguinte maneira:
<create-todo v-on:add-todo="addTodo">
#Completing A Todo
Finalmente, adicionaremos um método completeTodo ao Todo Component que emite um evento
complete-todopara o componente pai quando o botão pendente for clicado e define o status concluído do todo para true.// Todo component
methods: {
completeTodo(todo) {
this.$emit('complete-todo', todo);
},
}
Um manipulador de eventos será adicionado ao processo do componente TodoList no evento.
methods: {
completeTodo(todo) {
const todoIndex = this.todos.indexOf(todo);
this.todos[todoIndex].done = true;
},
},
Para passar o método TodoList para o componente Todo, vamos adicioná-lo ao invokation do componente Todo.
<todo v-on:delete-todo="deleteTodo" v-on:complete-todo="completeTodo" v-for="todo in todos" :todo.sync="todo"></todo>#Conclusão
Aprendemos como inicializar um aplicativo Vue usando o Vue CLI. Além disso, aprendemos sobre estrutura de componentes, adicionando dados a componentes, ouvintes de eventos e manipuladores de eventos. Vimos como criar um todo, editá-lo e excluí-lo. Há muito mais a aprender. Usamos dados estáticos em nosso componente principal. A próxima etapa é recuperar os dados de um servidor e atualizá-los de acordo. Estamos agora preparados para criar aplicativos Vue interativos. Tente algo mais por conta própria e veja como é. Felicidades!
ReplyDeleteGood Article!! Thanks for sharing....
Full Stack Training
Full Stack Online Training
Full Stack Developer Online Training
Full Stack Training in Hyderabad
Hello Admin!
ReplyDeleteThanks for the post. It was very interesting and meaningful. I really appreciate it! Keep updating stuffs like this.
Oracle Training in Chennai | Certification | Online Course Training | Oracle Training in Bangalore | Certification | Online Course Training | Oracle Training in Hyderabad | Certification | Online Course Training | Oracle Training in Online | Certification | Online Course Training | Hadoop Training in Chennai | Certification | Online Course Training
that is a however you would prefer extreme article.i am pretty parcels great as well as your however you would prefer con.You supplement truth profoundly amiable to relief have adequate offer exhortation. hold it inside the works. protect contributing to a blog. attempting to investigating your abutting announce. KMPlayer Crack
ReplyDeleteToday, I used to be essentially perusing along and happened upon your blog. simply needed to proclaim pleasant weblog and this text helped me loads, because of which i've found precisely I used to look. Sketchup Free Download Full Version
ReplyDelete