[Crazy God Talks Java] Notas detalladas sobre cómo comenzar con Vue (completo)

Enterprise 2023-10-01 06:31:42 views: null

Directorio de artículos

1. Información general

1.1 Descripción general de Vue

Vue (pronunciado /vju/, similar a view) es un marco progresivo para crear interfaces de usuario , lanzado en febrero de 2014. A diferencia de otros frameworks grandes, Vue está diseñado para aplicarse capa por capa de abajo hacia arriba. La biblioteca principal de Vue solo se centra en la capa de vista , que no solo es fácil de comenzar, sino que también es fácil de integrar con bibliotecas de terceros (como: vue-router: jump, vue-resource: comunicación, vuex: administración) o proyectos existentes.
Principio SOC: principio de separación de preocupaciones

1.2 Sistema de conocimiento front-end

Todavía queda un largo camino por recorrer para convertirse en un verdadero "ingeniero de pila completa de Internet Java", entre los cuales "My Big Front End" es un curso obligatorio que no se puede evitar. El objetivo principal de esta etapa del curso es llevar a mis programadores de experiencia en Java a conocer, comprender y dominar el front-end, para dar un paso adelante y convertirse en un "ingeniero de Internet Java full-stack".

1.3 Tres elementos del front-end

  • HTML (estructura): Hyper Text Markup Language (Lenguaje de marcado de hipertexto), determina la estructura y el contenido de las páginas web.
  • CSS (Presentación): Hojas de estilo en cascada (Hojas de estilo en cascada), establece el estilo de presentación de la página web
  • JavaScript (comportamiento): es un lenguaje de scripting débilmente tipado, su código fuente no necesita ser compilado, pero el navegador lo interpreta y ejecuta para controlar el comportamiento de las páginas web.

1.4 Capa de presentación (CSS)

La hoja de estilos en cascada CSS es un lenguaje de marcado , no un lenguaje de programación, por lo que no puede personalizar variables, no puede citar, etc. En otras palabras, no tiene soporte de sintaxis, sus principales defectos son los siguientes:

  • La sintaxis no es lo suficientemente potente, por ejemplo, no se puede anidar, lo que hace que sea necesario escribir muchos selectores repetidos en el desarrollo modular;
  • Sin variables y un mecanismo de reutilización de estilo razonable, los valores de atributos relacionados lógicamente deben generarse repetidamente en forma de literales, lo que dificulta su mantenimiento;

Esto resultó en un aumento irrazonable de la carga de trabajo en el trabajo. Para resolver este problema, los desarrolladores de aplicaciones para el usuario utilizarán una herramienta llamada [ preprocesador CSS ] para proporcionar el mecanismo de reutilización de la capa de estilo faltante de CSS, reducir el código redundante y mejorar la capacidad de mantenimiento del código de estilo. Mejora enormemente la eficiencia del desarrollo de estilos front-end. (Por ejemplo, las páginas tienen diferentes necesidades en diferentes momentos y los estilos de Taobao serán diferentes en Double 11 y 618)

1.5 Preprocesador CSS

El preprocesador CSS define un nuevo lenguaje. La idea básica es usar un lenguaje de programación especializado para agregar algunas características de programación a CSS, usar CSS como objetivo para generar archivos y luego los desarrolladores solo necesitan usar este lenguaje para realizar el trabajo de codificación CSS. . Traducido a palabras fáciles de entender, significa " usar un lenguaje de programación especial para diseñar el estilo de la página web y luego convertirlo en un archivo CSS normal a través de un compilador para usarlo en el proyecto". ¿ Cuáles
son los preprocesadores CSS comúnmente utilizados ? ?

  • SASS : Basado en Ruby, procesado a través del servidor y tiene funciones potentes. Alta eficiencia de análisis. Necesitas aprender el lenguaje Ruby, que es más difícil para comenzar que MENOS.
  • MENOS : Basado en NodeJS, procesado a través del cliente, fácil de usar. La función es más simple que SASS y la eficiencia de análisis también es menor que SASS, pero es suficiente en el desarrollo real, por lo que nuestro personal de backend recomienda usar LESS si es necesario.

1.6 Capa de comportamiento (JavaScript)

JavaScript es un lenguaje de secuencias de comandos de tipo débil. No es necesario compilar su código fuente antes de enviarlo al cliente para su ejecución. En su lugar, los códigos de caracteres en formato de texto se envían al navegador para su interpretación y ejecución.
Desarrollo JS nativo El
desarrollo JS nativo significa que seguimos el método de desarrollo estándar [ECMAScript], abreviado como ES, cuya característica es que todos los navegadores lo admiten. Al momento de la publicación actual del blog, el estándar ES ha lanzado las siguientes versiones:

  • ES3
  • ES4 (lanzamiento interno no solicitado)
  • ES5 (soporte completo para navegador)
  • ES6 (versión principal actual de uso común: ¡el paquete web se convierte en compatible con ES5!)
  • ES7
  • ES8
  • ES9 (etapa de borrador)

La diferencia es que poco a poco se van añadiendo nuevas funciones.

1.7. Mecanografiado

