Aprendizaje de desarrollo front-end [Vue]-Parte 1

1. Información general

1. Introducción

Vue (pronunciado /vjuː/, como vista) es un marco JavaScript progresivo para crear interfaces de usuario. Se basa en HTML, CSS y JavaScript estándar, y proporciona un conjunto de modelos de programación declarativos y divididos en componentes para ayudarlo a desarrollar interfaces de usuario de manera eficiente.

• Cree la interfaz de usuario: convierta los datos en una interfaz de usuario de alguna manera
• Progresivo: Vue se puede aplicar capa por capa de abajo hacia arriba. Las aplicaciones simples solo necesitan una biblioteca central liviana y compacta, y las aplicaciones complejas pueden introducir varios complementos de Vue.
• You Yuxi Desarrollo

2. Características

• Siga el patrón MVVM
• Codificación simple, tamaño pequeño, alta eficiencia operativa, adecuado para el desarrollo de dispositivos móviles/PC
• Solo se enfoca en la interfaz de usuario en sí y puede introducir otros proyectos de desarrollo de bibliotecas de terceros.
• Adopte el modo de componentes para mejorar la tasa de reutilización del código y hacer que el código sea más fácil de mantener
• Codificación declarativa, para que los codificadores no necesiten manipular directamente el DOM, lo que mejora la eficiencia del desarrollo.
• Use DOM virtual y algoritmo Diff para reutilizar nodos DOM tanto como sea posible

3.Algoritmo diferencial

Real DOM :
el proceso de representación del navegador incluye principalmente los siguientes cinco pasos:

• El navegador obtiene el documento HTML y analiza el árbol DOM
• Análisis de CSS para construir un modelo de hoja de estilo en cascada CSSOM (Modelo de objetos CSS)
• Combinar DOM Tree y CSSOM en un Render Tree
• Con Render Tree, el navegador puede obtener la definición CSS y la afiliación de cada nodo, para que pueda calcular la posición real de cada nodo.
• Dibujo de páginas por reglas de cálculo del paso anterior

DOM virtual se refiere a la construcción del árbol DOM real en forma de objetos js, para resolver el problema de rendimiento del navegador que opera el DOM real.
Virtual DOM es usar la ventaja de la velocidad de ejecución rápida de js para optimizar la operación de DOM. Use js para simular el árbol DOM y procese la operación de DOM en js antes de renderizar. Un breve resumen se divide en los siguientes tres puntos:

• Simule el árbol DOM con objetos javascript y renderice el árbol DOM;
• Compare los árboles DOM antiguos y nuevos a través del algoritmo diff para obtener el objeto de la diferencia;
• Aplica el objeto diferenciado al árbol DOM renderizado.

El algoritmo diff es un algoritmo eficiente para comparar nodos de árbol en el mismo nivel.

• Las comparaciones solo se realizarán al mismo nivel, no comparaciones entre niveles
• En el proceso de comparación de diferencias, el bucle se compara desde ambos lados hasta el medio
  

4. Construye el entorno

Cómo construir un proyecto vue

5. Fácil de usar

Una vez que el objeto de creación de instancias de Vue se monta en el elemento raíz, se genera una instancia de objeto de Vue global. El objeto de Vue pasará al objeto de configuración (opciones) durante el proceso de creación de instancias. Las opciones incluyen datos, métodos, computado, observación, etc.

• Para que Vue funcione, debe crear una instancia de Vue y pasar un objeto de configuración
• El código en el contenedor raíz todavía se ajusta a la especificación html, pero se mezcla alguna sintaxis especial de Vue
• El código en el contenedor raíz se llama plantilla de Vue
• Existe una correspondencia uno a uno entre las instancias de Vue y los contenedores , y estos últimos no se sustituirán en Vue.
• Solo hay una instancia de Vue en desarrollo real y se usará con componentes
• El xxx en { {xxx}} necesita escribir una expresión js, y xxx puede leer automáticamente todos los atributos en los datos
• Una vez que los datos en datos cambien, el lugar donde se usan los datos en la plantilla también se actualizará automáticamente.

