Como usuario leal de Vue.js, creo que es necesario escribir algunos artículos para alabar este hermoso idioma. Mi evaluación general es "simple pero elegante, pequeña pero no carece de personas talentosas". Lo siguiente le presentará Vue.js en torno a esta oración, con la esperanza de estimular su interés en Vue.js.
Introducción a Vue.js
El autor de Vue.js es Evan You (You Yuxi), que trabaja en Google Creative Lab. Aunque Vue es un proyecto personal, personalmente creo que no es inferior a los AngularJs de Google en términos de perspectivas de desarrollo. Haré algunas comparaciones simples con Vue (versión Angular 1.0+).
Las características principales de VUE son las presentadas en su sitio web oficial (http://cn.vuejs.org/):
(1) Concise (2) Ligero (3) Rápido (4) Controlador de datos (5) componente amigable con el módulo (6)
Simple
Aquí hay una parte del código de Angular para implementar la vinculación bidireccional
// html<body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-model="note"> </div></body>// jsvar myModule = angular.module('myApp', []); mymodule.controller ('myctrl', ['$ scopp', function ($ scope) {$ scope.note = '';]);Luego mira el código de Vue
// html <body> <div id = "app"> <p> {{nota}} </p> <input type = "text" v-model = "nota"> </div> </body> // jsvar vm = new Vue ({el: '#App', Data: {nota: ''}})En comparación, personalmente creo que el estilo de escritura de código de Vue es más conciso y fácil de entender.
No sin elegancia
Aunque Vue es un marco relativamente liviano, es simple y liviano y muy fácil de usar. La API que proporciona también es muy fácil de entender, y también proporciona algunas instrucciones y atributos muy convenientes.
Por ejemplo:
(1) Atar el evento Haga clic
<a v-on: click = "dosomething"> </a>
Se puede abreviar como:
<a @click = "dosomething"> </a>
(2) Atar atributos dinámicos
<a v-bind: href = "url"> </a>
Se puede abreviar como:
<a: href = "url"> </a>
(3) modificadores convenientes
<!-Prevenir eventos de clics de burbujas->
<a @click.stop = "dosomething"> </a>
<!-Los eventos se activan solo cuando se presiona la tecla ENTER->
<input @keyup.enter = "enviar">
(4) Características prácticas de los parámetros
<!-Debuncia establece un retraso mínimo->
<input v-model = "nota" debuncion = "500">
<!-Actualizar datos en "cambiar" en lugar del evento "entrada"->
<input v-model = "msg" perezoso>
¿Qué tal si se siente tan elegante?
Pequeño
Hablando de pequeñez, primero debemos prestar atención al tamaño del código fuente de Vue. El código fuente de la versión de producción de Vue (es decir, la versión min) es de solo 72.9kb. El sitio web oficial dice que GZIP tiene solo 25.11 kb después de la compresión, que es medio menor que los 144 kb de Angular.
Una ventaja de la compacidad es que permite a los usuarios elegir las soluciones correspondientes más libremente, y brinda a los usuarios más espacio en términos de coincidir con otras bibliotecas.
Por ejemplo, el núcleo de VUE no incluye las funciones de enrutamiento y AJAX de forma predeterminada, pero si necesita enrutamiento y AJAX en su proyecto, puede usar directamente el Router Vue Oficial y el recurso de Vue de terceros proporcionado por Vue. Al mismo tiempo, también puede usar otras bibliotecas o complementos que desea usar, como el AJAX de JQuery, etc.
¿No se siente muy flexible?
Hay muchos grandes maestros
Aunque Vue es pequeño, es "Sparrow es pequeño y tiene todos los órganos internos", y también es fácil construir aplicaciones a gran escala.
(1) modular
Combinado con algunas herramientas de construcción de módulos de terceros, como CommonJS, RequestJ o SEAJS, la modularidad del código se puede lograr fácilmente.
Sin embargo, aquí no recomiendo usar las herramientas de construcción mencionadas anteriormente. Actualmente es la solución más popular para usar directamente la función modular de ES6 y luego empaquetarla en consecuencia con Webpack.
Si no comprende las funciones del módulo ES6, consulte: http://es6.ruanyifeng.com/#docs/module
En futuros artículos, también lo presentaré, incluida la configuración de Webpack.
(2) componente
La función de componentización de Vue es lo más destacado de la misma. Al colocar el código HTML, CSS y JS de un componente en la página en un archivo .Vue para la administración, el mantenimiento del código puede mejorarse enormemente.
Por ejemplo:
// App.vue<memplate> <div v-text = "nota"> </div> </template> <script> Exportar default {data () {return {nota: 'Esta es la plantilla HTML de un componente! '}}} </script> <style Scoped> .Box {Color: #000;} </style>
También podemos escribir algunos idiomas de preprocesamiento en el componente:
// App.vue <Template lang = 'jade'> div (class = "box" v-text = "text") </template> <script> Exportar default {data () {return {nota: 'Esta es la plantilla HTML de un componente! '}}} </script> <style lang = "Styles">. Color de caja: #000 </syle>Por supuesto, necesitamos empaquetarlo a través de Webpack. Se recomienda usar WebPack + Vue-Loader y usar la sintaxis ES6 al mismo tiempo. Babel necesita ser instalado para su conversión. Debido a que el artículo es una breve discusión de Vue.js, no daré una introducción en profundidad aquí.
(3) Enrutamiento
Al igual que Angular, Vue tiene sus capacidades de enrutamiento. A través de la función de enrutamiento, podemos realizar la carga a pedido de cada componente y construir fácilmente una aplicación de una sola página. Aquí hay un archivo de configuración de enrutamiento simple:
// router.js'use strict'Export Function predeterminado (router) {router.map ({'/': {componente: function (resolve) {request (['./ components/foo.vue'], resolve)}}, '/foo': {componente: function (resolve) {require (['./ componentes/foo.vue'], resolve '], resuelve'], resuelve '], resuelve'], resuelve '], resuelve'], resuelve '], resuelve'], resuelve '], resuelve'], resuelve '] }, '/bar': {componente: function (resolve) {require (['./ componentes/bar.vue'], resolve)}}})}Para ver la configuración y el uso de enrutamiento específico, visite la documentación oficial proporcionada por: http://vuejs.github.io/vue-router/zh-cn/index.html
Resumir
Personalmente, creo que algunas tecnologías frontales están integradas. Aprender un idioma o marco en sí no es aprender su tecnología. Lo más importante es aprender su pensamiento. Solo el nivel de pensamiento se extiende, y le resultará fácil aprender otras tecnologías. Lo que Vue nos trae es un nuevo pensamiento en el front-end para resolver problemas.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.