TypeScript es un lenguaje de programación gratuito y de código abierto desarrollado por Microsoft. Es un superconjunto de JavaScript y esencialmente agrega escritura estática opcional y programación orientada a objetos basada en clases al lenguaje. Dirigido por Anders Heilsberg (padre de C#, Delphi, TypeScript; creador de .NET).
La característica de este lenguaje es que, además de las características de ES, también incorpora muchas características nuevas que no están dentro del alcance del estándar, por lo que muchos navegadores no pueden admitir directamente la sintaxis de TypeScript y deben compilarse (compilarse en JS). antes de que pueda ser ejecutado correctamente por el navegador.

1.8 Marco de JavaScript

  • jQuery : un marco de JavaScript bien conocido. La ventaja es que simplifica las operaciones DOM. La desventaja es que las operaciones DOM son demasiado frecuentes , lo que afecta el rendimiento del front-end; a los ojos del front-end, solo se utiliza para compatible con IE6, 7 y 8;
  • Angular : El framework front-end adquirido por Google fue desarrollado por un grupo de programadores de Java, se caracteriza por mover el modelo MVC back-end al front-end y agregar el concepto de desarrollo modular, coopera con Microsoft y utiliza TypeScript . sintaxis para desarrollar; es amigable para los programadores de back-end. No muy amigable para los programadores de front-end; la mayor desventaja es que la iteración de la versión no es razonable (por ejemplo: 1.a generación -> 2.a generación, excepto por el nombre, es básicamente dos cosas; al momento de publicar el blog, se lanzó Angular6)
  • React : Producido por Facebook, un marco front-end JS de alto rendimiento; su característica es que propone un nuevo concepto [DOM virtual] para reducir las operaciones DOM reales y simular operaciones DOM en la memoria, mejorando efectivamente la eficiencia de renderizado front-end; su La desventaja es que es complicado de usar, porque necesitas aprender un lenguaje [JSX] adicional;
  • Vue : Un marco de JavaScript progresivo. Progresivo significa implementar gradualmente nuevas características, como desarrollo modular, enrutamiento, administración de estado y otras características nuevas. Su característica es que combina las ventajas de Angular (modularidad) y React (DOM virtual) ;
  • Axios : marco de comunicación front-end; debido a que los límites de Vue son muy claros, es para procesar DOM, por lo que no tiene capacidades de comunicación. En este momento, es necesario utilizar un marco de comunicación adicional para interactuar con el servidor; de Por supuesto, también puede optar directamente por utilizar la función de comunicación AJAX proporcionada por jQuery;

Tres marcos front-end principales: Angular, React, Vue

1.9. Marco de interfaz de usuario

  • Ant-Design: producido por Alibaba, un marco de interfaz de usuario basado en React
  • ElementUI, iview, ice: producido por Ele.me, un marco de interfaz de usuario basado en Vue
  • Bootstrap: un conjunto de herramientas de código abierto para el desarrollo front-end lanzado por Twitter
  • AmazeUI: también llamado "Meizi UI", un marco de interfaz de usuario de pantalla cruzada HTML5.

Herramientas de construcción de JavaScript

  • Babel: herramienta de compilación JS, utilizada principalmente para nuevas funciones de ES que no son compatibles con los navegadores, como la compilación de TypeScript.
  • WebPack: empaquetador de módulos, su función principal es empaquetar, comprimir, fusionar y cargar secuencialmente.Nota
    : Los puntos de conocimiento anteriores han resuelto todas las habilidades necesarias para el desarrollo de aplicaciones web.

1.10 Tres extremos en uno

El objetivo principal del desarrollo híbrido (Hybid App)
es unificar un conjunto de códigos en tres terminales (PC, Android: .apk, iOS: .ipa) y poder llamar a componentes subyacentes (como sensores, GPS, cámaras, etc. .), método de envasado Hay principalmente dos tipos:

  • Empaquetado en la nube: HBuild -> HBuildX, producido por DCloud; API Cloud
  • Embalaje local: Cordova (anteriormente PhoneGap)

1.11 Tecnología de fondo

El personal de front-end también necesita dominar ciertas tecnologías de back-end para facilitar el desarrollo, pero nosotros, el personal de back-end de Java, sabemos que el sistema de conocimiento de back-end es extremadamente grande y complejo, por lo que para facilitar el front-end personal para desarrollar aplicaciones back-end, han surgido tecnologías como NodeJS.

El autor de NodeJS afirmó haber abandonado NodeJS (diciendo que la arquitectura no está bien hecha y que los voluminosos módulos node_ pueden hacer que el autor se sienta infeliz) y comenzó a desarrollar Deno con una nueva arquitectura.

Dado que es una tecnología de back-end, definitivamente requiere marcos y herramientas de gestión de proyectos. El marco NodeJS y las herramientas de gestión de proyectos son los siguientes:

  • Expreso: marco NodeJS
  • Koa: versión simplificada Express
  • NPM: herramienta integral de gestión de proyectos, similar a Maven
  • YARN: Una alternativa a NPM, similar a la relación entre Maven y Gradle

2.MVVM

2.1 ¿Qué es MVVM?

MVVM (Model-View-ViewModel) es un patrón de diseño de arquitectura de software desarrollado por Microsoft WPF (usado para reemplazar WinForm, que se usaba para desarrollar aplicaciones de escritorio en el pasado) y Silverlight (similar al subprograma de Java, en pocas palabras, es Navegación Desarrollado por Ken Cooper y Ted Peters, los arquitectos de WPF (que se ejecuta en Windows Server), es un método de programación basado en eventos que simplifica la interfaz de usuario . Publicado por John Gossman (también arquitecto de WPF y Silverlight) en 2005 en su blog.
MVVM se deriva del patrón clásico MVC (ModI-View-Controller). El núcleo de MVVM es la capa ViewModel, que se encarga de convertir los objetos de datos en el Modelo para que los datos sean más fáciles de administrar y usar, sus funciones son las siguientes:

  • Esta capa realiza un enlace de datos bidireccional hacia arriba con la capa de vista.
  • Realizar interacción de datos hacia abajo con la capa del modelo a través de solicitudes de interfaz.

imagen.png

2.2 ¿Por qué utilizar MVVM?

El patrón MVVM es el mismo que el patrón MVC, el objetivo principal es separar la vista (View) y el modelo (Model), tiene varias ventajas:

  • Bajo acoplamiento : la Vista (Vista) puede cambiar y modificar independientemente del Modelo. Un Modelo de Vista puede vincularse a diferentes Vistas. Cuando la Vista cambia, el Modelo puede permanecer sin cambios, y cuando el Modelo cambia, la Vista también puede permanecer sin cambios.
  • Reutilizable : puede colocar algo de lógica de vista en un modelo de vista y permitir que muchas vistas reutilicen esta lógica de vista.
  • Desarrollo independiente : los desarrolladores pueden centrarse en la lógica empresarial y el desarrollo de datos (ViewModel), y los diseñadores pueden centrarse en el diseño de páginas.
  • Comprobable : las interfaces siempre han sido difíciles de probar, pero ahora se pueden escribir pruebas para ViewModel.

2.3 Vue es el implementador del patrón MVVM

imagen.png

  • Modelo: capa de modelo, donde se representan los objetos JavaScript.
  • Ver: capa de vista, aquí representa DOM (elementos para operaciones HTML)
  • ViewModel: middleware que conecta vistas y datos. Vue.js es el implementador de la capa ViewModel en MVVM. En la arquitectura MVVM, los datos y las vistas no pueden comunicarse directamente. Solo pueden comunicarse a través de ViewModel, y ViewModel define un observador.

ViewModel puede observar cambios en los datos y actualizar el contenido correspondiente a la vista.
ViewModel puede monitorear los cambios en las vistas y notificar los cambios a los datos.
Vue.js es un implementador de MVVM. Su núcleo es implementar el monitoreo DOM y el enlace de datos .

3. El primer programa Vue

  1. Cree un nuevo proyecto vacío y cree un nuevo paquete: capítulo01

imagen.png

  1. Crea un nuevo proyecto HTML5 y escribe
  2. abrir pagina
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>

    <!--View 层-->
    <div id="app">
      <!--4、元素获取 vue 中的数据-->
      {
   
   {message}}
    </div>

    <!--1、导入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
      var vm = new Vue({
      
      
        // 2、绑定 app 元素
        el: "#app",
        // Model 层
        // 3、插入数据，键值对
        data: {
      
      
          message: "hello,vue"
        }
      });
    </script>
  </body>
</html>

imagen.png

  1. Abra las herramientas de desarrollador, seleccione Entrada de consola y presione Entrar
vm.message="hehe"

Se descubre que los datos en la página también han cambiado.
Este es el enlace bidireccional de ViewModel
de los datos en la capa de vista y la variable del mensaje. Cuando el mensaje cambia, los datos en la página también cambian.

4. Instrucciones

4.1 Ejemplo

Escribir páginas HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <!--View 层-->
    <div id="app">
      <!--4、元素获取 vue 中的数据-->
      <!--    {
    
    {message}}-->
      <span v-bind:title="message">
        鼠标悬停几秒可查看绑定的信息
      </span>
    </div>
    <!--1、导入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
      var vm = new Vue({
      
      
        // 2、绑定 app 元素
        el: "#app",
        // Model 层
        // 3、插入数据，键值对
        data: {
      
      
          message: "hello,vue"
        }
      });
    </script>
  </body>
</html>

Abra la página para ver
imagen.png
y descubrir que usando v-bind: también puede vincular variables a elementos.

4.2 Descripción general

Las directivas son atributos especiales con el prefijo v- . Se espera que el valor del atributo de una directiva sea una única expresión de JavaScript (la excepción es v-for, que analizaremos más adelante). La responsabilidad de la directiva es aplicar reactivamente sus efectos asociados al DOM cuando cambia el valor de la expresión.

4.3. v-si

Escribir HTML

<div id="app">
  <span v-if="ok===true">YES</span>
  <span v-else>No</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      ok: true
    }
  });