2. Gramática

1. Sintaxis de la plantilla

Hay dos tipos de sintaxis de plantilla: sintaxis de interpolación de texto y sintaxis de instrucción.

1. Sintaxis de interpolación: utilizada para analizar el contenido de la etiqueta

<div>{
   
   {xxx}}</div>
//xxx 是 js 表达式，可以直接读取到 data 中的所有区域

2. Sintaxis de instrucción: se utiliza para analizar etiquetas (incluidos: atributos de etiqueta, contenido del cuerpo de la etiqueta, eventos vinculantes...)

• v-html: insertar como html;

<span v-html="xxx"></span>

• v-bind: enlace de datos unidireccional, los datos solo pueden fluir de datos a página;

<div v-bind:id="dynamicId"></div>
简写为：
<div :id="dynamicId"></div>

动态绑定多个值：
<div v-bind="objectOfAttrs"></div>
data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

• v-model: enlace de datos bidireccional, los datos no solo pueden fluir de datos a páginas, sino también de páginas a datos; abreviado v-model:valuecomo v-model; se usa a menudo en componentes de formulario.

<input type="text" v-model:value="name"><br/>
简写为
<input type="text" v-model="name">

• v-if: este comando elimina/inserta el elemento en función del valor verdadero o falso de la expresión

<p v-if="seen">Now you see me</p>

• v-on: Escuche eventos DOM, abreviados como @caracteres

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

Parámetros dinámicos :
también puede usar una expresión de JavaScript en el parámetro de comando, que debe encerrarse entre un par de corchetes:

<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

• El valor de la expresión en el parámetro dinámico debe ser una cadena o nulo;
• Los espacios y las comillas son ilegales en los nombres de atributos HTML;
• Al usar plantillas en línea DOM (plantillas escritas directamente en el archivo HTML), debemos evitar el uso de letras mayúsculas en el nombre, ya que el navegador forzará que se convierta a minúsculas.

2. Conceptos básicos receptivos

datos : Al usar la opción API, la opción de datos se usará para declarar el estado reactivo del componente. El valor de esta opción debe ser una función que devuelva un objeto. Vue llamará a esta función al crear una nueva instancia de componente y envolverá el objeto devuelto por la función con el sistema reactivo. Todas las propiedades de nivel superior de este objeto se transferirán a la instancia del componente (es decir, esto en métodos y enlaces de ciclo de vida).

Es decir, data es una función que se llama al crear una instancia de Vue. Esta función devuelve un objeto compuesto por los valores a responder en el componente receptivo. Las propiedades de nivel superior del objeto están vinculadas a la instancia del componente.

Hay 2 formas de escribir datos:

• Tipo de objeto: datos: { }
• Estilo funcional: data() { return { } }
  Cómo elegir: cualquier método de escritura es aceptable en la actualidad, y cuando se trata de componentes en el futuro, los datos deben usar funciones; de lo contrario, se informará un error.
  Las funciones administradas por Vue no deben escribir funciones de flecha, de lo contrario, ya no será una instancia de Vue.

el :
el tiene 2 formas de escribir

• Configure el atributo el al crear un objeto de instancia de Vue
• Cree primero una instancia de Vue y luego especifique el valor de el a través de vm.$mount('#root')

3. Agente de datos del modelo MVVM

modelo MVVM

• M: modelo Modelo, los datos en datos
• V: vista Vista, código de plantilla
• VM: modelo de vista ViewModel, instancia de Vue

Todos los atributos de los datos finalmente aparecen en la máquina virtual;
todos los atributos de la máquina virtual (es decir, la instancia de Vue) y todos los atributos del prototipo de Vue se pueden usar directamente en la plantilla de Vue (corchetes dobles grandes en la página).

Proxy de datos : operaciones de proxy en propiedades en otro objeto a través de un objeto (lectura/escritura)

