Como usuário leal do vue.js, acho que é necessário escrever alguns artigos para elogiar esse belo idioma. Minha avaliação geral é "simples, mas elegante, pequena, mas não falta de pessoas talentosas". A seguir, apresentará vue.js em torno desta frase, na esperança de estimular seu interesse em vue.js.
Introdução ao vue.js
O autor do vue.js é Evan você (você Yuxi), que trabalha no Google Creative Lab. Embora a Vue seja um projeto pessoal, eu pessoalmente acredito que não é inferior ao AngularJS do Google em termos de perspectivas de desenvolvimento. Farei algumas comparações simples com o Vue (versão Angular 1.0+).
As principais características do Vue são as apresentadas em seu site oficial (http://cn.vuejs.org/):
(1) Conciso (2) leve (3) Rápido (4) Driver de dados (5) Componente para o módulo (6)
Simples
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.
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) liga atributos dinâmicos
<a v-bind: href = "url"> </a>
Pode ser abreviado como:
<a: href = "url"> </a>
(3) modificadores convenientes
<!-Evite os eventos de clique de bolhas->
<a @click.stop = "doSomething"> </a>
<!-Os eventos são acionados apenas quando a tecla Enter é pressionada->
<input @keyup.enter = "submeter">
(4) características práticas dos parâmetros
<!-Debounce define um atraso mínimo->
<input v-model = "note" debounce = "500">
<!-Atualize os dados em "Alterar" em vez de "entrada"->
<input v-model = "msg" preguiçoso>
Que tal isso, é tão elegante?
Pequeno
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?
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: http://es6.ruanyifeng.com/#docs/module
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)}}})}Para visualizar a configuração e uso de roteamento específicos, visite a documentação oficial fornecida por: http://vuejs.github.io/vue-ruter/zh-cn/index.html
Resumir
Pessoalmente, acredito que algumas tecnologias de front-end são integradas. Aprender um idioma ou estrutura em si não é aprender sua tecnologia. O mais importante é aprender seu pensamento. Somente o nível de pensamento é estendido e você achará fácil aprender outras tecnologias. O que Vue nos traz é um novo pensamento no front-end para resolver problemas.
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.