</script>

Abra la página
imagen.png
y modifique el valor de ok.
imagen.png

4.4. v-si no-si

<div id="app">
  <span v-if="str==='A'">AAA</span>
  <span v-else-if="str==='B'">BBB</span>
  <span v-else>Other</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      str: 'A'
    }
  });
</script>

Abra la página
imagen.png
y modifique el valor de str.
imagen.png
imagen.png

4.5. para

<div id="app">
  <ul>
    <!--类似于java 的 foreach ，
    从 items 中遍历出的每一项命名为 item-->
    <li v-for="item in items">{
   
   {item.message}}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      items: [
        {
      
      message: "test-1"},
        {
      
      message: "test-2"},
        {
      
      message: "test-3"}
      ]
    }
  });
</script>

abrir pagina
imagen.png

5. Escuche los eventos

Puede utilizar la directiva v-on para escuchar eventos DOM y ejecutar algún código JavaScript cuando se active.

<div id="app">
  <button v-on:click="sayHi()">click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      message: "Hi!!!"
    },
    // 定义方法
    // 注意一定要加 S
    methods: {
      
      
      // 冒号前是方法名
      sayHi: function (){
      
      
        alert(this.message);
      }
    }
  });
</script>

abrir pagina
imagen.png

6. Encuadernación bidireccional

6.1 ¿Qué es el enlace de datos bidireccional?

Vue es un marco mvvm, lo que significa enlace de datos bidireccional, es decir, cuando los datos cambian, la vista también cambia y cuando la vista cambia, los datos también cambiarán sincrónicamente . Esto puede considerarse como la esencia de vue.
Vale la pena señalar que el enlace de datos bidireccional del que estamos hablando debe ser para controles de interfaz de usuario, y los controles que no son de interfaz de usuario no implicarán enlace de datos bidireccional. El enlace de datos unidireccional es un requisito previo para utilizar herramientas de gestión de estado como redux. Si usamos vuex, entonces el flujo de datos también es de un solo elemento, lo que entrará en conflicto con el enlace de datos bidireccional. Podemos resolverlo así

6.2 ¿Por qué es necesario implementar la vinculación bidireccional de datos?

En Vue, si usa Vuex, los datos son en realidad unidireccionales. La razón por la que se llama enlace de datos bidireccional se debe a los controles de la interfaz de usuario utilizados. Para que podamos procesar formularios, el enlace de datos bidireccional de Vue es particularmente cómodo. para usar. .
Es decir, los dos no son mutuamente excluyentes: el flujo de datos global utiliza un solo elemento para facilitar el seguimiento, y el flujo de datos local utiliza dos direcciones, lo cual es simple y fácil de operar.

6.3 Uso del enlace de datos bidireccional en formularios

Puede utilizar la directiva v-model para crear un enlace de datos bidireccional en los elementos del formulario <input>, <textarea> y <select>. Elige automáticamente el método correcto para actualizar el elemento según el tipo de control. A pesar de su magia, v-model es esencialmente azúcar sintáctico. Es responsable de escuchar los eventos de entrada del usuario para actualizar los datos y realizar algún procesamiento especial para algunos escenarios extremos.

6.4 Uso

1. Cuadro de entrada

<div id="app">
  <!--双向绑定：
  data 中的 message 既和输入框的 message 绑定
  又和 p 标签中的 message 绑定-->
  <span>输入文本：</span><input type="text" v-model="message">
  <p><span>输入的文本：</span><span>{
   
   {message}}</span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      message: ""
    }
  });
</script>

Modifique el valor del mensaje en la página e
imagen.png
ingréselo directamente en el cuadro de entrada
imagen.png

2. Botón de opción

<div id="app">
  性别：
  <input type="radio" name="sex" value="male" v-model="sex"> 男
  <input type="radio" name="sex" value="female" v-model="sex"> 女

  <p>选中了：{
   
   {sex}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      sex: ""
    }
  });
</script>

Cuando abre la página , puede encontrar que el valor
imagen.png
del botón de opción está vinculado aquí.

3. Cuadro de selección múltiple

<div id="app">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">杰克</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">约翰</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">麦克</label>
  <br>
  <span>Checked names: {
   
   { checkedNames }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      checkedNames: []
    }
  });
</script>

imagen.png

4. Cuadro desplegable

<div id="app">
  下拉框：
  <select v-model="selected">
    <option value="" disabled>-请选择-</option>
    <option value="aaa">AA</option>
    <option value="bbb">BB</option>
    <option value="ccc">CC</option>
  </select>
  <p>选中 ： {
   
   {selected}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      selected : ""
    }
  });
