Los trucos en desarrollo (notas para trabajadores front-end)

1. Acerca de vue usando van-popup de vant, el problema de falla de posicionamiento fijo de configuración de subelementos.

posición: fija;

La razón es que el componente usa transform, y el uso de transform en el elemento principal hará que el elemento secundario falle cuando se usa el posicionamiento fijo. La solución es colocar el elemento secundario para que se fije en el mismo nivel que el componente. y convertirse en un elemento hermano. esto resolverá

2. Cuando el navegador tiene caché, el nuevo contenido de la página no tiene efecto

Presiona directamente Ctrl+F5 para forzar una actualización, no vayas al caché

3. Forma alternativa de escribir código

<van-button type="default">botón predeterminado</van-button>

<componente es="van-button" type="default">botón predeterminado</component>

 

4. Resuelva el problema de que aparecen dos carpetas en el control remoto después de cambiar la primera letra de la carpeta a mayúsculas en el proyecto git

La mejor solución es copiar directamente el archivo original, eliminar el archivo original y cambiar el nombre del archivo copiado a un nuevo nombre, diferente del nombre del archivo original.

y luego cambiar todas las referencias a

Cinco, tecla de método abreviado de depuración de código fuente de Chrome

1.ctrl+shift+f búsqueda de texto completo

2.ctrl+o para encontrar el nombre del archivo

3. ctrl+shift+o para encontrar el nombre de la función js

6. El componente principal obtiene las propiedades y métodos del componente secundario

$ referencias

$niños

Hijo a padre $emitir

7. El componente secundario obtiene las propiedades y métodos del componente principal

$atributos

accesorios de padre a hijo

$padre

$raíz

八、View.observable()

Es equivalente a la primera versión de vuex, el prototipo de vuex.Use Vue.observable para escribir un objeto en el archivo js, ​​escriba un método de mutación en el archivo js actual para modificar el valor del objeto y exporte estos dos objetos y métodos Use este El lugar donde se introducen los parámetros, el objeto se monitorea a través de computado, y se completa la transferencia de parámetros globales

9. El componente hijo modifica directamente el valor de la variable del componente padre

componente padre

        <HandleLogs :detail.sync="detail"></HandleLogs>

Subensamblaje

this.$emit('actualizar:detalle',{})

Diez, cadena a número

numero constante = "1000" * 1;

11. Usa el selector ":no"

Todos menos el último elemento necesitan algo de estilo, lo cual es muy fácil con el selector not.

li:not(:último-hijo) {

borde inferior: 1px sólido #ebedf0;

}

12. Use "caret-color" para modificar el color del cursor

color de intercalación: #ffd476;

13. No permitir la selección de texto

selección de usuario: ninguno;

Catorce, ahora hablemos sobre el paso de parámetros de bus de bus de eventos

La transferencia de parámetros de bus es en realidad una nueva instancia de Vue sin un elemento dom, y luego se monta en el prototipo de Vue para convertirse en un método de transferencia de parámetros disponible globalmente. Este método usa $emit para pasar y editar valores, y usa $on para monitorear y obtener valor, use $off para apagar el oyente

15. La diferencia entre eliminar y Vue.delete

Vue.delete se puede usar en vue 2. Vue.delete y this.$set existen para activar actualizaciones de vista, pero vue.delete se usa para eliminar el valor en el elemento

Uso: this.$delete

 Dieciséis, vue3 nuevo fragmento

(Similar al uso de la plantilla) A veces escribimos algunos divs innecesarios para el juicio o el uso de bucles. En este momento, podemos usar fragmentos en su lugar, y los fragmentos no se representarán en la página como etiquetas.

Diecisiete, la diferencia entre vue2 y vue3

Vue2 es un modo de suscriptor-editor con la ayuda de Object.difineProprty, que monitorea y modifica las propiedades de los objetos a través de get y set

Vue3 es un proxy de objetos a través del proxy de es6, que tiene un rendimiento más potente y no necesita reescribir la matriz

Vue3 ya no realiza actualizaciones completas de dom, solo actualiza y representa elementos con logotipos receptivos, que es una optimización del algoritmo diff

18. Clasificación de burbujas manuscritas: creo que es relativamente simple y fácil de entender

var cicatriz = [453,23,0,9,65,51, 2, 3, 4, 5, 6, 7, 8, 9,10];

for(var i =0;i<arr.longitud;i++){for(var k =0;k<arr.longitud+i;k++){if(arr[k]>arr[k+1]){[ arr[k],arr[k+1]]=[arr[k+1],arr[k]]}}}

consola.log(arr)

19. Explicación de términos - andamios

Es una herramienta que permite a los desarrolladores construir proyectos rápidamente. Las dependencias requeridas para el desarrollo se pueden configurar a través de scaffolding. Se pueden seleccionar varios lenguajes precompilados y bibliotecas de componentes para construir rápidamente un entorno de desarrollo de proyectos. Se puede entender como una plantilla de proyecto. , que contiene las necesidades de desarrollo. La estructura básica de archivos y la configuración básica de

 20. La brecha en el diseño de Flexbox

Gap permite que los elementos en el diseño flexible mantengan un cierto intervalo

espacio: 6px;