Basicamente, resolvemos todas as diretrizes no site oficial: http://vuejs.org/guide/index.html Aqui, pegamos um aplicativo de lista de tarefas como um exemplo para reunir todos os relevantes apenas os. Todo o código deste artigo está no github https://github.com/lihongxun945/vue-todolist
Instância de vue
Um aplicativo Vue é iniciado por uma bota de instância de root Vue, e a instância de vue é criada assim:
var vm = new vue ({// options})Uma instância é na verdade uma VM no MVVM. Todos os atributos nos dados no objeto de configuração de entrada serão montados na instância. Para evitar a nomeação de conflitos, os métodos internos do VUE serão montados na instância, com propriedades começando com $.
A instância passará pelo seguinte ciclo de vida da criação à destruição:
Durante a inicialização, aproximadamente três etapas:
• Vincular o monitoramento de dados, ou seja, o monitoramento dos dados
• Modelos de compilação
• Insira o documento ou substitua o DOM correspondente
# Vue Basic Sintaxe
Ligação de dados
O Vue usa uma sintaxe de mastache. As sintaxias de ligação comumente usadas são divididas em várias categorias:
• Sintaxe mastache, como {{data}} {{data | filtro}}
• Propriedades de ligação em V-Bind, como V-Bind: Href, V-Bind: Classe
• Eventos de ligação v-on, como V-ON: Clique, V-On: Enviar
Entre eles, V-* é diretiva
exemplo:
<div v-v-bind: class = "[Classa, ISB? Classb: '']">>
Cálculo de atributos
O Vue suporta uma sintaxe de cálculo de atributos muito interessante. Você pode especificar que um atributo é calculado por outros atributos, para que você não precise usar o $ Watch para implementá -lo:
var vm = new vue ({el: '#example', dados: {a: 1}, computado: {// Um getter compactado b: function () {// `` `aponta para a instância da vm retornar this.a + 1}}})## A sintaxe relacionada ao controle e lista de processos inclui `v-if`,` v-Show`, `V-Else`,` V-Fe`
Forma
Ligação de dados bidirecional:
<input type = "text" v-model = "message" placeholder = "editar me">
<entrada de entrada = "caixa de seleção" id = "jack" value = "jack" v-model = "checkedNames">>
## O método de animação de implementação é o mesmo do Angular e React e é implementado adicionando e excluindo classes. # Componente
Uso básico de componentes
A definição de componente inclui duas partes:
1 Crie classe de componente:
var perfil = vue.extend ({modelo: "<div> lily </div>"});2 Registre um nome de tag:
Vue.component ("me-perfil", perfil);
Dessa forma, podemos usar este componente através do tagname:
<div id = "TODO"> <My-Profile> </my-profile> <formulário V-on: submit = "Add" v-on: submit.prevent> <input type = "text" v-model = "input"/> <input Type = "subit" value = 'Add'/> </morm> ... </div>
Vue.component ("me-perfil", perfil); é um registro global. Se for usado apenas em uma determinada página, poderá ser registrado localmente:
var vm = new Vue ({el: "#todo", componentes: {"my-profile": perfil}, ...}Como nossa instância de vue está ligada ao elemento TODO, é inválido se o meu perfil for colocado fora desse elemento. Somente colocando -o no interior, será inicializado por esta instância do Vue.
Notas:
Os parâmetros que podem ser passados pelo construtor Vue podem ser basicamente usados no vue.extend, mas você precisa prestar atenção aos dois parâmetros de EL e dados. Para evitar compartilhar o mesmo objeto entre diferentes casos, é mais confiável sempre retornar um novo objeto por meio da função:
var myComponent = vue.extend ({data: function () {return {a: 1}}})Como os parâmetros são iguais, eles são realmente a mesma coisa, mas um é um componente e o outro é usado para orientar o Vue para iniciar.
Notas sobre modelos
Como o Vue é um DOM nativo, algumas tags personalizadas podem não atender ao padrão DOM. Por exemplo, se você deseja personalizar um TR na tabela, se a inserção do meu componente diretamente não atender à especificação, você deve escrevê-lo assim:
<tabela> <tr is = "my-component"> </tr> </ table>
Adereços que passam dados
No Vue, cada componente é independente e não pode e não deve acessar diretamente os dados da classe pai. Então, é muito semelhante ao método da React passar dados para subcomponentes através de adereços?
Ao contrário do React, os subcomponentes no Vue precisam declarar seus próprios adereços primeiro:
var perfil = vue.extend ({props: ["name"], modelo: `<h2> {{name}} 's list </h2> <h4> {{name}} é uma boa garota </h4>`});Então podemos passar parâmetros como este ao usar o perfil:
<nome do my-perfil = 'lily'> </my-profile>
Isso é para passar os parâmetros através dos literais, portanto o valor passado deve ser uma string. Outra maneira é passar os parâmetros dinamicamente e passar os parâmetros através de V-Bind. Você pode vincular dados em parâmetros bidirecionais ou não da coragem:
<my-profile v-bind: name = 'input'> </my-profile>
Se V-Bind for uma string, é o campo correspondente nos dados do componente pai, por exemplo, o acima é o valor da entrada que está ligado em ambas as direções. Se for um número, está ligado a um número.
O Vue também pode especificar explicitamente a ligação de dados unidirecional ou bidirecional:
<!-inadimplência, encadernação unidirecional-> <filho: msg = "parademsg"> </fid> <!-encadernação explícita bidirecional-> <filho: msg.sync = "paradermsg"> </fulher> <!-Explictic Ongle Binding-> <Child: msg.once = "parademsg"> </filho>
Verificação de adereços
Um bom componente deve sempre verificar se os parâmetros estão corretos primeiro e também pode precisar definir os valores padrão de alguns parâmetros:
var perfil = vue.extend ({input: {type: string}});Comunicação do componente pai-filho
Os adereços mencionados acima são realmente uma maneira de o componente pai passar mensagens para o componente filho.
No componente filho, existe um. No entanto, agora devemos evitar fazê -lo. Como o próprio componente é encapsular a lógica independente, se você acessar diretamente os dados do componente pai, ele destruirá o encapsulamento do componente.
Portanto, ainda devemos nos comunicar através do componente pai que passa adereços para o componente filho.
Obviamente, os adereços só podem fazer retornos de chamada. Esta questão foi discutida no React. O método de reação é usar adereços para passar uma função de retorno de chamada para o componente filho. Na verdade, eu realmente não gosto dessa maneira de passar funções de retorno de chamada, prefiro o caminho dos eventos. A Vue Neutronics pode se comunicar com o componente pai por meio de eventos. O envio de mensagens para o componente pai é através disso. $ Despacho e enviar mensagens para o componente filho é através disso. Aqui, as mensagens são enviadas a todos os pais e filhos, mas uma vez executado um retorno de chamada, ela parará, a menos que a função de retorno de chamada retorne explicitamente true.
Dividimos a lista de TODO anterior em diferentes componentes para implementá-la, para que possamos experimentar como nos comunicar com os componentes em duas vias. Dividimos dois componentes, ou seja, listamos e formamos.
O formulário é responsável pelo processamento da entrada do usuário e pelo envio de uma mensagem para o componente pai ao enviar o formulário. O código é o seguinte:
var form = vue.extend ({props: {nome de usuário: {type: string, padrão: "não nomeado"}}, dados: function () {return {input: "",};}, model: `<h1> {{{username} 's-list </h1> <form v-v-v-v-v-{{{username}' '' type = "text" v-model = "input"/> <input type = "submit" value = 'add'/> </mand> `, métodos: {add: function () {this. $ despacho (" add ", this.input);A lista é responsável apenas por exibir a lista e lidar com operações de verificação de usuários. Depois de receber a mensagem Add, ele adicionará uma entrada por si mesma:
var list = vue.extend ({modelo: `<ul> <li v-for = 'TODO na lista'> <Rótulo v-bind: class =" {done: TODO.DONE} "> <input Type =" CheckBox "v-Model =" TODO.DONE "/> {{To.title}} </" Array}}, dados: function () {return {list: []Então, como esses são dois componentes, é claro, é necessária uma instância de vue para inicializar a inicialização, nossa instância é a seguinte:
var vm = new vue ({el: "#todo", componentes: {"TODO-FORM": form, "TODO-List": list}, eventos: {add: function (input) {this. $ transmitido ("add", input);}}});Observe que, de fato, a forma e a lista são componentes logicamente paralelos, para que não tenham relacionamento pai-filho e todos sejam filhos da VM. Aqui, a VM encaminhará para listar depois de receber a mensagem do formulário.
O código HTML é mais simples:
<div id = "TODO"> <TODO-FORM UserName = 'lily'> </todo-forma> <ToD-list> </tdo-list> </div>
Slot
O slot pode ser usado para inserir o HTML renderizado do componente pai no componente filho. Não está claro quando isso será necessário, e isso é muito invasivo para o componente filho.
Componentes de comutação dinâmica
Esta função parece um pouco redundante. Em muitos casos, devemos alternar através do código lógico, e não através de componentes dinâmicos embutidos. No entanto, é muito conveniente implementar uma função semelhante à comutação de guias.
Aqui adicionamos uma página sobre a lista de tarefas. Então, primeiro precisamos transformar a VM em um componente, chamado TODO, que é a página inteira do TODO:
var TODO = Vue.Extend ({Modelo: `<div id =" TODO "> <TOM-FORM UserName = 'lily'> </dodo-forma> <ToM-list> </tdo-list> <slot> não-fort: </slot> </div, componentes: {" {"Todo-fordo": To-List: isto. $ transmitido ("add", entrada);De fato, a primeira linha de alterações é a primeira linha.
Então precisamos criar um componente sobre o componente:
var about = vue.extend ({modelo: `<div id =" sobre "> <p> sobre a lista v0.1.0 </p> <p> conteúdo aqui </p> </div>`});Em seguida é o ponto -chave. Queremos criar uma VM de instância, responsável por alternar essas duas páginas:
var vm = new Vue ({el: "Body", Data: {currentView: "TODO"}, componentes: {"TODO": TODO, "Sobre": Sobre}});Aqui, definimos um campo Currentview, que, é claro, pode ser qualquer nome, e depois usamos uma tag de componente especial para alternar componentes:
<componente: is = "currentview"> </ componente> <ul> <li> <belty> <input type = "radio" name = 'page' value = 'TODO' v-model = 'currentView'> home </elatbel> <li> <li> <brety> <bel> <input Type = "Radio" name = 'Page' = 'sobre' V-Model = '
Há duas coisas a serem observadas no código acima:
• Use o componente de tag especial e, em seguida, use a propriedade: IS para alternar componentes.
• Rádio modifique o campo Currentview através da ligação bidirecional, para que você possa alternar depois de clicar.
O princípio de implementação da ligação de dados
O VUE chama reativa de ligação bidirecional, que pode ser traduzida como ligação de dados responsivos. Ele é implementado internamente através dos métodos Getter e Setter definidos pelo ES5, portanto não suporta o IE8 e os seguintes navegadores. Há duas coisas fáceis para cometer erros nesta implementação:
• Se você adicionar e excluir diretamente atributos nos dados, é impossível detectar. Geralmente, a exclusão não será possível, mas pode ser adicionada dinamicamente. No momento, ele deve ser adicionado através da vm. $ Set ("nome", valor).
• As alterações dentro do objeto não podem ser detectadas, ou seja, elas só podem detectar alterações na propriedade dos dados. Se dados.a for um objeto, então data.ab = 1 Essa alteração não pode ser detectada. Nesse caso, você deve criar um novo objeto e atribuí -lo a dados.
Mecanismo de atualização assíncrona
A atualização de Vue para Dom é assíncrona! Esse assíncrono é realizado em uma fila assíncrona, mas essa fila assíncrona será executada no loop atual do evento. Portanto, se você modificar os dados, é errado ir ao DOM imediatamente para fazer a operação de consulta. Neste momento, o DOM ainda não foi atualizado. A maneira correta é fazer isso:
vm.msg = 'nova mensagem' // altere datavm. $ el.textContent === 'nova mensagem' // falsevue.nextTick (function () {vm. $ el.textContent === 'nova mensagem' // true})Ou isso:
vm. $ nextTick (function () {this. $ el.textContent === 'nova mensagem' // true})Demorou muito tempo para ler os componentes. Aqui está outro ponto: diretiva
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.