</script>

imagen.png

7. Componentes

7.1 Descripción general

  • Los componentes son instancias de Vue reutilizables , lo que significa que las partes repetidas se pueden encapsular como componentes durante el proceso de desarrollo.
  • Organización de componentes
    imagen.png Por ejemplo, puede tener componentes como encabezado, barra lateral y área de contenido, y cada componente contiene otros componentes como enlaces de navegación y publicaciones de blog.

7.2 Demostración del primer componente

<div id="app">
  <my-component></my-component>
  <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  // 定义组件
  Vue.component("my-component",{
      
      
    template: '<li>AA</li>'
  });

  var vm = new Vue({
      
      
    el: "#app"
  });
</script>

imagen.png

7.3 Pasar datos a través de Datos

<div id="app">
  <!--  利用 v-for 把 items 的元素取出，
  再通过 v-bind 绑定数据: 把 item1 绑定在了 item2 上-->
  <my-component v-for="item1 in items" v-bind:item2="item1"></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  // 定义组件
  Vue.component("my-component",{
      
      
    // 通过 item2 接收 item1 数据
    props: ['item2'],
    template: '<li>{
      
      {item2}}</li>'
  });

  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      items: ["AAA","BBB","CCC"]
    }
  });
</script>

imagen.png

8. Comunicación asincrónica de Axios

8.1 Descripción general

Axios es un framework de comunicación asíncrona de código abierto que se puede utilizar en el lado del navegador y NodeJS, su función principal es implementar la comunicación asíncrona AJAX, sus características funcionales son las siguientes:

  • Cree XMLHttpRequests desde el navegador
  • Crear solicitud http desde node.js
  • API de promesa de soporte
  • Interceptar solicitudes y respuestas
  • Convertir datos de solicitud y datos de respuesta
  • Cancelar petición
  • Convertir automáticamente datos JSON
  • El cliente apoya la defensa contra XSRF (falsificación de solicitudes entre sitios)

8.2 Por qué utilizar Axios

Dado que Vue.js es un marco de capa de vista y el autor (You Yuxi) se adhiere estrictamente al SoC (principio de separación de preocupaciones), Vue.js no incluye funciones de comunicación AJAX. Vue recomienda usar el marco Axios y tratar de no usar JQuery. .Porque opera frecuentemente el DOM

8.3 Requisitos previos

Confirme que JavaScript de IDEA es compatible con ES6
imagen.png

8.4 La primera aplicación de Axios

  1. Debido a que en el desarrollo real, se utilizan principalmente datos en formato JSON, aquí hay un nuevo archivo en formato JSON.
  2. Escribir HTML: obtener datos Json locales
  3. Abra la página y abra las herramientas de desarrollador. Puede encontrar que Axios es comunicación asincrónica como AJax.
    imagen.png
    También puede ver que se han obtenido los datos.
    imagen.png
  4. Escribir HTML: renderizar el Json obtenido en la página
  5. página
    imagen.png
{
    
    
  "name": "呵呵",
  "url": "https://blog.csdn.net/weixin_44449838",
  "page": 123,
  "isNonProfit": true,
  "address": {
    
    
    "street": "塔克拉玛干沙漠",
    "city": "新疆",
    "country": "中国"
  },
  "links": [
    {
    
    
      "name": "Google",
      "url": "http://www.google.com"
    },
    {
    
    
      "name": "Baidu",
      "url": "http://www.baidu.com"
    }
  ]
}

<div id="vue">

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- axios 的包-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#vue",
    data: {
      
      },
    // 钩子函数，在主流程执行过程中间执行的方法
    mounted(){
      
      
      axios.get('../data.json').then(response=>(console.log(response.data)));
    }
  });
</script>

<div id="vue">
  <!--    需要渲染的字段名 -->
  <div>{
   
   {info.name}}</div>
  <div>{
   
   {info.address}}</div>
  <div>{
   
   {info.address.city}}</div>
  <div v-for="link in info.links">
    <span>{
   
   {link.name}}</span> : 
    <a v-bind:href="link.url">{
   
   {link.url}}</a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- axios 的包-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#vue",
    // 有冒号、大括号的 data 是属性
    data: {
      
      },
    // 没有冒号的是方法
    // 这里使用的 data 方法，不要搞混
    data(){
      
      
      return{
      
      
        // 请求的返回参数,这里需要写上需要返回的字段名，不需要写值，所以都写 null
        // 这里的键可以比传入的 Json 中的少
        // 但是如果写了，就必须和获得的 Json 键的名字一样
        info: {
      
      
          name: null,
          address: {
      
      
            city: null,
            country: null
          },
          links: [
            {
      
      
              name: null,
              url: null
            }
          ]
        }
      }
    },
    // 钩子函数，在主流程执行过程中间执行的方法
    mounted(){
      
      
      // 这边把 上面 return 中的 info 值和返回的 data 数据绑定，以便返回给视图渲染
      axios.get('../data.json').then(response=>(this.info=response.data));
    }
  });
</script>

8.5 Resuelve el problema del parpadeo

Después de escribir la demostración anterior, cuando actualice la página, encontrará que la plantilla aparece primero y los datos aparecen después de un tiempo. Esto no es
imagen.png
muy fácil de usar y no es seguro para los datos, así que use lo siguiente método para resolverlo
escribiendo un HTML <estilo></estilo> arriba

<style>
  [v-cloak]{
      
      
    display: none;
  }
</style>

<div id="vue" v-clock>
  <!--    需要渲染的字段名 -->
  <div>{
   
   {info.name}}</div>
  <div>{
   
   {info.address}}</div>
  <div>{
   
   {info.address.city}}</div>
  <div v-for="link in info.links">
    <span>{
   
   {link.name}}</span> : 
    <a v-bind:href="link.url">{
   
   {link.url}}</a>
  </div>
</div>

De esta forma, aunque los datos seguirán apareciendo al cabo de un tiempo, la plantilla ya no será visible.

9. Ciclo de vida de Vue

Una instancia de Vue tiene un ciclo de vida completo, es decir, una serie de procesos como creación, inicialización de datos, compilación de plantillas, montaje de DOM, renderizado -> actualización -> renderizado, desinstalación, etc. A esto se le llama ciclo de vida. de Vue.
A lo largo de todo el ciclo de vida de Vue, proporciona una serie de eventos que nos permiten registrar métodos JS cuando se activan eventos. Podemos usar nuestros propios métodos JS registrados para controlar toda la situación. Esto en estos métodos de respuesta a eventos es directamente Puntos a una instancia de Vue.
imagen.png