Object.defineproperty (a quién agregar atributos, nombre de atributo, {elemento de configuración})
elemento de configuración:

{
    
    
	value:xx,
	enumerbale:true,//是否可枚举，默认false
	writable:true,// 是否可以被修改，默认值是false
    configurable:true// 是否可以被删除，默认值是false
	get(){
    
    }
	//当有人读取对象的该属性时，get函数(getter)就会被调用，且返回值就是该属性的值
	set(value){
    
    }
	//当有人修改对象的该属性时，set函数(setter)就会被调用，且会收到要修改的值
}

Proxy de datos en Vue :

• El proxy de datos en Vue usa el objeto vm para representar la operación de las propiedades en el objeto de datos (lectura/escritura)
• Los beneficios del proxy de datos en Vue: operación más conveniente de datos en datos
  Principios básicos
• Agregue todas las propiedades en el objeto de datos a la máquina virtual a través de object.defineProperty()
• Para cada atributo agregado a la máquina virtual, especifique un gettersetter
• Operar (leer/escribir) los atributos correspondientes en los datos dentro del gettersetter

Es decir, cuando creamos una instancia de vue, pasamos elementos de configuración, donde la función de datos devuelve un conjunto de datos, que se copia en la instancia (vm), y luego usa los datos en la función de datos para representar el proxy _data. datos. Para lograr el secuestro de datos, implemente el monitoreo de cambios de datos y notifique a Vue para que rinda. Está escrito en Vue2: cuando se crea una instancia de Vue, agrega todas las propiedades en el objeto de datos al sistema receptivo de Vue. Cuando los valores de estas propiedades cambien, la vista "responderá", es decir, la coincidencia se actualizará con los nuevos valores._data_data

Hay dos formas de escribir datos, pero ¿es un objeto o una función?

4. Manejo de eventos

• Use v-on:xxx o @xxx para enlazar eventos, donde xxx es el nombre del evento
• La devolución de llamada del evento debe configurarse en el objeto de métodos, que eventualmente estará en la máquina virtual.
• Para las funciones configuradas en los métodos, no use funciones de flecha, de lo contrario, esto no será vm pero apuntará a la ventana
• Las funciones configuradas en los métodos son todas funciones administradas por Vue, y esto apunta a la máquina virtual o al objeto de instancia del componente.
• @click="demo" tiene el mismo efecto que @click="demo($event)", pero este último puede pasar parámetros.

Modificadores de eventos :

los modificadores se pueden usar en conjunto:@click.prevent.stop=dosome

Eventos de teclado :

5. Propiedades calculadas

Atributo : los datos en datos, el primero es el nombre del atributo y el segundo es el valor del atributo.
Definición : el atributo que se utilizará no existe y debe calcularse a partir de los atributos existentes.
Principio : la capa inferior utiliza el getter y el setter proporcionados por el método Objcet.defineproperty(). El captador se llama
cuando el valor se lee por primera vez y cuando cambian los datos dependientes .
Se llama al setter cuando se modifica la propiedad.

Ventajas : en comparación con la implementación de métodos, hay un mecanismo de caché (multiplexación) en el interior, que es más eficiente y fácil de depurar.

Los valores de propiedad calculados se almacenan en caché en función de sus dependencias reactivas. Una propiedad calculada solo se vuelve a calcular cuando se actualizan sus dependencias reactivas. De lo contrario, el resultado del cálculo anterior se devuelve inmediatamente sin volver a ejecutar la función getter. Las llamadas a métodos siempre ejecutarán la función de nuevo cuando se produzca una nueva representación.

• Los atributos calculados eventualmente aparecerán en la máquina virtual, solo lea y use directamente
• Si se va a modificar la propiedad calculada, se debe escribir la función de conjunto para responder a la modificación, y el conjunto hará que cambien los datos de los que depende el cálculo.
• Si se determina que la propiedad calculada no considera la modificación , puede usar la forma abreviada de la propiedad calculada

gramática :

