O Vue.js é uma biblioteca para criar interfaces da Web orientadas a dados. O objetivo do vue.js é implementar a ligação de dados responsivos e os componentes de exibição combinados através da API mais simples possível. (Esta é uma explicação oficial!)
O editor nunca usou o AngularJS, nem o React.js foi usado. Não posso explicar as diferenças nos três em detalhes. Se você quiser saber, há uma análise oficial. Clique aqui para visualizá -lo.
O editor está envolvido no desenvolvimento do front-end há mais de um ano. No começo, havia muitas tecnologias no desenvolvimento do front-end. O editor era impotente e não podia levar em consideração. Após o entendimento, ele escolheu aprender o caminho de aprendizado de aprender com fusões básicas e jQuery nativas. O editor usa o vue.js devido às necessidades de negócios. Por que você não escolhe o AngularJS? Na verdade, você não pode abandonar o jQuery ao mesmo tempo. Vue.js e jQuery podem ser perfeitamente compatíveis. Por causa deste projeto, o editor trabalha horas extras há muito tempo e estuda constantemente para evitar o aumento do tempo de desenvolvimento do projeto. Sem mais delongas, vamos iniciar alguns resumo do editor de aprendizado do editor. Se você não escrever bem, não se acostuma a isso. Escrever artigos sempre foi minha fraqueza. . . .
Aqui está o exemplo de Vue, como a cadeia pai
O componente filho pode ser aprovado isso. Parente de seu componente pai. A instância raiz pode ser acessada usando isso.root. O pai tem uma matriz this.frescren e todos os seus elementos; Obviamente, no projeto, nossos componentes não podem ter apenas um ou dois. Quando há muitos componentes, é difícil lembrar a localização do componente em crianças. Podemos usar a diretiva V-Ref para criar um gancho para o nosso componente. Este gancho é o índice quando nossos outros componentes acessam o componente.
// Este é um dos meus componentes <msg v-ref: msgs> </msg> // No momento, estabelecemos um índice de msgs para este componente msg // podemos acessar o componente var vm = new vue ({}); Var Children = vm. $ refs.msgs // Acesse nossos componentes infantis dessa maneira // V-rref é uma matriz ou objeto, que é uma coleção de componentes que criamos todos os ganchos de referência.Aqui, mostrarei uma foto e dê uma olhada no conteúdo relacionado aos pais, filhos e US $ refs (parece que a imagem é um pouco embaçada e não será uma imagem dinâmica completa. É embaraçoso e não pode ver com clareza. Você pode criar uma demonstração e imprimi -la!)
Embora possamos acessar diretamente os componentes em toda a instância dessa maneira, não é recomendável fazê -lo, porque é muito ruim para as crianças modificarem diretamente o estado do componente pai, o que fará com que os componentes dos pais e da criança fortemente acoplados. Idealmente, cada componente pode apenas modificar seu próprio estado porque o escopo de cada componente é independente;
Nesse caso, Vue também nos traz seus eventos personalizados
Use $ despacho () para despachar eventos e os eventos borbulham ao longo da cadeia pai;
Use $ transmitido () para transmitir eventos e os eventos são transmitidos a todos os descendentes.
Parece um pouco abstrato, é mais fácil entender com um exemplo
// $ despacho () Caso de bolhas <!-Exemplo-> <div id = "app"> <!-Componente Comunicação 1-> <Section> <div> <Label para = ""> Msg Data: </label> {{msg}} </div> <!-subcomponente-> <sg> </msg> </section> <//> </Div> <! V-Model = "Msg"> <a href = "JavaScript:;" @click = "add_data"> add </a> </div> </modemplate> <cript> vue.component ('msg', {// o açúcar de sintaxe é usado para registrar o componente diretamente e o modelo de shin/shelt: '}#msg', data: function () {return {msg: 'abc'}}}}}}}}}}}: 'Methods', function: function {return {msg: 'abc'}}}}}: Evento, o método de despacho () será acionado; this. $ parent.add (par_msg); Evento que ouve o subcomponente de resposta correspondente 'add_msg': function (msg) {// add_msg é um método usado para ouvir o subcomponente.Depois de ler este código, acredito que todos conhecem o uso de $ Dispatch (). De fato, existem dois parâmetros nele. O primeiro parâmetro é que o componente pai ouve um nome de método no objeto de eventos do componente filho. Os dois devem ser consistentes; O segundo parâmetro são os dados atualizados pelo componente filho, que também é passado para os dados a serem atualizados de forma síncrona para o componente pai. Em seguida, o componente pai usa esse parâmetro para executar operações correspondentes.
// O uso do método $ transmission () é o mesmo que o $ Dispatch (). A diferença é que o objeto de evento é criado no componente filho, e a função acionada no componente pai é o contrário. O que queremos dizer aqui é que, se os dados do componente filho dependem completamente dos dados do componente pai, não há necessidade de usar o método geral de entrega de eventos. Você só precisa obter os dados do componente pai por meio de adereços e vinculá -los ao componente filho.
Método <!-Componente de Comunicação 2 $ transmission ()-> <Section> <h3> Fonte de dados adicionada pelo componente pai: </h3> <div> <gravador para = ""> id: </label> <div> <input type = "text" v-model = "id"> </div> <div> <div> <bel = "" Nome: </" V-Model = "Nome"> </div> </div> <div> <Label para = ""> host: </crety> <div> <input type = "text" v-model = "inst"> </div> </div> <div> <bel para = ""> host: </etc. para = ""> </cret> <div> <a href = "javascript:;" @click = "add_table"> add </a> </div> </div> <h3> A tabela a seguir é a informação do componente infantil: </h3> <!-vincular os dados table_data do componente pai ao componente filho-> <Broadcase: Data = "Table_data"> </roadcase> </Seção> <Magacão id = "Broadcase"> <div> <table> <Thead> <tr> <th> id </th> <th> nome </th> <th> hobbies </th> </tr> </tbody> <tr v-for = "List em dados"> <td> {list.id}}} </td> <t> {{{. list.inst}} </td> </tr> </tbody> </ table> </div> </modemplate> <cript> vue.component ('Broadcase', {// Este é o açúcar de sintaxe usado para registrar o componente e o modelo simples e o shortcut: '#Broadcase', Props: ['Data'], Dados. '#App', Data: {tabela_data: [{id: 1, nome: 'gjei', inst: 'gjweir'}, {id: 2, nome: 'jiUyer', inst: 'oiUyt'}]}, métodos: {add_table: function () {var = {{{) {}]}, métodos: {add_table: function () {var = {{) this.inst}; this.table_data.push (set); // this. $ transmitido ('teste', set);Você pode clicar aqui para testar os dois exemplos mencionados acima. O arquivo foi enviado para a demonstração de comunicação de componentes do Space Vue-Child Space Personal VUE
Quando terminei de escrever isso, olhei para trás e vi que o conteúdo que escrevi parecia estar um pouco confuso, o que era realmente envergonhado! Pensei em escrever um blog e construir minha própria biblioteca de notas há muito tempo, mas quando tentei escrevê -lo antes, eu realmente não conseguia. Recentemente, decidi insistir em escrever, não importa como escrevo. E se meu estilo de escrita de repente melhorar um dia!
De fato, a aplicação não é muito difícil. Na verdade, ele fornece monitoramento de interface de API correspondente. Como operar e alterar o aplicativo de projeto real ainda precisa ser escrito por nós mesmos. A chave é melhorar nosso nível de JS. Afinal, existem aplicativos da Web cada vez mais complexos! Espero que os alunos que gostem do front-end possam se incentivar na estrada para JS.