10. Propiedades calculadas

  • Propiedades calculadas: guarde los resultados calculados en propiedades.
  • Beneficios: se ejecuta en memoria, DOM virtual
  • escribir codigo
  • Experimente la diferencia entre abrir una página, activar el modo desarrollador y usar la consola
<div id="vue">
  <!-- 调用方法 -->
  <p>currentTime1 : {
   
   {currentTime1()}}</p>
  <!-- 调用属性 -->
  <p>currentTime2 : {
   
   {currentTime2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#vue",
    data: {
      
      
      message: "hello."
    },
    methods: {
      
      
      currentTime1: function (){
      
      
        // 返回当前时间戳
        return Date.now();
      }
    },
    // 计算属性
    computed: {
      
      
      // 方法名不能一样
      currentTime2: function (){
      
      
        // 返回当前时间戳
        return Date.now();
      }
    }
  });
</script>
  1. Cuando se llama a un método normal, es el nombre del método que lo llama; cuando se llama a una propiedad calculada, es el nombre de la propiedad.
    imagen.png
  2. Las llamadas a funciones ordinarias se ejecutan una vez; las propiedades calculadas tratan los resultados calculados como atributos y los almacenan en la memoria.
    imagen.png
  • ¿Cuándo cambia una propiedad calculada? Métodos para modificar propiedades calculadas
// 计算属性
computed: {
    
    
  // 方法名不能一样
  currentTime2: function (){
    
    
    // 返回当前时间戳
    return Date.now() +"  | "+this.message;
  }
}

Abra la página, abra el modo de desarrollador y use la consola,
imagen.png
de modo que mientras los datos en el cuerpo del método de propiedad calculada cambien, la propiedad calculada cambiará.

11. Distribución de contenido: tragamonedas

  • Ranura: componente conectable dinámicamente
  • Caso sencillo
<div>
  <p>数据列表(原本的)</p>
  <ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
  </ul>
</div>
————————————————————————————————
<div id="vue">
  <list>
    <!--绑定插槽 : 使用 slot 属性绑定，引号里的值，必须和下面的 name 属性一样-->
    <!--绑定数据 : 冒号后面是组件中定义的值
    引号里面是 data 数据的字段值
    不能混淆-->
    <list-title slot="list-title" :title="l_title"></list-title>
    <list-items slot="list-items" v-for="item in l_items" :item="item"></list-items>
  </list>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  Vue.component("list",{
      
      
    template:
      '<div>\
      <slot name="list-title"></slot>\
      <ul>\
      <slot name="list-items"></slot>\
      </ul>\
      </div>'
  });
  // 定义数据，插入插槽
  Vue.component("list-title",{
      
      
    props: ['title'],
    template: '<div>{
      
      {title}}</div>'
  });

  Vue.component("list-items",{
      
      
    props: ['item'],
    template: '<li>{
      
      {item}}</li>'
  });

  var vm = new Vue({
      
      
    el: "#vue",
    data: {
      
      
      l_title: "标题————",
      l_items:["AA","BBB","CCCC"]
    }
  });
</script>

Efecto de página
imagen.png

12. Distribución de contenido de eventos personalizado

  • Según el caso anterior, espero agregar un botón de eliminar después de cada línea y hacer clic en eliminar para eliminar y cambiar la línea.
  1. Primero realice ligeras modificaciones, agregue un botón de eliminación, vincule el evento de clic e imprima el subíndice después de hacer clic.
  2. Agregar método de eliminación en el objeto vue
  3. Pruebe los dos métodos escritos anteriormente. Haga clic en el botón Eliminar imagen.pngpara llamar al método removeItem en la consola imagen.png
    . Estos dos métodos tienen éxito respectivamente. ¿Cómo establecer la conexión entre estos dos métodos?
  4. Deje que el componente llame al evento a través de esto.$emit("nombre de evento personalizado", parámetro)
  5. prueba
    imagen.png
  6. Diagrama simple del proceso.
    imagen.png
<list-items slot="list-items" v-for="(item,index) in l_items" :item="item" :index="index"></list-items>
 

var vm = new Vue({
  el: "#vue",
  data: {
  l_title: "标题————",
  l_items:["AA","BBB","CCCC"]
  },
  methods: {
  removeItem: function (index){
  // 打印信息
  console.log("删除了"+this.l_items[index]);
  // 表示从 index 开始，删除 n 个元素
  this.l_items.splice(index,1);
  }
  }
  });

<!--数据绑定 ：把 items 中的每一项元素遍历出来命名为 item 再和下面的 item 绑定-->
<!--事件绑定 ：自定义一个名为 diyremove 的事件，先和vue对象中的 removeItem 方法绑定
再去到组件中的 remove 和 diyremove 事件绑定-->
<!--注意 : 属性值都要小写，大写不生效，也不会报错 ； 在自定义事件绑定方法的时候 v-on 不能缩写-->
<list-items slot="list-items" v-for="(item,index) in l_items" :item="item" :index="index" v-on:diyremove="removeItem(index)"></list-items>

13. Ver-cli

13.1 ¿Qué es vue-cli?

Se utiliza un andamio proporcionado oficialmente por vue-cli para generar rápidamente una plantilla de proyecto vue; la
estructura de directorio predefinida y el código básico son como cuando creamos un proyecto Maven, podemos elegir crear un proyecto esqueleto. Este proyecto esqueleto es el andamio .Nuestro desarrollo es más rápido,
funciones principales:

  • Estructura de directorio unificada
  • depuración local
  • Implementación en caliente
  • prueba de unidad
  • El embalaje integrado se pone en línea

13.2 Entorno requerido

  1. Descargue Node.js, seleccione Windows de 64 bits
  2. Instale NodeJs y continúe con el siguiente paso
  3. Para comprobar si la instalación se realizó correctamente, ingrese el nodo -v en cmd y verifique si el número de versión se puede imprimir correctamente.
  • Instale el acelerador de imágenes Taobao de Node.js (cnpm)
  • Instalar vue-cli
（CMD 命令）
-g 就是全局安装
npm install cnpm -g --registry=https://registry.npm.taobao.org

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

El proceso de instalación es un poco lento.
La ubicación de instalación es: C:\Users\Administered\AppData\Roaming\npm

（CMD 命令）
 cnpm install vue-cli -g	

vue list

imagen.png

13.3 Programa Vue-cli

  1. Use cmd en la carpeta para crear un proyecto vue llamado myvue y empaquetarlo con la herramienta de empaquetado webpack
  2. Inicializar y ejecutar el proyecto myvue