computed{
    
    
	计算属性名:
	{
    
    	get(){
    
    },
		set(){
    
    }}
	}

new Vue({
    
    
	el:'#root',
	data:{
    
    
		n:12
	},
	computed: {
    
    
		//完整写法
      fun: {
    
    
      	get(){
    
    
      		return n++;
      	},
     	set(value){
    
    
     		this.n=value
     	}
      // 简写
      fun2() {
    
    
        return this.n++
      }
	}
})

6. Supervisar las propiedades

Los atributos calculados se calculan directamente a partir de los atributos existentes para obtener "nuevos atributos", pero si es necesario realizar algunas operaciones derivadas en los atributos existentes, no se pueden completar.

Una propiedad de observación es una función que se activa cada vez que cambia una propiedad reactiva. Activa una función para hacer algo cuando cambia una propiedad existente para monitorear.

ver propiedades de monitoreo

• Cuando la propiedad monitoreada cambia, el controlador de la función de devolución de llamada se llama automáticamente para realizar operaciones relacionadas.
• El atributo monitoreado debe existir antes de que se pueda monitorear, se pueden monitorear los datos o el atributo calculado
• El atributo del elemento de configuración predeterminado es inmediato: falso, si se cambia a verdadero, el controlador (nuevo valor, valor anterior) se llamará una vez durante la inicialización

Hay dos formas de escribir monitoreo

• Pase en el reloj al crear Vue: {} configuración
• Supervisión a través de vm.$watch()

  const vm = new Vue({
    
    
    el: '#root',
    data: {
    
    
      isHot: true,
    },
    computed: {
    
    
      info() {
    
    
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
    
    
      changeWeather() {
    
    
        this.isHot = !this.isHot
      }
    },
    // 方式一
    /* watch:{		
			isHot:{
				immediate:true,
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			}
		} */
  })
  // 方式二
  vm.$watch('isHot', {
    
    		
    immediate: true, // 初始化时让handler调用一下
    //handler什么时候调用？当isHot发生改变时
    handler(newValue, oldValue) {
    
    
      console.log('isHot被修改了', newValue, oldValue)
    }
  })

Supervisión multinivel :
use comillas directamente para un valor en el objeto de supervisión'对象名.属性名'

const vm = new Vue({
    
    
    el: '#root',
    data: {
    
    
      number:{
    
    
		a:1,
		b:2
		}
    },
    watch:{
    
    		
		"number.a":{
    
    
				immediate:true,
				handler(newValue,oldValue){
    
    
				}
			}
		}
  })

Monitor profundo :
el reloj es superficial de forma predeterminada: la propiedad monitoreada solo activará la función de devolución de llamada cuando se le asigne un nuevo valor, pero el cambio de la propiedad anidada no se activará. Si desea escuchar todos los cambios anidados, necesita oyentes profundos.

• El reloj en Vue no monitorea el cambio del valor interno del objeto por defecto (una capa)
• La configuración en el reloj deep:truepuede monitorear el cambio del valor interno del objeto (multicapa)

Aviso

• Vue por sí mismo puede monitorear el cambio del valor interno del objeto, pero el reloj provisto por Vue no puede por defecto
• Cuando use el reloj, decida si usará el monitoreo en profundidad de acuerdo con la estructura específica de los datos de monitoreo.

Taquigrafía :
si el atributo de supervisión no tiene otros elementos de configuración, excepto el controlador, se puede abreviar.

 watch: {
    
    
      //简写
      isHot(newValue, oldValue) {
    
    
        console.log('isHot被修改了', newValue, oldValue, this)
      }

Propiedades calculadas frente a propiedades escuchadas

• Las funciones que se pueden completar con el cálculo se pueden completar con el reloj

• Las funciones que se pueden completar con el reloj pueden no completarse con el cálculo. Por ejemplo, el reloj puede realizar operaciones asincrónicas.

• Todas las funciones administradas por Vue se escriben mejor como funciones ordinarias, por lo que el punto de esto es el objeto de instancia de componente o vm

• Para todas las funciones no administradas por Vue (función de devolución de llamada del temporizador, función de devolución de llamada ajax, etc., función de devolución de llamada Promise), es mejor escribir funciones de flecha, de modo que el punto de esto sea el objeto de instancia de componente o máquina virtual

7. Enlace de clase y estilo

Un escenario de requisitos común para el enlace de datos es manipular la lista de clases CSS y los estilos en línea de un elemento, utilizando v-bind.

• Método de escritura: :class="xxx", donde xxx puede ser una cadena, una matriz o un objeto
• :style="[a,b]" donde a y b son objetos de estilo
• :style="{fontSize: xxx}" donde xxx es un valor dinámico
• El método de escritura de cadenas es adecuado para: el nombre de la clase es incierto y debe obtenerse dinámicamente
• El método de escritura de matriz es adecuado para: vincular varios estilos, el número es incierto y el nombre también es incierto
• El método de escritura de objetos es adecuado para: vincular varios estilos, se determina el número y también se determina el nombre, pero no está seguro de usarlo o no

绑定数组
<div :class="[activeClass, errorClass]"></div>

绑定对象isActive
<div :class="{ active: isActive }"></div>

<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
  <div class="basic" :class="mood" @click="changeMood">{
   
   {name}}</div><br/><br/>

  <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
  <div class="basic" :class="classArr">{
   
   {name}}</div><br/><br/>

  <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
  <div class="basic" :class="classObj">{
   
   {name}}</div><br/><br/>

  <!-- 绑定style样式--对象写法 -->
  <div class="basic" :style="styleObj">{
   
   {name}}</div><br/><br/>

  <!-- 绑定style样式--数组写法 -->
  <div class="basic" :style="styleArr">{
   
   {name}}</div>

8. Representación condicional

v-if Las directivas se utilizan para representar condicionalmente una parte del contenido. Este bloque solo se representará si la expresión de la directiva devuelve verdadero. Un v-elseelemento debe seguir a v-ifun v-else-if elemento o, de lo contrario no será reconocido.

Desea alternar más de un elemento: en este caso, podemos usar v-if en un elemento, que es solo un elemento contenedor invisible, y el resultado final renderizado no contendrá este elemento.

v-showTambién muestra condicionalmente un elemento.

<h1 v-show="ok">Hello!</h1>

v-si 与 v-para：

• v-if es una representación condicional "verdadera" porque garantiza que los detectores de eventos y los componentes secundarios dentro del bloque condicional se destruyan y se vuelvan a crear cuando se alternan.
• v-if también es perezoso: si la condición se evalúa como falsa en el primer renderizado, no se hará nada. Los bloques condicionales solo se procesan cuando la condición se vuelve verdadera por primera vez.
• Por el contrario, v-show es mucho más simple, el elemento siempre se representará independientemente de la condición inicial y solo se alternará la propiedad de visualización CSS.
• En general, v-if tiene una sobrecarga de conmutación más alta, mientras que v-show tiene una sobrecarga de representación inicial más alta. Por lo tanto, si se requiere un cambio frecuente, v-show es mejor; si las condiciones de vinculación rara vez cambian durante el tiempo de ejecución, v-if es más apropiado.

9. Representación de listas

Use la directiva v-for para representar una lista basada en una matriz.

• Se utiliza para mostrar datos de lista
• Sintaxis: <li v-for="(item, index) of items" :key="index">, donde la clave puede ser indexada, mejor es el identificador único del objeto transversal
• Traversable: arreglos, objetos, cadenas (menos usados), tiempos especificados (menos usados)

"(elemento, índice) de elementos": clave = "índice" :
Recorriendo objetos: el primero es el valor del atributo, el segundo es el nombre del atributo y el tercero es el índice de posición;
recorriendo la matriz: elemento en elementos

<li v-for="item in items">
  {
   
   { item.message }}
</li>

  <!-- 遍历数组 -->
  <h3>人员列表（遍历数组）</h3>
  <ul>
    <li v-for="(p,index) of persons" :key="index">{
    
    {
    
     p.name }}-{
    
    {
    
     p.age }}</li>
  </ul>

  <!-- 遍历对象 -->
  <h3>汽车信息（遍历对象）</h3>
  <ul>
    <li v-for="(value,k) of car" :key="k">{
    
    {
    
     k }}-{
    
    {
    
     value }}</li>
  </ul>

  <!-- 遍历字符串 -->
  <h3>测试遍历字符串（用得少）</h3>
  <ul>
    <li v-for="(char,index) of str" :key="index">{
    
    {
    
     char }}-{
    
    {
    
     index }}</li>
  </ul>

  <!-- 遍历指定次数 -->
  <h3>测试遍历指定次数（用得少）</h3>
  <ul>
    <li v-for="(number,index) of 5" :key="index">{
    
    {
    
     index }}-{
    
    {
    
     number }}</li>
  </ul>

v-for puede aceptar un valor entero directamente. En este caso de uso, la plantilla se repite varias veces según un rango de valores de 1…n.

<span v-for="n in 10">{
   
   { n }}</span>

Tenga en cuenta que el valor inicial de n aquí comienza desde 1 en lugar de 0.

Use v-for en una etiqueta para representar un bloque que contiene varios elementos.

No se recomienda usar v-for y v-if al mismo tiempo, porque no hay forma de distinguir la precedencia.

Puede usar v-for directamente en el componente, pero no pasará automáticamente ningún dato al componente, porque el componente tiene su propio alcance independiente.

Administración de claves :
de forma predeterminada, Vue actualiza la lista de elementos representados por v-for de acuerdo con la estrategia de "actualización en el lugar". Cuando cambia el orden de los elementos de datos, Vue no mueve el orden de los elementos DOM en consecuencia, sino que actualiza cada elemento en su lugar para garantizar que se representen en la posición de índice especificada originalmente.

El modo predeterminado es eficiente, pero solo es adecuado para los casos en los que el resultado de la representación de la lista no depende del estado del componente secundario o del estado DOM temporal (como los valores de entrada del formulario).

Por lo tanto, es necesario proporcionar una clave única para el bloque correspondiente a cada elemento, de modo que pueda rastrear la identidad de cada nodo, reutilizando y reordenando los elementos existentes.

Gestión de matrices :

Cambiar método: cambiar la matriz original

• empujar()
• estallido()
• cambio()
• anular desplazamiento()
• empalme()
• clasificar()
• contrarrestar()

reemplazar matriz: devuelve una nueva matriz

• filtrar()
• concat()
• rebanada()

Monitoreo de datos :
Este enlace lo explica muy claramente: Monitoreo de datos de Vue
En pocas palabras, es

1. Procese el objeto de datos en un objeto _data: agregue métodos receptivos de obtención y configuración (proxy de datos) para implementar el secuestro de datos y almacenarlos en la instancia de Vue;
2. El objeto de instancia global de Vue actúa como proxy del objeto _data para implementar operaciones directas en los atributos en _data;
3. Efecto de monitoreo de cambio de datos
   Cuando cambia cada dato con un setter reactivo, se llamará al setter reactivo, y cuando se llame al setter reactivo, activará el nuevo análisis de la plantilla, generando un nuevo DOM virtual, comparando el antiguo y el nuevo DOM virtual y actualizando la asignación de contenido al DOM real, volviendo a representar este conjunto de procesos.

Atributos agregados dinámicamente: método Vue.set(objetoobjetivo, nombreatributo, valoratributo) o this.$set(objetoobjetivo, nombreatributo, valoratributo) para agregar atributos de respuesta dinámicamente.

Vue no agrega getters y setters receptivos a los elementos de la matriz , por lo que Vue no puede monitorear los cambios en los datos de la matriz a través de subíndices.
Para arreglos, Vue responderá solo llamando a las siete API de push, pop, shift, unshift, splice, reverse y sort para cambiar el arreglo original.