Acceso
Iniciar sesión

Vue3

Presenta en detalle la sintaxis y los complementos de extensión comunes de vue3, lo cual es conveniente para aprender y consultar. ¡Está lleno de información útil!

Editado a las 2024-02-04 00:46:16,

e7qw4qya@bccto.cc

Trabajos recientes Ver más trabajos>>

Breve historia del tiempo
Este es un mapa mental sobre una breve historia del tiempo. "Una breve historia del tiempo" es una obra de divulgación científica con una influencia de gran alcance. No sólo presenta los conceptos básicos de cosmología y relatividad, sino que también analiza los agujeros negros y la expansión. del universo. temas científicos de vanguardia como la inflación y la teoría de cuerdas.
¿Cuáles son los métodos de fijación de precios para los subcontratos de proyectos bajo el modelo de contratación general EPC
¿Cuáles son los métodos de fijación de precios para los subcontratos de proyectos bajo el modelo de contratación general EPC? EPC (Ingeniería, Adquisiciones, Construcción) significa que el contratista general es responsable de todo el proceso de diseño, adquisición, construcción e instalación del proyecto, y es responsable de los servicios de operación de prueba.
Puntos de conocimiento que los ingenieros de Java deben dominar en cada etapa
Los puntos de conocimiento que los ingenieros de Java deben dominar en cada etapa se presentan en detalle y el conocimiento es completo, espero que pueda ser útil para todos.

Vue3

e7qw4qya@bccto.cc

Trabajos recientes Ver más trabajos>>

Recomendados
Resumen

Conceptos básicos de Python
- 1
e7qw4qya@bccto.cc
Aprendizaje frontal
e7qw4qya@bccto.cc
Lista de bibliotecas de PYTHON
e7qw4qya@bccto.cc
programación
e7qw4qya@bccto.cc
Crear una aplicación Django
e7qw4qya@bccto.cc
Conceptos básicos de JS Día 1
e7qw4qya@bccto.cc
Conceptos básicos de JS Día 2
e7qw4qya@bccto.cc
Conceptos básicos de JS Día 3
e7qw4qya@bccto.cc
Conceptos básicos de JS Día 4
e7qw4qya@bccto.cc
Conceptos básicos de JS Día 5
e7qw4qya@bccto.cc

Crear proyecto

vue crear A

Sintaxis de plantilla

texto

En cualquier lugar

Equivalente a $A.text() en JS

Generalmente, se usa para configurar datos con data() en js.

Versión antigua

exportar predeterminado { nombre: '123', datos(){ devolver{ msg: "mensaje" } } }

nueva versión

ref define una variable, que se puede reasignar utilizando el atributo .value. ref es un reempaquetado de reactivo

reactivo define objetos, no puede definir tipos de datos básicos y no se puede reasignar

HTML sin formato

Al representar HTML dinámicamente con variables, las llaves dobles interpretarán los datos como texto normal, no HTML.

v-html=""

Equivalente a $A.html() en JS

Atributos

Utilice variables para representar dinámicamente atributos

v-bind:id=""

Equivalente a $('div').attr('id', 'ID') en JS

v-bind:id se puede abreviar como:id

Cuando queremos que B en A="B" sea una variable, simplemente agrega: delante de A.

Se pueden admitir expresiones js simples en plantillas

Poder

Esta es una declaración, no una expresión.

{{ si (ok) {devolver mensaje} }}

El control del proceso no tendrá efecto, utilice expresiones ternarias

Representación condicional

v-si

Sólo se representará si el valor es verdadero.

v-de lo contrario

v-show

Se renderizará pero no se mostrará

Representación de lista

v-para

(x,índice) en elementos

Este comando repetirá len(items) veces, y cada vez que se use la x interior para obtener el valor en items

:clave="artículo.id"

Actualización implementada para mejorar la eficiencia

manejo de eventos

Añadir evento

Escribe directamente

@clic="contador = 1"

Funciones de llamada

@click="clickHandle(123)"

Versión antigua

métodos: { haga clic en Handle(datos){ consola.log(datos); } }

A través de esto se puede cambiar el valor de los datos en los métodos.

nueva versión

Puede agregar un evento de parámetro, que es un evento js nativo.

Aviso

El clic se puede activar en cualquier objeto en el que se haga clic, como <li>

Encuadernación bidireccional

modelo v

Puede vincular bidireccionalmente <input>, <textarea> y <select>

Cambiar el valor en los datos puede cambiar el valor en <entrada>, Cambiar el valor en <input> también puede cambiar el valor en los datos

Convertir un atributo a un tipo de modelo

v-model:página-actual="páginaahora"

v-modelo.lazy

Sólo cambiará cuando <input> pierda el foco

modelo-v.trim

Elimine los espacios en blanco iniciales y finales al recuperar

componentes

sufijo

.vue

contenido

plantilla

guion

exportar propiedades de objeto predeterminadas

nombre: el nombre del componente

datos: pasar datos

métodos: escribir funciones

componentes: almacena todos los componentes utilizados en <plantilla>

accesorios: almacena los datos pasados por el componente principal al componente secundario

watch(): se activa cuando ciertos datos cambian

calculado: calcula dinámicamente ciertos datos

configuración (accesorios, contexto): inicializa variables y funciones

ref define una variable, que se puede reasignar usando el atributo .value