（CMD 命令）
 # 先找到要创建该文件的目录
 # 这里的 myvue 是项目名称，可以根据自己的需求起名
 vue init webpack myvue

imagen.png
Descripción:
1. Nombre del proyecto : Nombre del proyecto, solo presione Enter de forma predeterminada
2. Descripción del proyecto : Descripción del proyecto, solo presione Enter de manera predeterminada
3. Autor : Autor del proyecto, solo presione Enter de manera predeterminada
4. Vue build : Compilar, elija los primeros 5 Instalar vue-router
: si desea instalar vue-router, seleccione n para no instalar ( deberá agregarlo manualmente más adelante) 6. Use ESLint para eliminar su código : si desea usar ESLint para verificar el código, seleccione n para no instalar (deberá agregarlo manualmente más adelante) Agregar) 7. Configurar pruebas unitarias : relacionado con las pruebas unitarias, seleccione n para no instalar (deberá agregarlo manualmente más adelante) 8. Configurar pruebas e2e con Nightwatch : relacionado con las pruebas unitarias , seleccione n para no instalar (deberá agregarlo manualmente más adelante) 9. ¿Deberíamos ejecutar npm install automáticamente después de que se haya creado el proyecto ? Inicialice directamente después de completar la creación, seleccione n, lo ejecutamos manualmente; ejecuta el resultado !El archivo generado





imagen.png

（CMD 命令）
# 进入文件夹
cd myvue
# 安装环境
npm install --registry=https://registry.npm.taobao.org
# 启动项目
npm run dev
# 停止 ctrl + c

Después de ejecutar con éxito
imagen.png

14. Paquete web

14.1 ¿Qué es el paquete web?

Webpack puede verse como un empaquetador de módulos estáticos : lo que hace es analizar la estructura de su proyecto, encontrar módulos JavaScript y otros lenguajes de extensión que los navegadores no pueden ejecutar directamente (Scss, TypeScript, etc.) y empaquetarlos en el formato apropiado. formato para uso de los navegadores.

14.2 ¿Por qué utilizar el paquete web?

Muchas páginas web actuales pueden considerarse aplicaciones ricas en funciones, con código JavaScript complejo y una gran cantidad de paquetes de dependencia. Para simplificar la complejidad del desarrollo, han surgido muchas buenas prácticas en la comunidad front-end.

  1. La modularización nos permite refinar programas complejos en archivos pequeños;
  2. Similar a TypeScript, un lenguaje de desarrollo basado en JavaScript: nos permite implementar características que no se pueden usar directamente en la versión actual de JavaScript, y luego se pueden convertir en archivos JavaScript para que el navegador pueda reconocerlos;
  3. Preprocesadores CSS como scss, menos...
    De hecho, estas mejoras han mejorado enormemente nuestra eficiencia de desarrollo, pero los archivos desarrollados con ellas a menudo requieren procesamiento adicional para ser reconocidos por el navegador, y el procesamiento manual es muy engorroso, lo que genera la necesidad de Aparición de herramientas como WebPack.

14.3 Instalar paquete web

WebPack es una herramienta de empaquetado y cargador de módulos que puede procesar y utilizar diversos recursos, como JS, JSX, ES 6, SASS, LESS, imágenes, etc., como módulos.
Comando de instalación

（CMD 命令）
 npm install webpack -g --registry=https://registry.npm.taobao.org
 npm install webpack-cli -g --registry=https://registry.npm.taobao.org

Pruebe si la instalación es exitosa

webpack -v
webpack-cli -v

14.4 Configuración

Cree el archivo de configuración webpack.config.js

  • entrada: archivo de entrada, especifique qué archivo utiliza Web Pack como punto de entrada del proyecto
  • salida: salida, especifica WebPack para colocar los archivos procesados ​​en la ruta especificada
  • módulo: módulo, utilizado para procesar varios tipos de archivos
  • complementos: complementos, como: actualización en caliente, reutilización de código, etc.
  • resolver: establece la ruta a la que apuntar
  • reloj: monitoreo, usado para empaquetar directamente después de configurar cambios en el archivo
module.exports = {
  entry:"",
    output:{
    path:"",
      filename:""
  },
  module:{
    loaders:[
      {test:/\.js$/,;\loade:""}
    ]
  },
  plugins:{},
  resolve:{},
  watch:true
}

Ejecute directamente el comando webpack para empaquetar

14.5 Usando el paquete web

  1. Crear proyecto: webpack-estudio
  2. Cree un directorio llamado módulos para colocar archivos de recursos como módulos JS
  3. Cree un archivo de módulo en módulos: hello.js se usa para escribir código relacionado con el módulo JS
// 暴露一个方法
exports.sayHi = function(){
    
    
  document.write("<h1>Hello World</h1>");
}
  1. Cree un archivo de entrada llamado main.js en módulos para establecer el atributo de entrada al empaquetar.
// 引入 hello.js,相当于java的对象 
var hello = require("./hello");
// 调用 hello.js 中的方法
hello.sayHi();
  1. Cree el archivo de configuración webpack.config.js (nota: punto) en el directorio webpack-study y use el comando webpack para empaquetarlo.
// 把 module 导出
module.exports = {
    
    
  // 目标文件
  entry: './modules/main.js',
  // 输出地址
  output: {
    
    
    filename: "./js/bundle.js"
  }
}
  1. Empaque el archivo que acaba de escribir en el directorio webpack-study

imagen.png

  1. Introducido en la página HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="dist/js/bundle.js"></script>


</body>
</html>
  1. abrir pagina
    imagen.png

15. enrutador vue

15.1 Descripción

Vue Router es el administrador de enrutamiento oficial (salto de ruta) de Vue.js. Está profundamente integrado con el núcleo de Vue.js, lo que facilita la creación de aplicaciones de una sola página. Las características incluidas son:

  1. Tablas de ruta/vista anidadas
  2. Configuración de enrutamiento modular basada en componentes
  3. Parámetros de enrutamiento, consultas, comodines
  4. Ver efecto de transición basado en el sistema de transición Vue.js
  5. Control de navegación detallado
  6. Enlaces con clases CSS activadas automáticamente
  7. Modo historial HTML5 o modo hash, degradado automáticamente en IE9
  8. Comportamiento personalizado de la barra de desplazamiento

15.2 Instalación

Pruebe y aprenda
cmd según el primer vue-cli, ingrese al directorio myvue y ejecute

可以用
cnpm install vue-router --save-dev
没成功
npm install vue-router --save-dev --registry=https://registry.npm.taobao.org

