introduzir
Vue.js é uma biblioteca usada para criar interfaces de aplicativos da web
Tecnicamente, o vue.js se concentra na camada de viewmodel do modo MVVM, que conecta modelos de ligação e ligação de dados de duas maneiras. A operação DOM real e o formato de saída são abstraídos em instruções (diretivas) e filtros (filtros)
No campo da filosofia, tente tornar a API de ligação de dados MVVM o mais simples possível. Modularidade e composibilidade também são importantes considerações de design. O Vue não é uma estrutura abrangente, é projetada para ser simples e flexível. Você pode usá-lo para protótipo rapidamente ou misturar e combinar com outras bibliotecas para definir a pilha front-end.
Vue. A API JS refere -se a AngularJS, Knockoutjs Ractive.js rivets.js. Apesar das semelhanças, acredito que o vue.js fornece uma maneira valiosa de obter seu valor em algumas estruturas existentes agora
Mesmo se você já estiver familiarizado com alguns desses termos, é recomendável que você passe a seguinte visão geral dos conceitos, pois os conceitos desses termos podem diferir abaixo do vue.js
Visão geral do conceito
ViewModel
Um objeto, sincroniza modelos e vistas. No vue.js, o ViewModels é o construtor de vue instanciado ou subclasse
var vm = new Vue ({ / * opções * /})Este é o principal objeto com o qual você interagirá como desenvolvedor usando o vue.js. Para mais detalhes, consulte Classe: Vue.
Visualizar
O html/dom real visto pelo usuário
vm. $ el // a vista
Ao usar o vue.js, você dificilmente tocará a operação DOM, exceto suas próprias instruções personalizadas. Quando os dados são atualizados, a atualização da visualização será acionada automaticamente. A atualização da visualização pode ser alcançada com precisão para cada nó TestNode. Eles também são lotados e executados de forma assíncrona para fornecer melhor desempenho.
Modelo
Este é um objeto JavaScript ligeiramente modificado
vm. $ dados // o modelo
No vue.js, o modelo é apenas um objeto JavaScript simples, um objeto de dados, você pode manipular suas propriedades e visualizar modelos, observar o deles e, em seguida, obter notificações para mudar. O Vue.js usa o Getter/Setter do ES5 para converter propriedades no objeto de dados HU, o que permite a operação direta sem verificação suja.
O objeto de dados terá mutações nos momentos apropriados, portanto, modificá -lo é o mesmo que modificar a VM. $ Dados por referência. Isso também facilita várias instâncias do ViewModel para observar a mesma peça de dados.
Para detalhes técnicos, consulte as opções de instanciação: dados.
Diretivas
O atributo HTML privado diz ao Vue.js para fazer algum processamento sobre DOM
<div v-text = "mensagem"> </div>
O elemento div aqui tem uma instrução V-Text e o valor é mensagem. Significa dizer ao vue.js para manter o conteúdo deste nó div sincronizado com o atributo da mensagem no ViewMode
As instruções podem encapsular qualquer operação DOM. Por exemplo, o V-ATTR opera em um elemento de atributo, repeat clonando um elemento com base em uma matriz, escuta adicional de eventos V-on, discutiremos isso mais tarde.
Ligações de bigode
Você também pode usar ligações no estilo de bigode, em texto e propriedades. Eles são traduzidos para a diretiva V-ATTR V-Text. Por exemplo:
<div id = "Person-{{id}}"> hello {{name}}! </div>Embora conveniente, há algumas coisas para as quais você precisa prestar atenção:
Se um atributo SRC de imagem estiver definido, uma solicitação HTTP será enviada; portanto, quando o modelo estiver analisando pela primeira vez, é melhor usar o V-ATTR
Ao analisar o HTML, o Internet Explorer excluirá o atributo de estilo interno inválido; portanto, se quisermos apoiar o IE vinculando CSS, sempre uso o estilo V
Dentro do V-HTML, você pode usar três aparelhos para lidar com HTML não escapado, mas isso causará possíveis ataques XSS e pode abrir janelas. Portanto, é recomendável fazer isso apenas quando os dados são absolutamente seguros, ou HTML não confiável através de um filtro de pipeline personalizado
Filtros
Esses dados brutos podem ser processados usando funções antes de atualizar a visualização. Eles estão usando uma diretiva ou ligação de "pipeline":
<div> {{message | capitalize}} </div>Agora, antes que o conteúdo de texto da DIV seja atualizado, o valor desta mensagem será processado através da função de capitalização. Para detalhes, consulte Filtros em profundidade.
Componentes
No vue.js, um componente é um construtor de modelo de visualização simples registrado com vue.component (id, construtor). Com um ID associado, a diretiva V-Component para o modelo de outro modelo de exibição pode ser aninhada. Esse mecanismo simples torna o modelo de visão declarada reutilizado e combinado de maneira semelhante aos componentes da Web sem a necessidade do navegador mais recente ou dos poli -preenchimentos pesados. Ao dividir o aplicativo em componentes menores, o resultado é uma base de código altamente dissociada e sustentável. Para mais detalhes, consulte Compondo ViewModels.
Um exemplo rápido
<div id = "Demo"> <H1> {{title | Uppercase}} </h1> <ul> <li v-repeat = "Todos" v-on = "clique: done =! done"> {{content}} </li> </ul> </div> var demo = new vue ({el: '#demo', dados: {title: 'Todos', Todos: [{done: true, conteúdo: 'aprenda javascript'}, {done: false, content: 'aprenda vue.js'}]}})Tradução aproximada, aponte quaisquer erros