Estruturas front-end como o AngularJs podem tornar muito conveniente para desenvolver aplicativos poderosos de uma página única. No entanto, às vezes grandes estruturas como o Angular são muito grandes para nossos projetos e muitas funções podem não ser usadas. No momento, precisamos avaliar a necessidade de usá -lo. Se precisarmos adicionar apenas algumas funções a uma página da Web simples, o uso do Angular será muito problemático e a instalação necessária, a configuração, a escrita de roteamento, o design de controladores etc. parecerá muito pesado.
Neste momento, precisamos de uma solução mais leve. Vue.js é uma boa escolha. Vue.js é uma estrutura que se concentra nos modelos de exibição (ViewModal). O modelo de exibição é uma ponte para comunicação de dados entre a interface do usuário e o modelo de dados, realizando a ligação de dados bidirecional entre a interface do usuário e o modelo de dados. Não é uma "estrutura completa", mas uma estrutura simples e flexível focada nas camadas de exibição.
Em seguida, usaremos um aplicativo de memorando simples para aprender sobre o básico do vue.js. Para fazer com que todos prestem mais atenção ao próprio Vue.js, projetamos um aplicativo cliente com base em dados locais. No final deste artigo, mencionaremos a interação entre o vue.js e o back -end.
Preparação
Vamos obter vue.js e bootstrap através do NPM primeiro (não é necessário, aqui é aplicar sua biblioteca de estilo) e inserir o seguinte na linha de comando:
NPM Instale o Vue Bootstrap
Em seguida, crie dois arquivos:
Touch Index.html app.js
Adicione também o seguinte conteúdo ao index.html
<!-index.html-> <! Doctype html> <html> <head> <meta charset = "utf-8"> <title> vue </title> <!-css-> <link rel = "stylesheet" href = "node_modules/bootstrap"> Barra de Navegação-> <mav> <div> <a> <i> </i> vue memorando </a> </div> </av> <!-Partes principais do aplicativo-> <div id = "events"> <!-Adicione um formulário-> </Div> <h3> <h3> Adicionar um evento </h3> </div> </> </niv> <div> </div> </div> </div> <!-js-> <script src = "node_modules/vue/dist/vue.js"> </script> <script src = "app.js"> </sCript> </bodge> </html>
A tag <div> com ID "eventos" é a parte central deste aplicativo. Depois disso, criaremos uma instância do VUE para esta parte principal.
Crie uma instância Vue
Primeiro, vamos criar uma instância do VUE e definir o atributo "EL" desta instância como "#Events". Dessa forma, a instância estará vinculada a um contêiner com o ID "eventos".
// app.jsnew vue ({// e vinculação de contêineres el com id "eventos": '#events'});Neste ponto, a função de Vue entrará em vigor nos eventos div#. Antes de adicionar outro conteúdo, vamos adicionar algumas propriedades necessárias à instância do VUE criada:
// App.js New Vue ({// O contêiner ligando EL ao ID de "Eventos": '#events', // No atributo de dados, definimos os dados que interagem com os dados da página da web: {}, // quando o aplicativo é carregado, a função no atributo Ready será executado. Métodos: {}});O atributo de dados é um objeto que declara todos os dados no modelo de exibição de nosso aplicativo.
O atributo pronto é uma função que será executada quando o aplicativo for carregado. Geralmente, outros métodos são chamados aqui para inicializar os dados exigidos pelo aplicativo.
O método de métodos define os métodos que precisam ser usados neste aplicativo
Adicione conteúdo à forma
Precisamos inserir os detalhes do memorando no formulário. Utilizamos o seletor de tempo nativo do HTML5 para definir o tempo do conteúdo do memorando. (Observe que esta função não é aplicável no navegador Firefox, é recomendável usar o Chrome ou Safari)
<div> <inspum someholder = "nome do evento" v-model = "event.name"> </div> <div> <textarea someholder = "Evento Descrição" v-model = "event.description"> </sexttarea> </div> <div> <input type = "date" placeholder = "date" v-model = " @click = "addEvent"> envie </butut> </div>
Adicionamos uma diretiva "V-model" à tag de entrada e tag textarea. Semelhante ao "Modelo Ng" do Angular, o valor desse modelo V especifica os dados vinculados a essa tag no modelo de exibição. Esses dados não estão disponíveis apenas aqui, mas também em outras partes do contêiner.
Adicionamos uma instrução "@Click" ao botão Enviar. Esta instrução é abreviada e o nome completo deve ser "v-on: clique". Sua função é vincular um ouvinte para os eventos de clique neste botão. Quando o evento de clique é acionado, a função do ouvinte na instrução @Click será executada. Neste exemplo, vinculamos a função addEvent ao botão Enviar. Também podemos vincular outros eventos, e a regra de escrita é @Event Name = "Função de audição". Se quisermos vincular uma função do ouvinte f ao evento KeyDown, podemos escrever isso: @keydown = "f" ou v-on: keydown = "f"
Neste ponto, se você visualizar a página da web, verá o seguinte conteúdo:
Adicione dados
Já mencionamos o método addEvent antes, que é usado para adicionar novos dados de memorando.
Agora vamos definir este método e adicionar alguns dados necessários
// app.js ... dados: {event: {name: '', description: '', date: ''}, eventos: []}, // a função no atributo Ready será executado quando o aplicativo estiver carregado está pronto: function () {// quando o aplicativo é carregado, precisamos inicializar os dados. // Definimos um método para obter dados FetchEvents: function () {var events = [{id: 1, nome: 'Tenha uma reunião', Descrição: '9:00 na sala de conferências do 21º andar', Data: '2015-09-10'}, {id: 2, Name: 'Shopping': 'Compre um banco de potência', '' '5-10-10-10-10: 2, 'Shop', 'Compre um banco de potência', ''5-10-10-10-10, 2,' Shep ',' Compre um banco de energia ':' 2010: {Id: 2, Name: 'Shopping': ' Tutoriais sobre Vue ', Data:' 2016-03-11 '}]; // $ set é um método fornecido pela VUE para inserir dados em uma matriz. A visualização será atualizada ao executá -la. $ Set ('eventos', eventos); }, // Insira dados em uma matriz de eventos addEvent: function () {if (this.event.name) {this.events.push (this.event); this.Event = {Nome: '', Descrição: '', Date: ''}; }}}Na propriedade de dados, definimos um objeto de evento e uma matriz de eventos, representando os eventos e a matriz de eventos, respectivamente. Esses dados serão carregados quando o aplicativo for carregado. Se não predefinirmos objetos de evento, embora as funções subsequentes possam ser implementadas, o navegador relatará este erro:
Eles significam que, se os dados que você usa em seu aplicativo não for declarado no atributo de dados, o desempenho do aplicativo será afetado. Portanto, os dados que usamos em nosso aplicativo são melhor declarados no atributo de dados.
Na propriedade Ready, definimos o método FetchEvents para obter dados. Neste método, adicionamos dados à visualização através do método da vm. $ Set. Sua função é semelhante ao método push de uma matriz e também atualiza a visualização. O parâmetro deste método deve ser um Keypath de String, representando os dados recebidos. Para uso específico, consulte aqui.
Finalmente, na propriedade Method, definimos o método AddEvents para verificar se o valor do evento. Nome existe e, em caso afirmativo, adicione o evento à matriz de eventos. Depois disso, os dados no objeto de evento serão limpos e o formulário também será limpo.
Adicione uma lista de itens
Usamos uma lista de coisas para listar todas as coisas:
<div> <a href = "#" v-for = "Evento em eventos"> <h4> <i> </i> {{event.name}} </h4> <h5> <i v-if = "event.date"> </i> {{event.date}}} </h5> <p v-if <button @click = "DeLeteevent ($ index)"> excluir </botão> </a> </div>Utilizamos a diretiva V-For para renderizar elementos de renderização com a mesma estrutura DOM e conteúdo de exibição diferente. Neste exemplo, adicionamos uma diretiva V-for a uma tag, que atravessará os dados na matriz de eventos, e representamos cada dados de travessia com o evento. Elementos com a diretiva V-For adicionados aplicarão os resultados de cada travessia em elementos filhos e os exibirão repetidamente. Amigos que usaram o mecanismo de modelo, reação ou angular podem estar mais familiarizados com o uso semelhante. Em nosso exemplo, o conteúdo das tags H4, H5, P e Button será exibido repetidamente e o número de loops é o comprimento da matriz de eventos. Crianças com elementos de diretiva V-For são chamados de modelos, e os dados no modelo são embrulhados em aparelhos duplos. Neste exemplo, os dados são as várias propriedades do objeto de evento (nome, data e descrição).
Você notará que alguns dos elementos do modelo adicionaram diretivas V-IF. Esta instrução atua como renderização condicional. O valor do V-IF é uma condição de julgamento. Se o resultado for verdadeiro, o elemento será renderizado, caso contrário, não será renderizado. Além disso, adicionamos uma instrução de clique no elemento do botão e chamamos o método Deleteevent para excluir o assunto (a definição específica será fornecida abaixo). O parâmetro $ índice representa o número do elemento atualmente percorrido na matriz.
Atualize a página e descobriremos que todos os itens serão listados no lado direito da página. Depois de inserir o conteúdo no formulário à esquerda e clicar no botão "Enviar", novos itens serão adicionados automaticamente à lista à direita.
Vamos definir o método Deleteevent
DeLeteevent: function (index) {if (confirm ("tem certeza de que deseja excluir este evento?")) {// $ remove é um método de conveniência de vue semelhante a splice this.events. $ remover (index); }}Neste método, primeiro perguntamos ao usuário se ele certamente excluirá o item. Se você clicar em "OK", o item será excluído do DOM através do método de Remova de Vue predefinido.
Interação com o back -end
Como o Angular, o front-end e o back-end de Vue são separados, e a interação com o back-end é concluída por meio de solicitações HTTP. Existem muitas ferramentas interativas, você pode usar o objeto familiar $ .ajax nativo, XmlHttPrequest ou outras bibliotecas de terceiros ou experimentar o Vue-Resource.
Aqui está uma breve introdução ao Vue-Resource. O Vue-Resource é um plug-in projetado especificamente para o VUE para enviar solicitações HTTP. Ele suporta modelos de promessa e URI, e também fornece ferramentas como o Interceptor. Vejamos o nosso exemplo acima. Mudamos a aquisição de assuntos para obtê -los do servidor. No momento, precisamos modificar o método FetchEvents: (suponha que o back -end forneça serviços relacionados a assuntos através do URL da API/eventos, o mesmo abaixo)
fetchEvents: function () {this.Se a aquisição for bem -sucedida, a instrução da função então será executada e o método $ SET ainda será chamado, mas os eventos dos parâmetros de entrada serão recuperados do servidor.
Se modificarmos o addEvent, precisamos enviar uma solicitação de postagem:
addEvent: function () {this.Da mesma forma, o método de exclusão de assuntos pode ser modificado da seguinte forma:
Deleteevent: function (index) {this. $ http.delete ('API/events/' + event.id) .Then (function (resposta) {this.events. $ remover (index);}) .catch (function (error) {console.log (error);});}).Aqui passamos o ID do assunto para o servidor para dizer ao servidor para excluir o ID do assunto para facilitar o servidor para determinar qual assunto excluir.
Conclusão
Amigos que usaram Angular e React descobrirão esse vue e são todos semelhantes: instruções semelhantes ao processamento angular e modular semelhante ao reagir. No entanto, Vue é obviamente diferente deles. É mais leve e fácil de usar. Você não precisa fazer configurações complicadas como Angular, nem precisa aprender novos conceitos, como novo DOM virtual, JSX, etc., como o React. Portanto, se o seu aplicativo não for muito grande, você também pode considerar o uso do VUE como sua estrutura de aplicativo.
O acima é o tutorial rápido de introdução para o vue.js apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!