15.3 Uso

  1. Limpie el código, elimine las imágenes en el directorio src y los componentes en el directorio de componentes Modifique App.vue.
  2. Proyecto de inicio
  3. Modificar App.vue
  4. Cree un nuevo componente Vue en componentes: Content.vue
  5. Cree un nuevo componente Vue en componentes: Main.vue
  6. Cree un nuevo paquete (enrutador) en src y cree un nuevo archivo en el paquete: index.js
  7. Modificar main.js
  8. Modificar la parte de la plantilla en App.vue
  9. abrir pagina
    imagen.png
    imagen.png
    imagen.png
<template>
  <div id="app">
  </div>
</template>
<script>
  export default {
    name: "App"
  }
</script>
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

<template>
  <div id="app">
    <h1>呵呵</h1>
  </div>
</template>

El proyecto descubierto se construye automáticamente y la página se actualiza automáticamente:
esta es la implementación en caliente de Vue.

<template>
  <h1>Content</h1>
</template>
<script>
  export default {
    name: "Content"
  }
</script>
<!-- 加上 scoped 表示只会在当前组件生效 -->
<style scoped>
</style>

<template>
  <h1>首页</h1>
</template>
<script>
  export default {
      
      
    name: "main"
  }
</script>
<style scoped>
</style>

// 导入文件
import Vue from "vue";
import VueRouter from "vue-router";
// 导入组件
import Content from "../components/Content";
import Main from "../components/Main";

// 安装路由
Vue.use(VueRouter);

// 配置导出路由
export default new VueRouter({
    
    
  routes: [
    {
    
    
      // 类似于 @RequestMapping 接收一个请求，返回一个页面
      // 路由的路径
      path: '/content',
      // 配置名称
      name: 'content',
      // 跳转的组件
      component: Content
    },
    {
    
    
      // 路由的路径
      path: '/main',
      // 配置名称
      name: 'Main',
      // 跳转的组件
      component: Main
    }
  ]
});

import Vue from 'vue'
import App from './App'
// 导入 vue-router 的路由配置
// 这里是写在 index.js 文件中的所以导入该文件
// 因为文件名是 index 会自动扫描该文件，所以index可省
// 注意！！ 这里必须写 router ，写错前端页面就报错
import router from "./router/index";

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  // 配置路由,上面的组件名
  router,
  components: {
    
     App },
  template: '<App/>'
})

<template>
  <div id="app">
    <h1>呵呵</h1>
    <!--跳转链接，点击链接显示对应内容-->
    <!--类似于原来的 <a></a> ;
    to 类似于原来的 href,后面的值就是配置的路由-->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <!--展示视图，理解为用于展示上面两个链接对应内容的区域-->
    <router-view></router-view>
  </div>
</template>

16. Vue+ElementoUI

  1. Crea un proyecto llamado vue-elementuivue init webpack vue-elementui
  2. Instale cuatro complementos: vue-router, element-ui, sass-loader, node-sass
# 进入工程
cd vue-elementui
# 安装 vue-router
cnpm install vue-router --save-dev 
# 安装 element-ui
cnpm i element-ui -S 
# 安装依赖
cnpm install 
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev


测试报错：
cnpm install --save vue-hot-reload-api
  1. Restaure el proyecto a un proyecto vacío, elimine logo.png y HelloWorld.vue en src y modifique App.vue de la siguiente manera:
<template>
 </template>
 <script>
 export default {
      
      
   name: 'App'
 }
 </script>
 <style>
 #app {
      
      
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
 </style>
  1. Cree una nueva carpeta enrutador: almacene información de enrutamiento
    vistas: almacene componentes de vista
    componentes: almacene componentes funcionales
    imagen.png
  2. Cree un nuevo componente de vista en el paquete de vistas: Main.vue
<template>
  <h1>首页</h1>
</template>
<script>
  export default {
    name: "Main"
  }
</script>
<style scoped>
</style>
  1. Cree un nuevo componente de vista en el paquete de vistas: Login.vue
<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>
  1. Escriba información de configuración de enrutamiento en el archivo del enrutador: index.js
import Vue from 'vue';
import VueRouter from "vue-router";

import Main from "../views/Main";
import Login from "../views/Login";

// 显式的使用导入的组件
Vue.use(VueRouter);

export default new VueRouter({
    
    
  routes: [
    {
    
    
      path: "/login",
      name: "login",
      component: Login
    },{
    
    
      path: "/main",
      name: "main",
      component: Main
    }
  ]
});
  1. Modificar main.js
import Vue from 'vue'
import App from './App'
import router from './router'
// 导入 elementUI
import ElementUI from 'element-ui'
// 导入 elementUI 对应的 CSS
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router)
Vue.use(ElementUI)

new Vue({
    
    
  el: '#app',
  // 配置 elementUI
  render: h => h(App),
  router
})
  1. Modificar App.vue
<template>
  <div id="app">
    <!-- 因为 main.js 中配置了，element-ui 自动渲染，所以这里只需要有一个这个标签就好了 -->
    <router-view></router-view>
  </div>
</template>x
  1. Si se informa un error al iniciar el proyecto , intente degradar la versión de sass-loader, busque el archivo package.json,
    imagen.png
    busque el atributo sass-loader,
    imagen.png
    cambie el número de versión posterior a ^ 7.3.1
    y reinstale las dependencias del entorno.npm install
  2. Simplemente ingrese su nombre de usuario y contraseña, inicie sesión y encontrará que va a la página de inicio para ver el código Login.vue , que se encuentra en <script>< /script>
    imagen.png

Los pasos de instalación son los mismos que antes.

Reinicie el proyecto y visite http://localhost:8080/#/login
imagen.png

17. Anidación de rutas

  • El enrutamiento anidado también se denomina subenrutamiento y, en aplicaciones prácticas, generalmente se compone de múltiples capas de componentes anidados, como:
    imagen.png
  1. Crear un nuevo paquete de usuario en vistas
  2. En el paquete de usuario, cree un nuevo List.vue
<template>
  <h1>用户列表</h1>
</template>
<script>
  export default {
    name: "List"
  }
</script>
<style scoped>
</style>
  1. En el paquete de usuario, cree un nuevo Profile.vue
<template>
  <h1>个人信息</h1>
</template>
<script>
  export default {
    name: "Profile"
  }
</script>
<style scoped>
</style>
  1. Modifique Main.vue y agregue una barra lateral
