O Vue é uma biblioteca JavaScript pequena e leve. Possui uma API simples e fácil de entender que torna os desenvolvedores mais fáceis e convenientes ao desenvolver aplicativos da Web. De fato, o que sempre se orgulhou de Vue é sua conveniência, execução e flexibilidade.
O objetivo deste tutorial é usar alguns exemplos para fornecer uma visão geral de alguns conceitos e recursos básicos. Em outros tutoriais, você aprenderá recursos mais úteis do Vue para criar um projeto escalável com o Vue.
Vinculação de dados MVVM
A essência do MVVM é vincular a visualização e o modelo através da ligação de dados, para que as alterações de dados sejam mapeadas automaticamente para visualizar as atualizações. Vue.js empresta o mecanismo de instrução do Angular no design da API de ligação de dados: os usuários podem implementar a ligação de dados por meio de atributos HTML com prefixos especiais ou usar a interpolação de modelo de braça de currículo comum ou usar a ligação bidirecional nos elementos de formulário:
<!-Diretiva-> <span v-text = "msg"> </span> <!-interpolation-> <pan> {{msg}} </span> <!-ligação bidirecional-> <input v-model = "msg">A interpolação é essencialmente uma instrução, apenas para facilitar a escrita de modelos. Durante a compilação do modelo, o Vue.js criará um objeto de diretiva para cada nó DOM que precisa de atualização dinâmica. Sempre que os dados observados por um objeto de instrução alteram, ele executará operações DOM correspondentes no nó de destino vinculado. A ligação de dados baseada em instrução permite que operações específicas de DOM sejam razoavelmente encapsuladas nas definições de instrução. O código comercial só precisa envolver modelos e operações no estado de dados, o que melhora bastante a eficiência do desenvolvimento e a manutenção do aplicativo.
Ao contrário da API angular, a API da Vue.js não possui conceitos complicados, como módulo, controlador, escopo, fábrica, serviço etc., e tudo é baseado em "ViewModel Instância":
<!-modelo-> <div id = "app"> {{msg}} </div> // objeto nativo é dados var dados = {msg: 'hello!'} // crie uma instância do ViewModel var VM = new Vue ({// selecione o elemento de destino El: '#app', // Dados iniciais: dados})Resultado da renderização:
<div id = "App"> Olá! </div>
Ao renderizar, o vue.js também concluiu a ligação dinâmica dos dados: se o valor do data.MSG for alterado, o DOM será atualizado automaticamente. Não é muito simples e fácil de entender? Além disso, o Vue.js também simplificou bastante a API de diretrizes e filtros personalizados. Se você tiver experiência de desenvolvimento angular, começará muito rapidamente.
Implementação da observação de dados
O princípio da implementação da observação de dados do Vue.JS é essencialmente diferente do do angular. Os leitores que conhecem o Angular podem saber que as observações de dados do Angular usam mecanismos de verificação suja. Cada instrução terá um objeto correspondente usado para observar dados, chamado de Observador; Haverá muitos observadores em um escopo. Sempre que a interface precisar ser atualizada, a Angular itera através de todos os observadores no escopo atual, avaliará um por um e compará -los com os valores antigos salvos antes. Se o resultado da avaliação mudar, a atualização correspondente será acionada. Esse processo é chamado de ciclo de digestão. Existem dois problemas com a verificação suja:
Quaisquer alterações de dados significam que todo observador do escopo atual precisa ser reavaliado; portanto, quando o número de observadores é enorme, o desempenho do aplicativo será inevitavelmente afetado e é difícil de otimizar.
Quando os dados mudam, a estrutura não pode detectar ativamente a ocorrência de alterações. Ele precisa acionar manualmente o ciclo de digestão para acionar a atualização DOM correspondente. Angular evita esse problema, acionando automaticamente a parte do ciclo de digestão na função de manipulador de eventos DOM, mas ainda existem muitas situações que exigem que o usuário acione manualmente.
O vue.js usa um mecanismo de observação baseado na coleta de dependência. Em princípio, é o mesmo que o antigo nocaute da estrutura do MVVM. Os princípios básicos da coleção de dependência são:
Transforme dados nativos em "objetos observáveis". Um objeto observável pode ser valorizado ou atribuído.
Durante o processo de avaliação do observador, cada objeto observável que é tomado registrará o vigilante atual como seu assinante e se tornará uma dependência do observador atual.
Quando um objeto observável dependente é atribuído, ele notifica todos os assinantes para reavaliar e gatilhos as atualizações correspondentes.
A vantagem de confiar na coleção é que ela pode rastrear com precisão e proativamente as mudanças nos dados e não há dois problemas com verificações sujas mencionadas acima. No entanto, as implementações tradicionais de coleta de dependência, como nocaute, geralmente requerem dados nativos de envolver para criar objetos observáveis. Eles precisam usar chamadas de função ao receber valores e atribuir valores. O método de escrita é complicado e não é intuitivo o suficiente ao executar operações de dados; Ao mesmo tempo, o suporte a objetos com estruturas aninhadas complexas não é ideal.
O vue.js utiliza o método Object.DefineProperty do ES5 para transformar diretamente as propriedades do objeto de dados nativo em getters e setters, implementando a coleta de dependência e o acionamento nessas duas funções e suporta perfeitamente estruturas de objetos aninhados. Para matrizes, as alterações da matriz são ouvidas por métodos mutáveis que envolvem a matriz, como push. Isso torna quase impossível operar os dados do Vue.js e operar objetos nativos [NOTA: Ao adicionar/excluir atributos ou modificar elementos específicos em uma matriz, uma função específica precisa ser chamada, como OBJ. $ ADD (chave, valor) para acionar uma atualização. Isso é limitado pelos recursos do idioma do ES5. ], a lógica da operação de dados é mais clara e suave, e a integração com soluções de sincronização de dados de terceiros também é mais conveniente.
Sistema de componentes
Em aplicações em larga escala, para a divisão do trabalho, reutilização e manutenção, inevitavelmente precisamos abstrair a aplicação em vários módulos relativamente independentes. Em um modelo de desenvolvimento mais tradicional, faremos apenas uma parte do componente ao considerar a multiplexação; Mas, de fato, a interface do usuário do tipo aplicação pode ser considerada inteiramente composta por árvores componentes:
Portanto, os componentes são usados como um conceito central no design de vue.js. Pode -se dizer que todo aplicativo vue.js é desenvolvido em torno dos componentes.
Registrar um componente vue.js é muito simples:
Vue.component ('my-component', {// modelo de modelo: '<div> {{msg}} {{{privatemsg}} </div>', // Aceite parâmetros props: evitada {msg: string <br>}, // Dados privados, você precisa retornar na função para evitar múltiplas instâncias }}})Após o registro, você pode chamar um componente filho no modelo de componente pai como um elemento personalizado:
<my-component msg = "hello"> </my-component>
Resultado da renderização:
<div> Olá componente! </div>
O componente vue.js pode ser entendido como uma classe ViewModel com comportamento predefinido. Um componente pode predefinir muitas opções, mas as mais importantes são as seguintes:
Formato de componente único com base em ferramentas de construção
A biblioteca principal do Vue.js fornece apenas APIs básicas e não possui muitas restrições sobre como organizar a estrutura do arquivo do aplicativo. No entanto, ao criar grandes aplicações, é recomendável usar a combinação de WebPack + Vue-carregador para tornar o desenvolvimento de componentes mais eficientes.
O WebPack é uma ferramenta de construção de módulos front-end de código aberto desenvolvido por Tobias Koppers. Sua função básica é empacotar vários arquivos JavaScript gravados no formato do módulo em um arquivo e suportar formatos CommonJs e AMD. Mas o que o torna único é que ele fornece uma poderosa API de carregador para definir a lógica de pré -processamento para diferentes formatos de arquivo, permitindo -nos usar CSS, modelos e até formatos de arquivo personalizados como módulos JavaScript. O Webpack também pode implementar um grande número de funções avançadas com base no carregador, como embalagens automáticas de crise e carregamento sob demanda, posicionamento automático de referências de recursos de imagem, decisão sobre base64 em linha com base no tamanho da imagem, substituição a quente dos módulos durante o desenvolvimento, etc. Apresenta-se.
Desenvolvi o plug-in Vue-carregador com base na API do WebPack Loader, para que possamos escrever componentes VUE em um único formato de arquivo (*.vue):
<style>.my-component h2 { color: red;}</style><template> <div> <h2>Hello from {{msg}}</h2> <other-component></other-component> </div></template><script>// Follow the CommonJS module format var otherComponent = require('./other-component')// Export component definition module.exports = {data: function () {return {msg: 'vue-carregador'}}, componentes: {'outro-componente': outrocomponente}} </sCript>Ao mesmo tempo, você também pode usar outros pré -processadores no arquivo *.vue, basta instalar o carregador de webpack correspondente:
<style lang = "stylus">. My-Component H2 Color Red </style> <modelo lang = "jade"> div.my-componente h2 hello de {{msg}} </modemplate> <script lang = "Babel"> // use Babel para compilar o Babel. }}} </script>Esse formato de componente integra os três elementos do modelo, estilo e lógica de um componente no mesmo arquivo, o que é conveniente para desenvolvimento, reutilização e manutenção. Além disso, o próprio Vue.js suporta carregamento assíncrono de componentes e combinado com a função de embalagem de Chunking do Webpack, pode facilmente implementar o carregamento assíncrono de componentes sob demanda.
Outros recursos
Vue.js tem vários outros recursos que vale a pena mencionar:
Crie uma instância Vue usando o novo Vue ()
Podemos inicializar primeiro uma página HTML e, em seguida, precisamos apresentar o arquivo JS da Vue. Existem muitas maneiras de apresentá -lo. Podemos apresentar a CDN da Vue no script ou baixar o min.js do Vue no site oficial ou instalar uma dependência do VUE usando o NPM. Por conveniência, este artigo é introduzido usando a CDN.
<! Doctype html> <html> <head> <titter> Aprenda do zero </ititle> </ad Head> <body> <script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </script> </bodyl> </htuell.
Ao desenvolver, verifique se está usando versões não compactadas, pois as versões não compactadas fornecerão avisos detalhados úteis e economizarão muito tempo na redação do seu código.
Primeiro, escrevemos uma div no corpo, criamos uma instância de vue e depois ligamos a instância e a div.
Ao criar uma nova instância do VUE, use o construtor Vue () e aponte seu ponto de montagem em sua instância. Este ponto de montagem é o limite da instância de vue que você deseja dividir. O ponto de montagem e o limite da instância correspondem um por um. Você só pode lidar com transações dentro do limite da instância no ponto de montagem, mas não transações fora do limite da instância no seu ponto de montagem.
O parâmetro para definir o ponto de montagem na instância do VUE é "EL", e o valor de EL pode ser definido pelo elemento DOM.
<! Doctype html> <html> <head> <titter> Aprenda do zero </ititle> </ad Head> <body> <div id = "vueInstance"> Este é o limite da instância do ponto de montagem da instância </div> <script src = "http://cdn.jsdelivr.net/vue/vue/vue/vue/vue/vue] <Cript> // Crie uma nova instância de Vue e defina o ponto de montagem var v = new Vue ({el: '#VueInstance'}); </script> </body> </html>Como você pode ver acima, o novo Vue () cria uma nova instância e, em seguida, especifique um elemento DOM como o ponto de montagem da instância. Ao definir o ponto de montagem, usamos o ID do seletor CSS para defini -lo. O nome instanciado também pode ser definido por si mesma para chamada posterior.
Usando o modelo V para ligação de dados bidirecionais
Podemos usar o modelo V para ligar a caixa de entrada de entrada, para que possamos usar dinamicamente para obter o valor do objeto de dados. Você pode pensar em V-model como uma propriedade especificada, assim como o atributo de um elemento HTML. A ligação de dados bidirecional aqui pode ser usada em muitos elementos de formulário, como entrada, textarea e select.
O Vue usa o comando v-model para vincular os dados, e esses dados são os dados que esperamos ser atualizados através das operações de entrada do usuário.
Por exemplo, no nosso exemplo abaixo, queremos vincular o nome de dados na tag de entrada e precisamos implementar a declaração no objeto de dados na instância do VUE.
<div id = "vueInstance"> Digite seu nome: <input type = "text" v-model = "name"> </div>
<script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </sCript> // Após esta linha será omitido <SCRIPT> var v = new Vue ({el: '#vueInstance', dados: {name: '_App.Não importa quantas vezes o usuário digite, esse nome será atualizado automaticamente. Além disso, se o valor do nome for alterado, os valores em outros lugares onde o nome for mapeado também serão modificados.
O motivo da modificação síncrona desta caixa de entrada e do mapeamento é usar as instruções do modelo V para permitir que os dados sejam ligados através do fluxo de dados subjacentes e depois modificado diretamente. Este é o conceito de ligação bidirecional de dados.
Para provar esse conceito, podemos usar $ dados para imprimir o mapeamento dos dados para ver.
<div id = "vueInstance"> Digite seu nome: <input type = "text" v-model = "name"> <p> {{$ data | json}} </p> //#1 <p> {{name}} </p> //#2 </div> <Cript> var V = new Vue ({el: '#VueInstance', Data: {Name: '_Appian'}}); </script>É 1:
$ dados são o objeto de dados observado pela instância do VUE. O tipo essencial é um objeto, para que possa ser convertido em JSON. Pode ser substituído por um novo objeto. A instância proxies as propriedades de seu objeto de dados.
{{}}, interpole com dois aparelhos encaracolados. O valor inserido aqui é o valor que muda em tempo real por $ dados.
| JSON, apenas uma maneira mais intuitiva de exibir dados. Também pode ser considerado um filtro, assim como o efeito de json.Stringify ().
Item 2:
{{name}} significa inserir variáveis de dados diretamente na expressão de interpolação e em dois aparelhos encaracolados para mapear diretamente o valor do nome.
O Vue é tão simples de executar a ligação bidirecional de dados. Requer apenas uma instrução de modelo V, sem usar JS ou JQ para controlar os dados. Eu acredito que você pode esclarecer a lógica dos exemplos acima.
Use V-On para encadernação de eventos
O Vue usa instruções V-ON para escuta e distribuição de eventos. Você pode criar um método para vincular o evento de escuta na instância do VUE e criar um método para despachar um evento de clique.
No exemplo a seguir, criaremos um método Say, que está vinculado a um botão. O efeito de clicar é exibir uma caixa de boas -vindas com o nome de usuário. Para atribuir esse método ao botão, precisamos usar o V-ON: clique para vincular o evento.
<div id = "vueInstance"> Digite seu nome: <input type = "text" v-model = "name"> <botão v-on: click = "say"> bem-vindo ao clicar </button> //#1 <butter @click = "Say"> bem-vindo ao clicar </button> //#2 </div>
<Cript> var V = new Vue ({el: '#VueInstance', Data: {Name: '_Appian'}, Métodos: {Say: function () {alert ('Welcome' + this.name);}}}); </script>Obviamente, você não apenas pode vincular o clique de clique em eventos, mas também pode vincular outros eventos do mouse, eventos de entrada do teclado e outros tipos de eventos JS. Por exemplo, V-ON: MouseOver, V-ON: KeyDown, V-ON: Envie, V-ON: KeyPress, V-ON: KeyUp.13, etc. ou alguns outros eventos personalizados.
Durante o processo de desenvolvimento, você pode usar frequentemente a ligação de eventos. É um pouco problemático escrever v-on; portanto, no exemplo acima, há duas maneiras de escrever, o #2 é a abreviação do número 1. Usando @ em vez de v-on, não vou dizer muito aqui.
Use V-IF ou V-Show para fazer julgamentos condicionais
Se queremos que o usuário veja a janela pop-up de boas-vindas após o login e, se não estivermos conectados, daremos uma interface de login. A Vue nos fornecerá instruções V-IF e V-SHOW para controlar o conteúdo da tela sob diferentes estados de login.
Usando o exemplo anterior, podemos usar o valor do LogInstatus para controlar se deve fazer login. Se for verdadeiro, a caixa de entrada e o botão serão exibidos para que ele possa ver a janela pop-up de boas-vindas. No entanto, se for falso (ou seja, não estiver conectado), você só poderá ver a caixa de entrada e o botão de envio para inserir o número da conta, senha (não há autenticação por enquanto, apenas o status de login será alterado).
<div id="vueInstance"> //section displayed when loginStatus is true <section v-if="loginStatus"> Enter your name: <input type="text" v-model="name"> <button v-on:click="say">Welcome to click</button> <button @click="switchLoginStatus">LoginLoginStatus">Login</button> </section> //section displayed Quando o LogInstatus é falso <Seção v-if = "! LogInstatus"> LoginPerson: <input type = "text"> logInpassword: <input type = "senha"> <botão @click = "switchLogInStatus"> login </tobton> </section> </div>
<SCRIPT> var V = new Vue ({el: '#VueInstance', dados: {name: '_appian', logInstatus: false}, métodos: {Say: function () {alert ('welcome' + this.name);}, switchLogInstus: function () {this.loginGin); }); </script>A execução disso é a instância V. Esta apontamento é uma pergunta que precisa ser entendida por si mesmo, então não vou falar sobre isso aqui.
No exemplo acima, desde que o V-IF seja substituído pelo V-Show, o mesmo efeito pode ser obtido. Tanto o V-IF quanto o V-Show suportam V-ELSE, mas o elemento de irmãos anteriores da tag que vincula o comando V-ELSE deve ter V-IF ou V-Show.
No exemplo acima, basta clicar no botão "Login" ou "Login Out" acionará o método SwitchLogInstatus. Desde que esse método seja acionado, o status do LogInstatus mudará (a troca de verdadeiro e falsa), alterando assim a mudança do resultado da condição do julgamento do V-IF em HTML. Com base no status booleano atual do LogInstatus, a seção exibida é uma seção em diferentes estados.
Qual é a diferença entre V-Show e V-IF?
Ao alternar os blocos V-IF, o Vue possui um processo de compilação/desinstalação local, porque os modelos no V-IF também podem incluir a ligação de dados ou os subcomponentes. O V-IF é uma renderização condicional real, pois garante que os blocos condicionais destruam e reconstruam corretamente os ouvintes e subcomponentes no bloco condicional durante o interruptor.
O V -IF também é preguiçoso: se a condição for falsa durante a renderização inicial, nada é feito - a compilação local começa quando a condição se tornar verdadeira pela primeira vez (a compilação será armazenada em cache).
Por outro lado, o V -Show é muito mais simples - os elementos são sempre compilados e preservados, simplesmente trocados com base no CSS.
De um modo geral, o V-IF possui maior consumo de comutação e o V-SHOW possui maior consumo inicial de renderização. Portanto, é melhor alternar o V-Show com frequência e é melhor alterar o V-IF se as condições não forem muito altas em tempo de execução.
Essa diferença pode não ser importante para o seu desenvolvimento atual, mas você ainda precisa prestar atenção e prestar atenção, porque quando o desenvolvimento do seu projeto se torna maior, isso se tornará importante.
Use a lista V-For para saída
Se você é um empresário que administra uma plataforma de comércio eletrônico, deve ter muitas páginas que precisam renderizar a saída da lista de produtos. A diretiva V-F-for permite o loop de nosso objeto de matriz, pronunciado como "Looping todos os elementos em Arrayobj" no caminho do "elemento em Arrayobj".
No exemplo a seguir, usaremos a instrução V-For para fazer uma lista de produtos. Cada produto estará em um LI, onde o nome, o preço e o tipo de produto do produto são emitidos.
<div id = "vueInstance"> <ul> <li v -for = "el em produtos"> {{el.name}} - ￥ {{el. preço}} - {{el. categoria}} </li> </ul> </div> <script> var V = new Vue({ el : '#vueInstance', data : { products : [ {name: 'microphone', price: 25, category: 'electronics'}, {name: 'laptop case', price: 15, category: 'accessories'}, {name: 'screen cleaner', price: 17, category: 'accessories'}, {name: 'laptop charger', Preço: 70, categoria: 'Electronics'}, {Nome: 'Mouse', Preço: 40, Categoria: 'Electronics'}, {Name: 'Earphones', Preço: 20, Categoria: 'Electronics'}, {Nome: 'Monitor', Price: 120, Categoria: 'Eletrônica'}]}});Obviamente, o objeto da matriz nos dados pode ser definido sem a definição acima. Podemos importá -lo do banco de dados ou usar a solicitação AJAX para obtê -lo. Isso é apenas para demonstração de V-For.
Às vezes, podemos precisar obter o subscrito correspondente do produto no objeto Array. Podemos obtê -lo com $ index.
//#1 <li v -for = "el em produtos"> {{$ index}} - {{el.name}} - ￥ {{el. preço}} - {{el. categoria}} </li> //#2 <li v -for = "(índice, el) em produtos"> {{index}} - {{el.name}} - ￥ {{el. preço}} - {{el. categoria}} </li>Propriedades computadas
No cenário de aplicação do cálculo dos atributos, ele será usado quando houver um valor variável que precise ser calculado por outras variáveis.
Por exemplo, se o usuário inserir um número X na caixa de entrada, ele retornará automaticamente ao usuário o x² quadrado do número. Você precisa vincular os dados da caixa de entrada e, quando os dados são modificados, eles calcularão imediatamente seu quadrado.
<div id = "VueInstance"> Digite um número: <input type = "text" v-model = "value"> <p> Resultado da computação: {{square}} </p> </div> <SCRIPT> var V = new Vue ({el: '#VueInstance', Data: {Value: 1}, computado: {square: function () {return this.value * this.value;}}}); </script>Calcule valores de definição de atributo Definindo uma série de funções, assim como quando definimos objetos de métodos antes. Por exemplo, o método quadrado é usado para calcular a variável "quadrado", e o valor de retorno de seu método é o produto de dois valores.
Em seguida, podemos usar calculados para fazer um exemplo mais complicado. O sistema levará aleatoriamente um número dentro de 1 ~ 10. O usuário pode inserir aleatoriamente um número dentro de 1 ~ 10 na caixa de entrada. Se a entrada do usuário corresponder ao número aleatório do sistema, o jogo será bem -sucedido, caso contrário, ele falhará.
<div id = "vueInstance"> insira o número dentro de 1 ~ 10: <input type = "text" v-model = "value"> <p> Resultado do cálculo: {{resultsg}} </p> </div> <SCRIPT> var V = new Vue ({el: '#VueInstance', Data: {Value: null, Randnum: 5 // O primeiro número aleatório é 5}, métodos: {getRandnum: function (min, max) {return Math.floor (Math.Random, () * (max - min + 1)) (this.value == this.randnum) {this.randnum = this.getrandnum (1, 10);PostScript
Até agora, você conseguiu dominar o uso básico de Vue, uma das estruturas mais simples e mais bonitas do mundo. Sua construção tem suas próprias idéias completas de design e está se tornando cada vez mais popular. Essa estrutura é pequena e leve o suficiente para oferecer a você uma experiência mais suave do usuário em seu desenvolvimento e melhorar efetivamente a eficiência do desenvolvimento. Eu dei uma série de exemplos acima, você dominou todos eles?