Los marcos frontales como AngularJS pueden hacer que sea muy conveniente para nosotros desarrollar potentes aplicaciones de una sola página. Sin embargo, a veces grandes marcos como Angular son demasiado grandes para nuestros proyectos y no se pueden usar muchas funciones. En este momento, necesitamos evaluar la necesidad de usarlo. Si solo necesitamos agregar algunas funciones a una página web simple, el uso de Angular será demasiado problemático, y la instalación, configuración, redacción de redacción, diseño de controles, etc. parecerá demasiado engorroso.
En este momento, necesitamos una solución más liviana. Vue.js es una buena opción. Vue.js es un marco que se centra en los modelos View (ViewModal). El modelo de vista es un puente para la comunicación de datos entre la interfaz de usuario y el modelo de datos, realizando la unión de datos bidireccionales entre la UI y el modelo de datos. No es un "marco completo", sino un marco simple y flexible centrado en las capas de vista.
A continuación, utilizaremos una aplicación de memorando simple para aprender sobre los conceptos básicos de Vue.js. Para que todos presten más atención a Vue.js en sí, diseñamos una aplicación de cliente basada en datos locales. Al final de este artículo, mencionaremos la interacción entre Vue.js y el backend.
Preparación
Obtenemos Vue.js y Bootstrap a través de NPM primero (no es necesario, aquí es aplicar su biblioteca de estilo) e ingrese lo siguiente en la línea de comando:
NPM Instalar vue bootstrap
Luego cree dos archivos:
touch index.html app.js
También agregue el siguiente contenido a index.html
< Barra de navegación-> <Al Nav> <Viv> <a> <i> </i> Vue Memo </a> </div> </arb> <!-Partes principales de la aplicación-> <div id = "eventos"> <!-Agregar un formulario-> <div> <div> <h3> Agregue un evento </h3> </div> <iv> </div> </iv> </div> <! " <Div> </div> </div> </div> <!-js-> <script src = "node_modules/vue/dist/vue.js"> </script> <script src = "app.js"> </script> </body> </html>
La etiqueta <div> con ID "eventos" es la parte central de esta aplicación. Después de eso, crearemos una instancia VUE para esta parte central.
Crear una instancia de Vue
Primero, creemos una instancia VUE y establezcamos el atributo "El" de esta instancia en "#Events". De esta manera, la instancia estará vinculada a un contenedor con la identificación de "eventos".
// App.jsnew vue ({// y el contenedor vinculante el con id "eventos": '#events'});En este punto, la función de Vue entrará en vigencia en los eventos Div#. Antes de agregar otro contenido, agregamos algunas propiedades necesarias a la instancia de Vue creada:
// App.js New Vue ({// El contenedor que vincula el ID de "eventos": '#Events', // En el atributo de datos, definimos los datos que interactúan con los datos de la página web: {}, // Cuando la aplicación se cargue, la función en el atributo Ready se ejecutará. {}});El atributo de datos es un objeto que declara todos los datos en el modelo de vista de nuestra aplicación.
El atributo Ready es una función que se ejecutará cuando se cargue la aplicación. Por lo general, se llaman a otros métodos aquí para inicializar los datos requeridos por la aplicación.
El método del método define los métodos que deben usarse en esta aplicación.
Agregar contenido a la forma
Necesitamos ingresar los detalles del memorando en el formulario. Utilizamos el selector de tiempo nativo de HTML5 para establecer el tiempo del contenido de memo. (Tenga en cuenta que esta función no es aplicable en el navegador Firefox, se recomienda usar Chrome o Safari)
<Div> <input placeHolder = "Event Name" V-Model = "Event.name"> </div> <viv> <Textarea PlaceEnly @Click = "AddEvent"> Enviar </botón> </div>
Agregamos una directiva "V-Modelo" a la etiqueta de entrada y la etiqueta TextAREA. Similar al "modelo NG" de Angular, el valor de este modelo V especifica los datos vinculados a esta etiqueta en el modelo de vista. Estos datos no solo están disponibles aquí, sino también en otras partes del contenedor.
Agregamos una instrucción "@click" al botón Enviar. Esta instrucción se abrevia y el nombre completo debe ser "V-On: Haga clic". Su función es vincular a un oyente para los eventos de clic a este botón. Cuando se activa el evento de clic, se ejecutará la función del oyente en la instrucción @Click. En este ejemplo, vinculamos la función AddEvent al botón Enviar. También podemos unir otros eventos, y la regla de escritura es @Event Name = "Función de escucha". Si queremos unir una función de oyente F al evento Keydown, podemos escribir esto: @keydown = "f" o v-on: keydown = "f"
En este punto, si obtiene una vista previa de la página web, verá el siguiente contenido:
Agregar datos
Hemos mencionado el método AddEvent antes, que se utiliza para agregar nuevos datos de memo.
Ahora definiremos este método y agregaremos algunos datos necesarios
// App.js ... Data: {Event: {name: '', descripción: '', fecha: ''}, eventos: []}, // La función en el atributo listo se ejecutará cuando la aplicación esté cargada está lista: function () {// cuando la aplicación está cargada, necesitamos que los métodos inicializar los datos this.fetchevents ();}, // los métodos usamos en la aplicación. define a method to obtain data fetchEvents: function() { var events = [{ id: 1, name: 'Have a meeting', description: '9 am in the 21st floor conference room', date: '2015-09-10' }, { id: 2, name: 'Shopping', description: 'Buy a power bank', date: '2015-10-02' }, { id: 3, name: 'Learn', description: 'Learn tutorials en Vue ', Fecha:' 2016-03-11 '}]; // $ El set es un método proporcionado por Vue para insertar datos en una matriz. La vista se actualizará al ejecutarlo esto. $ Set ('eventos', eventos); }, // Inserte datos en una matriz de eventos addEvent: function () {if (this.event.name) {this.events.push (this.event); this.event = {nombre: '', descripción: '', fecha: ''}; }}}En la propiedad de datos, definimos un objeto de evento y una matriz de eventos, que representa los eventos y la matriz de eventos respectivamente. Estos datos se cargarán cuando se cargue la aplicación. Si no tenemos objetos de evento predefinidos, aunque se pueden implementar funciones posteriores, el navegador informará este error:
Significan que si los datos que usa en su aplicación no se declaran en el atributo de datos, el rendimiento de la aplicación se verá afectado. Por lo tanto, los datos que utilizamos en nuestra aplicación se declaran mejor en el atributo de datos.
En la propiedad lista definimos el método Fetchevents para obtener datos. En este método agregamos datos a la vista a través del método VM. $ SET. Su función es similar al método push de una matriz, y también actualiza la vista. El parámetro de este método debe ser un teclado de cadena, que representa los datos entrantes. Para un uso específico, consulte aquí.
Finalmente, en la propiedad del método, definimos el método AddEvents para verificar si existe el valor de Event.Name, y si es así, agregue el evento a la matriz de eventos. Después de eso, los datos en el objeto del evento se borrarán y el formulario también se borrará.
Agregue una lista de elementos
Usamos una lista de cosas para enumerar todas las cosas:
<Div> <a href = "#" v-For = "Event in Events"> <h4> <i> </i> {{Event.name}}} </h4> <h5> <i v-if = "Event.Date"> </i> }} </p> <botón @click = "DeleteEvent ($ index)"> Eliminar </botón> </a> </div>Utilizamos la Directiva V-FOR para lotes de elementos de renderizado con la misma estructura DOM y diferente contenido de visualización. En este ejemplo, agregamos una directiva V-FOR a una etiqueta, que atravesará los datos en la matriz de eventos, y representamos cada datos de transversión con el evento. Los elementos con la Directiva V-FOR agregada aplicarán los resultados de cada recorrido en los elementos infantiles y los mostrarán repetidamente. Los amigos que han usado el motor de plantilla, React o Angular pueden estar más familiarizados con un uso similar. En nuestro ejemplo, el contenido de las etiquetas H4, H5, P y del botón se mostrarán repetidamente, y el número de bucles es la longitud de la matriz de eventos. Los niños con elementos directivos V-For se llaman plantillas, y los datos en la plantilla están envueltos en aparatos dobles. En este ejemplo, los datos son las diversas propiedades del objeto de evento (nombre, fecha y descripción).
Notará que algunos de los elementos de la plantilla han agregado directivas V-IF. Esta instrucción actúa como representación condicional. El valor de V-IF es una condición de juicio. Si el resultado es verdadero, el elemento se representará, de lo contrario no se representará. Además, agregamos una instrucción de clic al elemento del botón y llamamos al método deletente para eliminar la materia (la definición específica se dará a continuación). El índice de parámetro $ representa el número del elemento actualmente atravesado en la matriz.
Actualice la página y encontraremos que todos los elementos se enumerarán en el lado derecho de la página. Después de ingresar el contenido en el formulario de la izquierda y hacer clic en el botón "Enviar", los nuevos elementos se agregarán automáticamente a la lista a la derecha.
Definamos el método deletente
EleteEvent: function (index) {if (confirmar ("¿Está seguro de que desea eliminar este evento?")) {// $ Eliminar es un método de conveniencia Vue similar a Splice this.events. $ remove (index); }}En este método, primero le preguntamos al usuario si seguramente eliminará el elemento. Si hace clic en "Aceptar", entonces el elemento se eliminará del DOM a través del método de eliminación $ eliminación predefinido de Vue.
Interacción con el backend
Al igual que Angular, el front-end y el back-end de Vue están separados, y la interacción con el back-end se completa a través de las solicitudes HTTP. Existen muchas herramientas interactivas, puede usar el objeto familiar de $ .AJAX, nativo xmlhttprequest u otras bibliotecas de terceros, o probar el recurso de vue.
Aquí hay una breve introducción a Vue-Resource. Vue-Resource es un complemento diseñado específicamente para VUE para enviar solicitudes HTTP. Admite plantillas de promesa y URI, y también proporciona herramientas como Interceptor. Veamos nuestro ejemplo anterior. Cambiamos la adquisición de asuntos para obtenerlos del servidor. En este momento, necesitamos modificar el método de Fetchevents: (supongamos que el backend proporciona servicios relacionados con asuntos a través de la URL de API/eventos, lo mismo a continuación)
fetchevents: function () {this. $ http.get ('api/events'). entonces (function (events) {this. $ set ('events', events);}). capt (function) {console.log (error);});}Si la adquisición es exitosa, entonces la declaración de la función entonces se ejecutará y todavía se llama el método $ set, pero los eventos de parámetros de entrada se recuperan del servidor.
Si modificamos el addEvent, necesitamos enviar una solicitud de publicación:
addEvent: function () {this. $ http.post ('api/events', this.event) .then (function (respuesta) {this.events.push (this.event); console.log ("event agregado!");}) .Catch (function (error) {console.log (error);});}Del mismo modo, el método de eliminación de asuntos se puede modificar de la siguiente manera:
deleteEvent: function (index) {this. $ http.delete ('api/events/' + event.id) .then (function (respuesta) {this.events. $ remoAquí pasamos la ID de la materia al servidor para decirle al servidor que elimine la ID de la materia para facilitar el servidor para determinar qué materia eliminar.
Conclusión
Los amigos que han usado Angular y React encontrarán que Vue y todos son similares: instrucciones similares al procesamiento angular y modular similar a React. Sin embargo, Vue es obviamente diferente de ellos. Es más ligero y fácil de usar. No necesita hacer configuraciones complicadas como Angular, ni necesita aprender nuevos conceptos como New Virtual DOM, JSX, etc. como React. Por lo tanto, si su aplicación no es muy grande, también podría considerar el uso de VUE como marco de su aplicación.
Lo anterior es el tutorial de introducción rápida para Vue.js presentado por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!