Vue.js (pronunciado / vjuː /, similar a view) es un marco progresivo para construir interfaces de usuario.
Vue solo se enfoca en la capa de vista y adopta un diseño de desarrollo incremental de abajo hacia arriba.
El objetivo de Vue es implementar el enlace de datos de respuesta y los componentes de vista combinados a través de la API más simple posible.
Vue es muy sencillo de aprender. Este tutorial se basa en la prueba de la versión Vue 2.1.8.
Antes de leer este tutorial, lo que necesita saber:
· HTML
· CSS
· JavaScript
Configurar el entorno
Si quieres hacerlo bien, primero debes perfeccionar tus herramientas. Nuestro plan de aprendizaje comienza con aprender a construir el entorno requerido por Vue. No hace falta decir que el entorno de nodo y npm es necesario. Ahora el proceso de front-end es muy popular , y básicamente se desarrollarán nuevas tecnologías sobre la base de este proceso, solo es necesario colocarnos sobre el gigante XX e instalar *. Supongo que ya tiene el último nodo y npm en su máquina, entonces solo necesitamos ejecutar los siguientes comandos:
$ npm instalar -g vue-cli
Una vez completada la compilación, simplemente ingrese un directorio preparado previamente, como el directorio de demostración, y luego realice las operaciones de inicialización en el directorio:
$ vue init paquete web myProject
El parámetro webpack significa que el proyecto myProject lo ayudará a empaquetar automáticamente el código durante las etapas de desarrollo y finalización, como combinar archivos js en un solo archivo y combinar y comprimir archivos CSS. Si no conoce el paquete web, es mejor que lo entienda primero. Por supuesto, si no lo entiende, no nos afectará que lo bajemos.
Durante el proceso de inicio, se le pedirá que defina algunas descripciones para el proyecto. Puede ignorar la información, como la versión. Siga escribiendo y para confirmar la omisión. Una vez completado, aparecerá la siguiente interfaz. El cuadro rojo le indicará que Haz la siguiente operación Síguela Sigue escribiendo el código.
cd myProject
npm install
npm ejecutar dev
npm install es la dependencia necesaria para instalar el proyecto. La comprensión simple es instalar algunos complementos necesarios, lo que lleva un tiempo;
npm run dev es para comenzar a ejecutar nuestro proyecto. Una vez que se ejecuta este comando, después de un corto tiempo, el navegador debe abrir automáticamente un enlace con la pestaña http: // localhost: 8080 / # /, este enlace es nosotros La página de inicio del local proyecto desarrollado es ahora, si no, significa que algo salió mal. Pase a la sección de comentarios para responder. . .
(PD: después de que se complete el desarrollo, la ejecución de npm run build compilará nuestro código fuente para generar el código de lanzamiento final, en el directorio dist)
Eche un vistazo a los archivos que Vue genera para nosotros. Entre ellos, debemos prestar atención a los siguientes archivos
package.json guarda cierta información de dependencia, config guarda alguna configuración de inicialización del proyecto, build guarda alguna configuración de inicialización del paquete web, index.html es nuestra página de inicio, además de estos, el código más crítico está en el directorio src e index está en muchos idiomas de servidor El medio está preestablecido como la página de inicio, como index.htm, index.php, etc .; abra webpack.base.conf.js en el directorio de compilación, y verá este código
Explique que nuestro archivo js de entrada está en main.js en el directorio src, luego analizaremos estos códigos de inicialización primero;
Sigue el código
La arquitectura central de Vue, según la explicación oficial y la comprensión personal, radica principalmente en los dos módulos de componentes y enrutamiento. Siempre que comprenda el contenido ideológico de estos dos módulos, el resto de la API es solo cuestión de minutos. . Entonces, en mi serie de artículos, le enseñaré a desarrollar una biblioteca de componentes de front-end en torno a componentes y enrutamiento. Este proceso también es un proyecto de capacitación que personalmente aprendo. Personalmente, siento que después de haberlo hecho paso a paso, mi comprensión de Vue se puede considerar como un maestro, mejor que Leer la documentación del libro 10 veces. Eso es algo que decir. ¡Veamos primero el código predeterminado más básico generado por Vue!
// La versión de compilación de Vue para cargar con el importcomando // (solo en tiempo de ejecución o independiente) se ha configurado en webpack.base.conf con un alias.import Vue de 'vue'import App from' ./App'import router from './router'
Vue.config.productionTip = falso
/ * eslint-disable no-new * / new Vue ({
el: '#app',
enrutador
modelo: '',
componentes: {App}
})
Primera oracion
importar Vue desde 'vue'
Esta oración es fácil de entender, al igual que desea presentar jQuery, vue es jquery-min.js, luego Vue es $; luego se introduce el archivo ./App, que es App.vue en el directorio y main.js en el mismo nivel Archivo; los archivos de importación en Vue se pueden importar directamente, y la extensión del archivo puede ser .vue, que es el tipo de archivo propio de Vue. El paquete web mencionado anteriormente empaquetará archivos js y css. Por la misma razón, configure el complemento vue en webpack Más tarde (la configuración predeterminada del proyecto), webpack puede integrar y empaquetar archivos .vue, que es similar a requerir en nodeJs.
Hablando del archivo App.vue, esta es una vista (o componente y página). Imagina que no hay nada en nuestro index.html. Solo hay una vista. Esta vista es equivalente a un contenedor, y luego la colocamos en este contenedor Varios bloques de construcción (otros componentes u otras páginas), el contenido en App.vue del que hablaremos más adelante;
importar enrutador desde './router'
Este código introduce una parte de la configuración de enrutamiento, y lo mismo se dice más adelante (no se preocupe por eso pronto)
La siguiente instanciación de nuevo Vue es en realidad equivalente a la inicialización habitual cuando escribimos js, y luego declaramos el: '# app', lo que significa que todas las vistas se colocan en el elemento dom cuyo valor de id es app, y los componentes indican la introducción El archivo, es decir, el archivo App.vue anterior, el contenido de este archivo se escribirá en #app en dicha etiqueta. En general, este código significa poner App.vue en #app, y luego consultar Our # aplicación.
importar Vue desde 'vue' importar la aplicación desde './ Aplicación' / importar el componente de la aplicación / importar el enrutador desde './enrutador' / importar la configuración de enrutamiento /
Vue.config.productionTip = falso
/ * eslint-disable no-new * / new Vue ({
el: '# app', / El efecto final reemplazará el elemento div con id app en la página /
enrutador, / usar enrutamiento /
template: '', / Dígale a la página que este componente está envuelto con dicha etiqueta y úselo /
componentes: {App} / Indique a la página actual que desea utilizar el componente de la aplicación /
})
Componente de una sola página
Bien, ahora abre nuestro archivo App.vue. En Vue, el sitio web oficial lo llama un componente. Una sola página significa que la estructura, el estilo y el código lógico están escritos en el mismo archivo. Cuando importamos este archivo, es bastante En cuanto a la introducción de la estructura, el estilo y el código JS correspondientes, ¿no es esto lo que más queremos ver al realizar la componenteización de front-end? El ASP y PHP anteriores también tenían esas ideas de archivos.
El lado del nodo puede reconocer el archivo .vue porque el paquete web mencionado anteriormente extrae html, js y css en el archivo .vue en un nuevo archivo único al compilar.
Los componentes de una sola página se reflejarán completamente en el combate real más adelante, así que no haré demasiada descripción aquí;
Vea que nuestro archivo se divide en tres partes, a saber
Mirando hacia atrás en la página de nuestro navegador, la imagen está ahí, pero ¿dónde está el código para el texto y el enlace a continuación? Aquí está a punto de comenzar a involucrar el enrutamiento.
enrutamiento
Aquí está el concepto general de enrutamiento: el enrutamiento php tradicional se devuelve al front-end con diferentes códigos de página por parte del servidor de acuerdo con una cierta coincidencia de reglas de URL, como la siguiente dirección
https://isux.tencent.com/about y https://isux.tencent.com/recruit
Tenga en cuenta que solo hay acerca de y recluta Estas direcciones sin xxx.html en realidad se asignan a ciertos archivos del lado del servidor a través de una capa de encapsulación. De la misma manera, la interfaz también puede implementar un enrutamiento simple basado en puntos de anclaje (no es necesario actualizar la página)
https://zhitu.isux.us/index.php/preview/install#mac
Entre ellos #mac está nuestra ruta de anclaje, preste atención a la dirección que abrimos en el navegador al principio:
http: // localhost: 8080 / # / ，
El enrutamiento nos permite visitar páginas como http: // localhost: 8080 / # / about / o http: // localhost: 8080 / # / recruite sin actualizar y mostrarlas directamente. Ahora regrese al archivo App.vue que acabamos de abrir para ver esta línea de código
Este código coloca un contenedor de vista de enrutamiento en la página. Cuando visitemos http: // localhost: 8080 / # / about /, se incluirá el contenido de about, visite http: // localhost: 8080 / # / recrute el contenido de reclutar en
De esta manera, no importa si abrimos http: // localhost: 8080 / # / about / o http: // localhost: 8080 / # / recru, las imágenes de la página son partes públicas y se convierten solo en el contenido dentro del enrutador, luego el enrutador ¿Quién controla el contenido?
El src / main.js mencionado anteriormente tiene un código para introducir el enrutador.
importar enrutador desde './router'
Ahora abramos el archivo js en el directorio del enrutador.
importar Vue de 'vue'import Router de' vue-router'import Hello from '@ / components / Hello'import Acerca de' @ / components / about'import Recruit from '@ / components / recru'
Vue.use (enrutador)
exportar nuevo enrutador predeterminado ({
rutas: [
{
camino: '/',
nombre: 'Hola',
componente: Hola
},
{
ruta: '/ acerca de',
nombre: 'acerca de',
componente: Acerca de
},
{
ruta: '/ recrutar',
nombre: 'reclutar',
componente: Reclutar
}
]
})
Primero se introdujo el plug-in de enrutamiento vue-router, y luego se declaró explícitamente el enrutamiento Vue.use (Router). Tenga en cuenta que Hola, Acerca de, etc.son todas las páginas (también pueden ser componentes), luego registre el enrutador y luego comience a configurar el enrutamiento.
La configuración del enrutamiento debe ser clara de un vistazo. Se asignan diferentes páginas (o componentes, páginas y componentes son en realidad el mismo concepto) a diferentes rutas. El parámetro de nombre no es importante sino que solo se usa para identificación. Puede comprender desde aquí que el contenido del cuadro rojo mencionado anteriormente es en realidad el contenido de Hello. Puede comprenderlo abriendo Hello.vue en el directorio de componentes.
Aquí puede completar la configuración del enrutamiento. Personalmente, me gusta poner la página en el directorio de páginas y los componentes en el directorio de componentes. Algunas personas pueden preguntar si desea visitar http: // localhost: 8080 / # / about / me How Para configurarlo es muy simple, solo agregue una configuración de subruta más a la ruta, de la siguiente manera:
{
ruta: '/ blog',
nombre: 'blog',
componente: Blog,
niños: [
{
camino: '/',
componente: página1
},
{
ruta: 'info',
componente: página2
}
]
}
Cuando visite / blog, visitará la página del Blog. Simplemente coloque un enrutador en el Blog, y luego, cuando visite http: // localhost: 8080 / # / blog /, el contenido de la página1 se colocará en el contenedor de enrutamiento. y visite http: // Cuando localhost: 8080 / # / blog / info, el contenido de page2 se colocará en el contenedor de enrutamiento
//blog.vue
resumen
A lo largo del proceso que acabamos de aprender, desde la inicialización hasta la visualización de la página, el flujo de arquitectura de la página de Vue es más o menos así
Primero, resuma el contenido anterior:
1. Configuración del entorno
2. Lógica de código
3. Componente de una sola página (fácil de usar)
4. Enrutamiento
5. Subruta
El proceso anterior es una breve introducción cuando comenzamos a contactar con Vue. Después de decir que aprender Vue puede dominar los conceptos básicos de componentes y enrutamiento, será muy útil para nosotros comprender su mecanismo de trabajo. En este capítulo, solo simples Componentes de una sola página presentados, en el próximo artículo, usaremos un proyecto práctico para comprender completamente la importancia de la creación de componentes en la construcción de Vue.
Se hace tarde, debería volver a dormirme y digerirlo. Nos vemos en el próximo artículo ~~~
Adjunte todos los códigos relevantes y direcciones de documentos oficiales al final del artículo ~~~
http://cn.vuejs.org/v2/guide/
Adjunto: src.zip
Preguntas y respuestas ¿Cómo usa vue.js los complementos? Lectura relacionada Resumen de combate real de Vue.js Comparación en profundidad de Angular y Vue.js 0 front-end básico para novatos Vue.js [Recomendación diaria del curso] ¡combate de aprendizaje automático! Inicio rápido del negocio de publicidad en línea y conocimiento correspondiente de CTR