Vue es una biblioteca JavaScript pequeña y liviana. Tiene una API simple y fácil de entender que hace que los desarrolladores sean más fácil y más convenientes al desarrollar aplicaciones web. De hecho, lo que siempre ha hecho orgulloso de Vue es su conveniencia, ejecución y flexibilidad.
El propósito de este tutorial es usar algunos ejemplos para brindarle una visión general de algunos conceptos y características básicas. En otros tutoriales, aprenderá más características útiles de Vue para construir un proyecto escalable con Vue.
Enlace de datos MVVM
La esencia de MVVM es la vista y el modelo de enlace a través de la unión de datos, de modo que los cambios de datos se asignen automáticamente para ver las actualizaciones. Vue.js toma prestado el mecanismo de instrucción de Angular en el diseño de la API de enlace de datos: los usuarios pueden implementar la unión de datos a través de atributos HTML con prefijos especiales, o usar interpolación de plantilla de abrazadera curlosa común, o usar enlace bidireccional en elementos de formulario:
<!-Directiva-> <span v-text = "msg"> </span> <!-Interpolation-> <span> {{msg}} </span> <!-Binireccional enlace-> <input v-model = "msg">La interpolación es esencialmente una instrucción, solo para facilitar la escritura de plantillas. Durante la compilación de la plantilla, Vue.js creará un objeto de directiva para cada nodo DOM que necesita una actualización dinámica. Siempre que los datos observados por un objeto de instrucción cambien, realizará las operaciones DOM correspondientes en el nodo de destino límite. El enlace de datos basado en instrucciones permite que las operaciones DOM específicas se encapsulen razonablemente en las definiciones de instrucciones. El código comercial solo necesita involucrar plantillas y operaciones en el estado de datos, lo que mejora enormemente la eficiencia del desarrollo y la mantenimiento de la aplicación.
A diferencia de Angular, la API de Vue.js no tiene conceptos complicados como el módulo, el controlador, el alcance, la fábrica, el servicio, etc., y todo se basa en la "instancia de ViewModel":
<
Resultado de representación:
<div id = "app"> ¡Hola! </div>
Mientras se reproduce, Vue.js también ha completado la unión dinámica de los datos: si el valor de data.msg se cambia, el DOM se actualizará automáticamente. ¿No es muy simple y fácil de entender? Además, Vue.js también ha simplificado enormemente la API de directivas y filtros personalizados. Si tiene experiencia de desarrollo angular, comenzará muy rápidamente.
Implementación de la observación de datos
El principio de implementación de la observación de datos de Vue.js es esencialmente diferente al de Angular. Los lectores que conocen Angular pueden saber que las observaciones de datos de Angular utilizan mecanismos de verificación sucios. Cada instrucción tendrá un objeto correspondiente utilizado para observar datos, llamado observador; Habrá muchos observadores en un alcance. Cada vez que la interfaz debe actualizarse, Angular iterará a través de todos los observadores en el alcance actual, evalúe uno por uno y luego los comparará con los valores antiguos guardados antes. Si el resultado de la evaluación cambia, se activará la actualización correspondiente. Este proceso se llama ciclo de digestión. Hay dos problemas con la verificación sucia:
Cualquier cambio de datos significa que cada observador en el alcance actual debe reevaluarse, por lo que cuando el número de observadores es enorme, el rendimiento de la aplicación inevitablemente se verá afectado y es difícil de optimizar.
Cuando los datos cambian, el marco no puede detectar activamente la ocurrencia de cambios. Necesita activar manualmente el ciclo de resumen para activar la actualización DOM correspondiente. Angular evita este problema activando automáticamente la parte del ciclo Digest en la función del controlador de eventos DOM, pero todavía hay muchas situaciones que requieren que el usuario se active manualmente.
Vue.js utiliza un mecanismo de observación basado en la colección de dependencia. En principio, es lo mismo que el viejo knockout del marco MVVM. Los principios básicos de la colección de dependencia son:
Transformar los datos nativos en "objetos observables". Se puede valorar o asignar un objeto observable.
Durante el proceso de evaluación del observador, cada objeto observable que se toma registrará el observador actual como su suscriptor y se convertirá en una dependencia del observador actual.
Cuando se asigna un objeto observable dependiente, notifica a todos los suscriptores que reevalúen y desencadenan las actualizaciones correspondientes.
La ventaja de confiar en la recopilación es que puede rastrear de manera precisa y proactiva los cambios en los datos, y no hay dos problemas con las verificaciones sucias mencionadas anteriormente. Sin embargo, las implementaciones de recopilación de dependencia tradicionales, como Knockout, generalmente requieren envolver datos nativos para crear objetos observables. Deben usar llamadas de funciones al tomar valores y asignar valores. El método de escritura es engorroso y no lo suficientemente intuitivo cuando realiza operaciones de datos; Al mismo tiempo, el soporte de objetos con estructuras anidadas complejas no es ideal.
Vue.js utiliza el objeto de ES5. Define la propiedad del método para transformar directamente las propiedades del objeto de datos nativos en getters y setters, implementando la recopilación de dependencia y activación dentro de estas dos funciones, y admite perfectamente estructuras de objetos anidados. Para las matrices, los cambios en la matriz se escuchan mediante métodos mutables que envuelven la matriz, como Push. Esto hace que sea casi imposible operar los datos de Vue.js y operar objetos nativos [Nota: Al agregar/eliminar atributos, o modificar elementos específicos en una matriz, se debe llamar a una función específica, como OBJ. $ ADD (Key, Value) para activar una actualización. Esto está limitado por las características del idioma de ES5. ], La lógica de la operación de datos es más clara y suave, y la integración con soluciones de sincronización de datos de terceros también es más conveniente.
Sistema de componentes
En aplicaciones a gran escala, para la división del trabajo, la reutilización y la capacidad de mantenimiento, inevitablemente necesitamos abstraer la aplicación en múltiples módulos relativamente independientes. En un modelo de desarrollo más tradicional, solo haremos parte del componente al considerar la multiplexación; Pero de hecho, la interfaz de usuario similar a la aplicación puede considerarse completamente compuesta por árboles componentes:
Por lo tanto, los componentes se utilizan como un concepto central en el diseño de Vue.js. Se puede decir que cada aplicación Vue.js se desarrolla en torno a los componentes.
Registrar un componente vue.js es muy simple:
Vue.component ('my-component', {// Template Template: '<div> {{msg}} {{privateMSg}} </div>', // Los parámetros de aceptación: {msg: string <br>}, // Datos privados, debe regresar en la función para evitar múltiples instancias que compartan datos de objetos: function () 'Componente!'Después del registro, puede llamar a un componente infantil en la plantilla de componente principal como un elemento personalizado:
<my-component msg = "hello"> </component>
Resultado de representación:
<div> hello componente! </div>
El componente Vue.js puede entenderse como una clase ViewModel con comportamiento predefinido. Un componente puede predefinir muchas opciones, pero las más importantes son las siguientes:
Formato de componente de un solo archivo basado en herramientas de compilación
La biblioteca central de Vue.js solo proporciona API básicas y no tiene demasiadas restricciones sobre cómo organizar la estructura de archivos de la aplicación. Sin embargo, al construir aplicaciones grandes, se recomienda utilizar la combinación de Webpack + Vue-Loader para hacer que el desarrollo de componentes sea más eficiente.
Webpack es una herramienta de construcción de módulos front-end de código abierto desarrollada por Tobias Koppers. Su función básica es empaquetar múltiples archivos JavaScript escritos en formato de módulo en un archivo, y admitir los formatos CommonJS y AMD. Pero lo que lo hace único es que proporciona una potente API de cargador para definir la lógica de preprocesamiento para diferentes formatos de archivo, lo que nos permite usar CSS, plantillas e incluso formatos de archivo personalizados como módulos JavaScript. Webpack también puede implementar una gran cantidad de funciones avanzadas basadas en el cargador, como la fragmentación automática de envasado y la carga a la demanda, el posicionamiento automático de las referencias de recursos de imágenes, la decisión en Base64 en línea en línea basada en el tamaño de la imagen, el reemplazo en caliente de los módulos durante el desarrollo, etc. Se puede decir que es una de las soluciones más competitivas en el campo de la construcción delantera en la actualidad.
Desarrollé el complemento Vue-Loader basado en la API del cargador webpack, para que podamos escribir componentes VUE en un formato de archivo único (*.Vue):
<style> .my-component h2 {color: rojo;} </ystye> <template> <div> <h2> hello desde {{msg}} </h2> <omponente> </tomethercomponent> </div> </template> <script> // siga el módulo común de módulo var o otro componente ('. Module.Exports = {data: function () {return {msg: 'vue-loader'}}, componentes: {'otro-componente': otro componente}} </script>Al mismo tiempo, también puede usar otros preprocesadores en el archivo *.Vue, simplemente instale el cargador web correspondiente:
<style lang = "stylus">. my-component h2 color rojo </style> <template lang = "jade"> div.my-component h2 hola de {{msg}} </template> <script lang = "babel"> // use babel para compilar es2015export {data () {regreso {msg: ¡Hola hello: Hola babel! }}} </script>Dicho formato de componente integra los tres elementos de la plantilla, el estilo y la lógica de un componente en el mismo archivo, que es conveniente para el desarrollo, la reutilización y el mantenimiento. Además, Vue.js en sí admite la carga asincrónica de componentes, y combinado con la función de envasado de fragmentación de WebPack, puede implementar fácilmente la carga asíncrona de componentes a pedido.
Otras características
Vue.js tiene varias otras características que vale la pena mencionar:
Cree una instancia de Vue usando nuevo Vue ()
Podemos inicializar primero una página HTML, y luego necesitamos introducir el archivo JS de Vue. Hay muchas formas de presentarlo. Podemos introducir el CDN de Vue en Script, o descargar Vue's Min.js en el sitio web oficial, o instalar una dependencia de Vue usando NPM. Por conveniencia, este artículo se introduce usando CDN.
<! Doctype html> <html> <fead> <title> Aprenda desde Scratch </title> </head> <body> <script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </script> </body> </html>
Cuando se está desarrollando, asegúrese de estar utilizando versiones sin comprimir, porque las versiones sin comprimir proporcionarán advertencias detalladas útiles y le ahorrará mucho tiempo en la redacción de su código.
Primero escribimos un div en el cuerpo, creamos una instancia de Vue y luego vinculamos la instancia y el div.
Cuando cree una nueva instancia de VUE, use el constructor Vue () y señale su punto de montaje en su instancia. Este punto de montaje es el límite de la instancia de Vue que desea dividir. El punto de montaje y el límite de instancia corresponden uno por uno. Solo puede manejar transacciones dentro del límite de instancia en el punto de montaje, pero no transacciones fuera del límite de instancia en su punto de montaje.
El parámetro para configurar el punto de montaje en la instancia VUE es "EL", y el valor de EL puede definir por el elemento DOM.
< una nueva instancia de Vue y establecer el punto de montaje var v = new Vue ({el: '#VueInstance'}); </script> </body> </html>Como puede ver anteriormente, New Vue () crea una nueva instancia y luego especifica un elemento DOM como el punto de montaje de la instancia. Al definir el punto de montaje, usamos la ID del selector CSS para definirlo. El nombre instanciado también se puede definir por sí mismo para una llamada posterior.
Uso de V-Modelo para la unión de datos bidireccionales
Podemos usar V-Modelo para unir el cuadro de entrada de entrada, por lo que podemos usar dinámicamente para obtener el valor del objeto de datos. Puede pensar en V-Model como una propiedad especificada, al igual que el atributo de un elemento HTML. El enlace de datos de dos vías aquí se puede usar en muchos elementos de forma, como entrada, textura y selección.
VUE usa el comando V-Model para vincular los datos, y estos datos son los datos que esperamos actualizarse a través de las operaciones de entrada del usuario.
Por ejemplo, en nuestro ejemplo a continuación, queremos unir el nombre de datos en la etiqueta de entrada, y necesitamos implementar la declaración en el objeto de datos en la instancia VUE.
<div id = "vueinstance"> Ingrese su nombre: <input type = "text" v-model = "name"> </div>
<script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </script> // después de que esta línea se omitirá <script> var v = new vue ({el: '#vueInstance', data: {name: '_appian'}); </script>No importa cuántas veces ingrese el usuario, este nombre se actualizará automáticamente. Además, si se cambia el valor de nombre, también se modificarán los valores en otros lugares donde el nombre está asignado.
La razón para la modificación sincrónica de este cuadro de entrada y la asignación es utilizar la instrucción del modelo V para permitir que los datos se unan a través del flujo de datos subyacente y luego se modifiquen directamente. Este es el concepto de vinculación bidireccional de datos.
Para probar este concepto, podemos usar $ DATA para imprimir la asignación de los datos para ver.
<div id = "vueinstance"> Ingrese su nombre: <input type = "text" v-model = "name"> <p> {{$ data | json}} </p> //#1 <p> {{name}} </p> //#2 </div> <script> var v = new Vue ({el: '#VueInstance', data: {name: '_appian'}}); </script>Es 1:
$ Data es el objeto de datos observado por la instancia VUE. El tipo esencial es un objeto, por lo que se puede convertir a JSON. Se puede reemplazar con un nuevo objeto. La instancia proxera las propiedades de su objeto de datos.
{{}}, interpolar con dos tirantes rizados. El valor insertado aquí es el valor que cambia en tiempo real por $ datos.
| JSON, solo una forma más intuitiva de mostrar datos. También se puede considerar como un filtro, al igual que el efecto de json.stringify ().
Artículo 2:
{{nombre}} significa insertar variables de datos directamente en la expresión de interpolación y dos aparatos ortopédicos para mapear directamente el valor de nombre.
Vue es tan simple de realizar la unión de datos bidireccional. Solo requiere una instrucción del modelo V, sin usar JS o JQ para controlar los datos. Creo que puedes aclarar la lógica de los ejemplos anteriores.
Use V-On para la vinculación de eventos
VUE utiliza instrucciones V-ON para la escucha de eventos y la distribución de eventos. Puede crear un método para vincular el evento de escucha en una instancia VUE, y puede crear un método para enviar un evento de clic.
En el siguiente ejemplo, crearemos un método de opinión, que está vinculado a un botón. El efecto de hacer clic es aparecer en un cuadro de bienvenida con el nombre de usuario. Para asignar este método al botón, necesitamos usar V-ON: haga clic para vincular el evento.
<div id = "vueinstance"> Ingrese su nombre: <input type = "text" v-model = "name"> <button v-on: click = "say"> Bienvenido a hacer clic </botón> //#1 <botón @click = "decir"> bienvenido a hacer clic </botón> //#2 </div>
<script> var v = new Vue ({el: '#VueInstance', data: {name: '_appian'}, métodos: {say: function () {alert ('bienvenido' + this.name);}}); </script>Por supuesto, no solo puede vincular los eventos de clics, sino que también puede vincular otros eventos del mouse, eventos de entrada de teclado y otros tipos de eventos JS. Por ejemplo, V-ON: Mouseover, V-ON: Keydown, V-ON: Enviar, V-ON: KeyPress, V-ON: KeyUp.13, etc., o algunos otros eventos personalizados.
Durante el proceso de desarrollo, con frecuencia puede usar la unión de eventos. Es un poco problemático escribir V-On, por lo que en el ejemplo anterior, hay dos formas de escribir, #2 es la abreviatura del #1. Usando @ en lugar de V-On, no diré mucho aquí.
Use V-IF o V-Show para hacer juicios condicionales
Si queremos que el usuario vea la ventana emergente de bienvenida después de iniciar sesión, y si no estamos registrados, le daremos una interfaz de inicio de sesión. Vue nos proporcionará instrucciones V-IF y V-Show para controlar el contenido de visualización en diferentes estados de inicio de sesión.
Usando el ejemplo anterior, podemos usar el valor de LoginStatus para controlar si se debe iniciar sesión. Si es verdadero, se mostrará el cuadro de entrada y el botón para que pueda ver la ventana emergente de bienvenida. Sin embargo, si es falso (es decir, no se registra), solo puede ver el cuadro de entrada y el botón de envío para ingresar el número de cuenta, contraseña (no hay autenticación por el momento, solo se cambiará el estado de inicio de sesión).
<div id = "vueInstance"> // Sección que se muestra cuando LoginStatus es verdadero <sección V-IF = "LoginStatus"> Ingrese su nombre: <input type = "text" v-model = "name"> <botón v-on: hacer clic = "decir"> bienvenido a hacer clic </botón> <button @click = "switchLoginStatus"> loginloginstatus "> login </button/button/section LoginStatus es falso <section v-if = "! LoginStatus"> Loginperson: <input type = "text"> LoginPassword: <input type = "contraseña"> <botón @click = "switchLoginStatus"> Login </Button> </section> </div>
<script> var v = new Vue ({el: '#VueInstance', data: {name: '_appian', loginStatus: false}, métodos: {say: function () {alert ('bienvenido' + this.name);}, switchLoginStatus: function () {this.loginstatus =! this.loginstatus;})La ejecución de esto es la instancia V. Este punto es una pregunta que debe ser entendida por uno mismo, por lo que no hablaré de eso aquí.
En el ejemplo anterior, siempre que V-IF se reemplace con el show V, se puede obtener el mismo efecto. Tanto V-IF como V-Show admiten V-ELSE, pero el elemento hermano anterior de la etiqueta que une el comando V-Else debe tener V-IF o V-Show.
En el ejemplo anterior, simplemente haciendo clic en el botón "Iniciar sesión" o "Iniciar sesión" activará el método SwitchLoginStatus. Mientras se active este método, el estado de Loginstatus cambiará (cambiando en verdadero y falso), cambiando así el cambio de la condición del juicio resultado de V-IF en HTML. Basado en el estado booleano actual de Loginstatus, la sección mostrada es una sección en diferentes estados.
¿Cuál es la diferencia entre V-Show y V-IF?
Al cambiar los bloques V-IF, VUE tiene un proceso de compilación/desinstalación local, porque las plantillas en V-IF también pueden incluir la unión de datos o subcomponentes. V-IF es una representación condicional real porque asegura que los bloques condicionales destruyan y reconstruyan adecuadamente a los oyentes y subcomponentes de eventos dentro del bloque condicional durante el interruptor.
V -IF también es perezoso: si la condición es falsa durante la representación inicial, no se hace nada: la compilación local comienza cuando la condición se vuelve verdadera por primera vez (la compilación se almacenará en caché).
Por el contrario, V -Show es mucho más simple: los elementos siempre se compilan y se conservan, simplemente simplemente se cambian según CSS.
En términos generales, V-IF tiene un mayor consumo de cambio y el show de V tiene un mayor consumo de renderizado. Por lo tanto, es mejor cambiar el show en V con frecuencia, y es mejor cambiar V-si si las condiciones no son muy altas en tiempo de ejecución.
Esta diferencia puede no ser importante para su desarrollo actual, pero aún debe prestar atención y prestar atención, porque cuando el desarrollo de su proyecto se hace más grande, esto será importante.
Usar la lista de V-For a salida
Si usted es un hombre de negocios que ejecuta una plataforma de comercio electrónico, debe tener muchas páginas que necesiten representar la salida de la lista de productos. La Directiva V-FOR permite el bucle de nuestro objeto de matriz, pronunciado como "enrollar cada elemento en ArrayObj" en el camino del "elemento en ArrayObj".
En el siguiente ejemplo, utilizaremos la instrucción V-FOR para obtener una lista de productos. Cada producto estará en un LI, donde se producen el nombre, el precio y el tipo de producto del producto.
<div id = "vueinstance"> <ul> <li v -For = "el en productos"> {{el.name}} - ￥ {{El. precio}} - {{el. Categoría}} </li> </ul> </div> <script> var v = new Vue ({el: '#VueInstance', Data: {Products: [{name: 'Microphone', Price: 25, Categoría: 'Electronics'}, {Nombre: 'Case de la computadora portátil', precio: 15, Categoría: 'Accesorios'}, {Nombre: 'Cleaner', Price: 17, Categorial: 'Accessories'}, {Nombre de la categoría ' 70, categoría: 'Electronics'}, {nombre: 'Mouse', precio: 40, categoría: 'Electronics'}, {nombre: 'Auriculares', precio: 20, categoría: 'Electronics'}, {nombre: 'monitor', precio: 120, categoría: 'Electronics'}]}}); </script>Por supuesto, el objeto de matriz en los datos se puede definir sin la definición anterior. Podemos importarlo desde la base de datos o usar la solicitud AJAX para obtenerla. Esto es solo para la demostración de V-For.
A veces es posible que necesitemos obtener el subíndice correspondiente del producto en el objeto de matriz. Podemos obtenerlo con $ índice.
//#1 <li v -For = "el en productos"> {{$ index}} - {{el.name}} - ￥ {{El. precio}} - {{el. categoría}} </li> //#2 <li v -For = "(index, el) en productos"> {{index}} - {{el.name}} - ￥ {{El. precio}} - {{el. categoría}} </li>Propiedades calculadas
En el escenario de aplicación de los atributos de cálculo, se utilizará cuando hay un valor variable que debe calcularse por otras variables.
Por ejemplo, si el usuario ingresa a un número X en el cuadro de entrada, volverá automáticamente al usuario el cuadrado x² del número. Debe unir los datos del cuadro de entrada y luego, cuando se modifiquen los datos, calculará inmediatamente su cuadrado.
<div id = "vueinstance"> Ingrese un número: <input type = "text" v-model = "valor"> <p> resultado de computación: {{cuadrado}} </p> </div> <script> var v = new Vue ({el: '#VueInstance', data: {valor: 1}, calculado: {square: function () {return this.value * this.value;}}}); </script>Calcule los valores de definición de atributos definiendo una serie de funciones, al igual que cuando definimos los objetos de métodos antes. Por ejemplo, el método cuadrado se usa para calcular la variable "cuadrado", y el valor de retorno de su método es el producto de dos this.values.
A continuación, podemos usar calculado para hacer un ejemplo más complicado. El sistema tomará aleatoriamente un número dentro de 1 ~ 10. El usuario puede ingresar aleatoriamente un número dentro de 1 ~ 10 en el cuadro de entrada. Si la entrada del usuario coincide con el número aleatorio del sistema, el juego tendrá éxito, de lo contrario fallará.
<div id = "vueinstance"> Ingrese el número dentro de 1 ~ 10: <input type = "text" v-model = "valor"> <p> resultado de cálculo: {{resultsmg}} </p> </div> <script> var v = new vue ({el: '#VueInstance', data: {value: null, randnum: 5 // El primer número aleatorio es 5}, métodos: {getRandnum: function (min, max) {return Math.floor (math.random () * (max - min + 1) + min;}}, calculado: calculado: calculado: calculado: {d. (this.value == this.randnum) {this.randnum = this.getRandnum (1, 10);posdata
Hasta ahora, ha podido dominar el uso básico de Vue, uno de los marcos más simples y hermosos del mundo. Su construcción tiene sus propias ideas de diseño completas y se está volviendo cada vez más popular. Este marco es lo suficientemente pequeño y ligero como para brindarle una experiencia de usuario más suave en su desarrollo y mejorar efectivamente la eficiencia del desarrollo. He dado una serie de ejemplos anteriores, ¿los has dominado todos?