1. Introdução ao vue.js
1. As principais características do vue: (1) conciso (2) leve (3) rápido (4) driver de dados (5) componente do módulo (6)
(1) conciso
Aqui está um pedaço do código do Angular para implementar a ligação bidirecional
// html <corpo ng-app = "myApp"> <div ng-antroller = "myctrl"> <p> {{note}} </p> <input type = "text" ng-model = "note"> </div> </body> // jsvar mymodule = angular.module "> !Em seguida, olhe para o Código de Vue:
// html <body> <div id = "app"> <p> {{note}}} </p> <input type = "text" v-model = "note"> </div> </body> // jsvar vm = new Vue ({el: '#app', dados: {note: ''}})Em comparação, eu pessoalmente acho que o estilo de escrita de código de Vue é mais conciso e fácil de entender.
(2) não sem elegância
Embora a Vue seja uma estrutura relativamente leve, é simples, leve e muito fácil de usar. A API que ele fornece também é muito fácil de entender e também fornece algumas instruções e atributos muito convenientes.
Por exemplo:
1) Vincular o evento de clique
<a v-on: click = "Dosomething"> </a>
Pode ser abreviado como:
<a @click = "doSomething"> </a>
2) Vincular atributos dinâmicos
<a v-bind: href = "url"> </a>
Pode ser abreviado como:
<a: href = "url"> </a>
3) Modificador conveniente
<!-impedir que o evento de clique em Bublebled-> <a @click.stop = "doSomething"> </a> <!-Os eventos são acionados apenas quando a tecla Enter é pressionada-> <input @keyup.enter = "submit">
4) Características práticas dos parâmetros
<!-Debounce Define um atraso mínimo-> <input v-model = "note" debounce = "500"> <!-Atualize dados em "alteração" em vez de "eventos de entrada"-> <input v-model = "msg" lazy>>
Que tal isso, é tão elegante?
(3) Dicas pequenas
Falando em pequenez, devemos primeiro prestar atenção ao tamanho do código -fonte do Vue. O código -fonte da versão de produção da Vue (ou seja, versão Min) é de apenas 72,9kb. O site oficial diz que o GZIP é de apenas 25,11kb após a compressão, que é meio menor que 144kb do Angular.
Uma vantagem da compactação é que ele permite que os usuários escolham soluções correspondentes mais livremente e oferece aos usuários mais espaço em termos de correspondência de outras bibliotecas.
Por exemplo, o núcleo do Vue não inclui funções de roteamento e Ajax por padrão, mas se você precisar de roteamento e AJAX em seu projeto, poderá usar diretamente o Router Vue da biblioteca oficial e o plug-in de terceiros, fornecido pela Vue. Ao mesmo tempo, você também pode usar outras bibliotecas ou plug-ins que deseja usar, como o Ajax do JQuery, etc.
Não parece muito flexível?
(4) Existem muitos grandes mestres
Embora o Vue seja pequeno, é "Sparrow é pequeno e tem todos os órgãos internos" e também é fácil criar aplicativos em larga escala.
1) modular
Combinada com algumas ferramentas de construção de módulos de terceiros, como CommonJs, requerjs ou SEAJs, a modularidade do código pode ser facilmente alcançada.
No entanto, aqui não recomendo o uso das ferramentas de construção acima mencionadas. Atualmente, é a solução mais popular usar diretamente a função modular do ES6 e depois empacotá -la de acordo com o WebPack.
Se você não entende as funções do módulo ES6, consulte o endereço do link para obter detalhes:
Em artigos futuros, também o apresentarei, incluindo a configuração do Webpack.
2) componente
A função de componente da Vue é um destaque disso. Ao colocar o código HTML, CSS e JS de um determinado componente na página em um arquivo .vue para gerenciamento, a manutenção do código pode ser bastante aprimorada.
Por exemplo:
// app.vue <modemplate> <div v-text = "note"> </div> </modemplate> <cript> export padrão {data () {return {note: 'Este é o modelo html de um componente! '}}} </script> <style scoped> .xox {color: #000;} </style>Também podemos escrever alguns idiomas de pré -processamento no componente:
// app.vue <modelo lang = 'jade'> div (class = "box" v-text = "text") </modemplate> <cript> export default {data () {return {note: 'Este é o modelo HTML de um componente! '}}} </script> <style lang = "styles">. cor da caixa: #000 </style>Obviamente, precisamos empacotá -lo através do WebPack. Recomenda-se usar o WebPack + Vue-carregador e usar a sintaxe ES6 ao mesmo tempo. Babel precisa ser instalado para conversão. Como o artigo é uma breve discussão sobre o vue.js, não darei uma introdução aprofundada aqui.
3) roteamento
Como o Angular, a Vue tem seus recursos de roteamento. Através da função de roteamento, podemos realizar o carregamento sob demanda de cada componente e criar facilmente um aplicativo de uma página. Aqui está um arquivo de configuração de roteamento simples:
// router.js'Use Função padrão Strict'Export (roteador) {router.map ({'/': {component: function (resolve) {require (['./ components/foo.vue'], requer)}}, '/foo': {component: function (functue ') {requent) (. }}, '/bar': {componente: function (resolve) {requer (['./ componentes/bar.vue'], resolve)}}})}2. Introdução aos componentes da página inicial
Na verdade, não é um componente de ponta. Pelo contrário, é realmente apenas um componente simples de paginação de mesa. É principalmente porque preciso de um componente de paginação de tabela no meu projeto recente. Os componentes da paginação da biblioteca oficial da vue componentes são poderosos demais ou não são adequados para mim, então escrevi um para me contentar com isso. Talvez alguém como eu precise de um componente de paginação tão simples para implementar funções simples de paginação. Vou compartilhar aqui, e todos preencherão os boxes.
Se você precisar de componentes de ponta, você pode mudar para a biblioteca oficial de componentes do VUE
(1) Como usar
No arquivo de componentes .vue, escrevemos modelo como este, ou seja, código HTML:
<TABLE> <TH> <TH> </TH> <th> Nome </th> <the> conteúdo </th> <the> observa </th> </tr> </thead> <tbody> <ttr v-for = "Data em TWLIST"> <td v-text = "Data.num"> </td> <td v-v-text = "Data.num> v-text="data.contents"></td> <td v-text="data.remark"></td> </tbody> <tfoot> <tr> <td colspan="4"> <div> <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen"></boot-page> </div> </td> </tr> </tfoot> </tabela>
Na tag <arot-age> tag async refere-se a obter dados do lado do servidor, False não é; Os dados são uma matriz de dados tabulares estáticos; A lente é uma variedade de linhas exibidas por página; Page-len é o número de páginas que podem ser exibidas;
O código JavaScript que usa dados estáticos, ou seja, o conteúdo da tag de script é o seguinte:
<script> import bootPage from './components/BootPage.vue' export default { data () { return { lenArr: [10, 50, 100], // Display length per pageLen: 5, // Number of pages that can be displayed: [ {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'}, {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'}, {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'}, {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'}, {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'} ], // table raw data, no need to use tableList when using server data: [] // post-paging data returned by the pagination component} }, components: { bootPage }, events: { // table data returned by the pagination component 'data' (data) { this.tableList = data } } } </script>Geralmente, raramente usamos dados tabulares estáticos, e os dados da maioria dos aplicativos são obtidos do lado do servidor, então aqui está um método para obter dados de paginação por servidor:
O componente HTML que usa dados do servidor é o seguinte:
<boot-page: async = "true": lens = "lenarr": url = "url": página-len = "pagelen": param = "param"> </oot-page>
onde URL é o endereço de solicitação do servidor; Param é o objeto de parâmetro que precisa ser enviado ao servidor;
O código usando os dados do servidor JavaScript é o seguinte:
<SCRIPT> Importar o BootPage de './components/bootpage.vue' export padrão {data () {return {lenarr: [10, 50, 100], // Exibir comprimento por pagelen: 5, // Número de páginas que podem ser exibidas URL: '/bootpage/', // Pedax param: {} componente de paginação}}, métodos: {refresh () {this. $ transmitido ('refresch') // uma função de refresh de tabela é fornecida aqui}}, componentes: {bootpage}, eventos: {// os dados da tabela retornados pelo componente da paginação (aqui são os dados retornados pelo servidor) '' (dados) {Dados).Nota: Além do conteúdo da matriz passado para a tabela de componentes, o servidor também precisa de um nome de chave do número total de páginas, denominado Page_num
(2) código -fonte do componente
Quanto à implementação da paginação, o código -fonte aqui não será exibido. Eu carreguei todo o código -fonte para o meu github, endereço
Deixe -me lembrá -lo com antecedência: como levei várias horas para expulsar esse componente, devo ter sido inadequado em formatos de escrita e especificações dos componentes do VUE e não fui completamente independente, então preencho conscientemente o poço. Eu só vou compartilhar aqui.
Obviamente, você também pode modificar o código do componente à vontade para se adequar ao uso do seu projeto. Afinal, é bastante complicado implementar componentes de paginação grandes e completos.
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
Para tutoriais nos componentes vue.js, clique no tutorial de aprendizado de componentes do Tópico Especial Vue.js para aprender.
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.