<template>
  <div>
  <el-container>
  <el-aside width="200px">
  <el-menu :default-openeds="['1']">
  <el-submenu index="1">
  <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
  <el-menu-item-group>
  <el-menu-item index="1-1">
  <!--插入的地方-->
  <router-link to="/user/profile">个人信息</router-link>
  </el-menu-item>
  <el-menu-item index="1-2">
  <!--插入的地方-->
  <router-link to="/user/list">用户列表</router-link>
  </el-menu-item>
  </el-menu-item-group>
  </el-submenu>
  <el-submenu index="2">
  <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
  <el-menu-item-group>
  <el-menu-item index="2-1">分类管理</el-menu-item>
  <el-menu-item index="2-2">内容列表</el-menu-item>
  </el-menu-item-group>
  </el-submenu>
  </el-menu>
  </el-aside>

  <el-container>
  <el-header style="text-align: right; font-size: 12px">
  <el-dropdown>
  <i class="el-icon-setting" style="margin-right: 15px"></i>
  <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>个人信息</el-dropdown-item>
  <el-dropdown-item>退出登录</el-dropdown-item>
  </el-dropdown-menu>
  </el-dropdown>
  </el-header>
  <el-main>
  <!--在这里展示视图-->
  <router-view />
  </el-main>
  </el-container>
  </el-container>
  </div>
  </template>
  <script>
  export default {
    
    
  name: "Main"
}
  </script>
  <style scoped lang="scss">
  .el-header {
    
    
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.el-aside {
    
    
  color: #333;
}
</style>
  1. Modificar index.js, información de enrutamiento
import Vue from 'vue';
import VueRouter from "vue-router";

import Main from "../views/Main";
import Login from "../views/Login";

import List from "../views/user/List";
import Profile from "../views/user/Profile";

// 显式的使用导入的组件
Vue.use(VueRouter);

export default new VueRouter({
    
    
  routes: [
    {
    
    
      path: "/login",
      name: "login",
      component: Login
    },{
    
    
      path: "/main",
      name: "main",
      component: Main,
      // 嵌套路由
      children: [
        {
    
    
          path: "/user/profile",
          component: Profile
        },{
    
    
          path: "/user/list",
          component: List
        }
      ]
    }
  ]
});
  1. Inserte un enlace de enrutamiento en Main.vue para mostrar la vista
    imagen.png
    imagen.png
  • Hay dos modos para modificar el enrutamiento : 1. hash: # en la ruta 2. historial: modifica el archivo index.js sin # en la ruta
    imagen.png
  1. abrir pagina
    imagen.png

18. Paso y redirección de parámetros.

18.1 Pasar parámetros a través de la ruta

  1. Modificar la etiqueta <router-link> del front-end
    imagen.png
  2. Modificar la información de enrutamiento en index.js
    imagen.png
  3. Saque los parámetros en la página de inicio y modifique: Profile.vue. Tenga en cuenta que es una ruta, no un enrutador.
    imagen.png
  4. abrir pagina
    imagen.png

18.2 Pasar parámetros a través de accesorios

  • Mostrar nombre de usuario después de completar el inicio de sesión
  1. Login.vue modificadoimagen.png
  2. Modificar index.js
    imagen.png
  3. Adquisición de la página de inicio: Main.vue
    imagen.png

18.3 Redirecciones

  1. Modifique index.js y agregue información de redireccionamiento
    imagen.png
  2. Modificado Main.vue
    imagen.png
  3. abrir pagina

imagen.png

19. 404 y ganchos de enrutamiento

19.1 404

  1. Cree un nuevo componente de vista: 404.vue
  2. Configure el componente 404 en información de enrutamiento: index.js
    imagen.png
  3. Inicie la página y acceda a voluntad a un camino inexistente
<template>
  <div>
    <h1>404,页面走丢了！</h1>
  </div>
</template>
<script>
  export default {
    name: "404"
  }
</script>
<style scoped>
</style>

imagen.png

19.2 Ganchos de enrutamiento

1. Uso básico

  • beforeRouteEnter: gancho ejecutado antes de ingresar a la ruta
  • beforeRouteLeave: gancho ejecutado antes de abandonar la ruta
  1. Modificar perfil.vue
    imagen.png
  2. abrir pagina
  • Descripción del parámetro :
    • a: La información de la ruta a la que saltará la ruta
    • de: información de ruta antes del salto de ruta
    • siguiente: parámetros de control de enrutamiento
      • next() salta a la página siguiente
      • next('/path') cambia la dirección de salto de la ruta para que salte a otra ruta
      • siguiente (falso) vuelve a la página original
      • next((vm)=>{}) solo está disponible en beforeRouteEnter, vm es la instancia del componente

2. Utilice solicitudes asincrónicas en funciones de enlace.

  1. Instalar Axios
  2. main.js hace referencia a Axios
  3. Para preparar los datos, solo se puede acceder a los archivos de nuestro directorio estático, por lo que colocamos los archivos estáticos en este directorio. Cree una nueva carpeta simulada (datos de prueba) en estática y cree un nuevo data.json
  4. Realice una solicitud asincrónica en beforeRouteEnter y modifique Profile.vue
  5. Acceda a la consola de la página /user/profile y envíe los datos obtenidos.
cnpm install --save vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

{
    
    
  "name": "呵呵",
  "url": "https://blog.csdn.net/weixin_44449838",
  "page": 123,
  "isNonProfit": true,
  "address": {
    
    
    "street": "塔克拉玛干沙漠",
    "city": "新疆",
    "country": "中国"
  },
  "links": [
    {
    
    
      "name": "Google",
      "url": "http://www.google.com"
    },
    {
    
    
      "name": "Baidu",
      "url": "http://www.baidu.com"
    }
  ]
}

export default {
    
    
  //第二种取值方式
  // props:['id'],
  name: "UserProfile",
  //钩子函数 过滤器
  beforeRouteEnter: (to, from, next) => {
    
    
    //加载数据
    console.log("进入路由之前")
    next(vm => {
    
    
      //进入路由之前执行getData方法
      vm.getData()
    });
  },
  beforeRouteLeave: (to, from, next) => {
    
    
    console.log("离开路由之前")
    next();
  },
  //axios
  methods: {
    
    
    getData: function () {
    
    
      this.axios({
    
    
        method: 'get',
        url: 'http://localhost:8080/static/mock/data.json'
      }).then(function (response) {
    
    
        console.log(response)
      })
    }
  }
}

Supongo que te gusta

Origin blog.csdn.net/qq_53517370/article/details/128875793
Recomendado
Clasificación
Diario
Más
2024-06-02(0)
2024-06-01(2)
2024-05-31(0)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)
2024-05-26(1)
2024-05-25(0)
2024-05-24(13)

Code World

© 2018 codetd.com