El objeto de definición reactiva no se puede reasignar

context.emit(): función que activa el enlace del componente principal

return puede pasar datos a componentes secundarios

estilo

alcance

Si este atributo está presente, este estilo solo tendrá efecto en el componente actual.

carga

Introducir componentes

importar A desde ./components/A.vue

colgando del componente

componentes:{A}

componente de visualización

<A/>

Interacción de componentes

Componente principal pasado al componente secundario

pasar html

<el-main>Lista</el-main>

Pasar variables

Método de entrega

A través de accesorios en la exportación predeterminada en el script

Pasando pasos

componente principal

Escriba la etiqueta del componente secundario en la plantilla.

:A=B :C=D

Si desea pasar algún parámetro complejo B, puede escribirlo en setup()

Aquí B es el usuario.

Subconjunto

guion

exportar predeterminado { nombre: "MiComponente", accesorios: { A:{ tipo: cadena, por defecto: "" }, }, }

Generalmente, elija uno de los requeridos: verdadero y predeterminado: ""

Aviso

Los valores predeterminados para matrices y objetos deben ser funciones.

predeterminado: función(){ devolver []; }

predeterminado: función(){ devolver {}; }

En la configuración, puede hacer referencia a la información del componente principal a través de accesorios.

plantilla

{{}} Cita

tipo aprobado

Cadena

Número

Booleano

Formación

Objeto

Función

Componente secundario pasado al componente principal

Método de entrega

Pasar datos a través de eventos personalizados

Pasando pasos

Subconjunto

Escribe un evento A en la plantilla.

fuente del evento

Implementar este evento A en métodos.

Versión antigua

this.$emitir("B",este.mensaje)

nueva versión

context.emit("B"): función que activa el enlace del componente principal

componente principal

Escriba la etiqueta del componente secundario en la plantilla.

@B="C"

Implemente este evento C en métodos. El evento tendrá un parámetro, que es el valor pasado.

C(datos){}

Ciclo de vida del componente

Cuando se crea: antes de crear, creado Al renderizar: beforeMount, montado Al actualizar: beforeUpdate, actualizado Al desmontar: beforeUnmount, desmontado

Las ocho funciones periódicas están al mismo nivel que los datos.

Introducir a terceros

deslizador

carrusel

axios

solicitud de red

Encapsulación

Cree la carpeta utils en src y cree el archivo request.js en ella

Uso específico

https://www.bilibili.com/video/BV1Y84y1B7Tz?p=14&vd_source=048c7bdfe54313b8b3ee1483d9d07e38

10:16

Solución de solicitud de red entre dominios

cadena de consulta

Convertir a cadena

enrutamiento

salto de página

Escriba la URL que debe saltarse en las rutas del enrutador

<vista-enrutador>

espectáculo

Saltar

Llevando parámetros

ruta:"/lista/:A/:B"

a="/lista/Baidu/1"

ruta constante = useRoute(); {{ruta.params.userID}}

enrutamiento anidado

Redirigir

{ ruta: '/:catchAll(.*)/', redirigir: "/404", }

actualizar

El valor predeterminado es determinar si se actualiza por nombre.

Puede personalizar el método de juicio reescribiendo el valor clave

vuex

composición

estado: usar contenido en vuex

Getter: filtrar y calcular datos en Vuex

Mutación: Modificar el estado en la tienda Vuex

Versión antigua

nueva versión

importar {useStore} desde "vuex";

tienda constante = useStore();

configuración(){ store.dispatch("iniciar sesión", {paras}) }

La confirmación es un método para enviar y ejecutar mutaciones. Las mutaciones modifican los datos y deben sincronizarse.

El envío es un método que envía y ejecuta acciones. Las acciones envían mutaciones, que pueden ser operaciones asincrónicas.

acción: similar a Mutation, admite operaciones asincrónicas, pero no puede modificar la tienda

módulos: submódulos que definen el estado

transferir

externo

estado

tienda.estado.acceso.usuario

acción

store.dispatch("nombre de función", parámetros)

mutación

store.commit("nombre de función", parámetros)

interno

las mutaciones ajustan el estado

estado.id

función de llamada

Cambiar tienda a contexto

JWT

Clave pública de contraseña -> nueva cadena Si tiene la clave pública, puede usarla para verificar si la contraseña es correcta. Pero si desea obtener la contraseña a través de esta nueva cadena, necesita la clave privada. atrás.

npm i jwt-decodificar

importar jwt_decode desde 'jwt-decode';

Nota: Hay un espacio después del Portador.

ajax

Si desea utilizar ajax en la página vue, puede escribirlo directamente en la configuración y se llamará directamente cuando se genere la página. Por supuesto, también se puede escribir en una función.

Si desea usarlo en vuex, debe colocarlo en la función para activarlo.

otro

configuración()

Fragmento sin nodo raíz

Instalar elemento

npm instala elemento-plus --save

npm install -D unplugin-vue-components unplugin-auto-importación

vue.config.js

const {defineConfig} = require('@vue/cli-service') const AutoImport = require('unplugin-auto-import/webpack') Componentes constantes = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') módulo.exportaciones = defineConfig({ transpileDependencies: verdadero, configurarWebpack: { complementos: [ Importación automática({ solucionadores: [ElementPlusResolver()] }), Componentes({ solucionadores: [ElementPlusResolver()] }) ] } })