1. Comprensión de MVVM
El nombre completo de MVVM es Model-View-ViewModel
El modelo representa un modelo de datos. Los datos y la lógica empresarial se definen en la capa Modelo; generalmente se refiere a los diversos procesos de lógica empresarial y manipulación de datos realizados en el back-end, y para el front-end es la interfaz api proporcionada por el back-end. La vista representa la vista de la interfaz de usuario y es responsable de la visualización de datos; la capa de vista es la interfaz de usuario. La interfaz está construida principalmente por HTML y CSS. ViewModel es responsable de monitorear los cambios de datos en el Modelo y controlar la actualización de la vista, procesando las operaciones de interacción del usuario;
Vue se basa en datos , el propio Vue DOM y el enlace de datos, una vez creados los enlaces, el DOM y los datos se sincronizarán, cada vez que cambien los datos, seguirán cambios en el DOM . ViewModel es el núcleo de Vue, es una instancia de Vue. El elemento HTML en un determinado elemento HTML en el alcance de la instancia de Vue puede ser el cuerpo o el elemento al que hace referencia una determinada identificación.
Dos instrucciones comunes vue
1. v-text v-text se utiliza principalmente para actualizar textContent, que puede ser equivalente al atributo text de JS.
<span v-text = "name"> </span>
o
<span> expresión de interpolación {{name}} </span>
2. v-html es equivalente al atributo innerHtml de JS
<div v-html = "contenido"> </div>
3. v-cloak se usa para mantener el elemento hasta el final de la instancia asociada para compilar y resolver el problema de parpadeo
<div id = "app" v-cloak>
<div>
{{msg}}
</div>
</div>
<script type = "text / javascript">
new Vue ({
el: '# app',
data: {
msg: 'hola mundo'
}
})
</script>
Normalmente, parpadeará cuando se cargue la página y se mostrará primero:
<div>
{{msg}}
</div>
Solo se muestra después de la compilación:
<div> ¡ hola mundo! </div>
Puede usar el comando v-cloak para resolver el problema de parpadeo de la expresión de interpolación, y usar el selector de atributos en el CSS para configurar el v-cloak para que muestre: none;
4. La instancia asociada con v-once v-once solo se renderizará una vez. Después de volver a renderizar, la instancia y todos sus nodos secundarios se considerarán como contenido estático omitido, que se puede utilizar para optimizar el rendimiento de la actualización.
<span v-once> Esto nunca cambiará: {{msg}} </span> // 单个 元素
<div v-once> // 有 子 元素
<h1> comentario </h1>
<p> {{msg} } </p>
</div>
<my-component v-once: comment = "msg"> </my-component> // 组件
<ul>
<li v-for = "i in list"> {{i }} </li>
</ul>
En el ejemplo anterior, incluso si se cambia la lista de mensajes, no se volverán a representar.
5. v-si v-if puede lograr una representación condicional, Vue representará los elementos de acuerdo con las condiciones verdaderas y falsas del valor de la expresión
<a v-if="true"> mostrar </a>
6. v-else v-else se usa con v-if, debe seguir v-if o v-else-if inmediatamente, de lo contrario no funcionará
<a v-if="true"> mostrar </a> <a v-else> ocultar </a>
7. v-else-if v-else-if actúa como el bloque else-if de v-if, que se puede usar varias veces en una cadena. La declaración de cambio se puede implementar de manera más conveniente.
<div v-if = "type === 'A'"> A </div> <div v-else-if = "type === 'B'"> B </div> <div v-else- if = "type === 'C'"> C </div> <div v-else> No A, B, C </div>
8. v-show también se usa para mostrar elementos basados en condiciones. A diferencia de v-if, si el valor de v-if es falso, el elemento se destruye y no en dom. Pero los elementos de v-show siempre se renderizarán y guardarán en el dom. Simplemente cambia el atributo de pantalla de css.
<span v-show = "true"> hola mundo </ span>
Nota: v-if tiene un costo de cambio más alto y v-show tiene un costo de renderizado inicial más alto. Por lo tanto, si desea cambiar con mucha frecuencia, v-show es mejor; si es poco probable que las condiciones cambien durante el tiempo de ejecución, v-if es mejor
9. v-for usa la instrucción v-for para renderizar de acuerdo con la matriz transversal
<div v-for = "(elemento, índice) en elementos"> </div> // El uso en, índice es un parámetro opcional, que indica el índice del elemento actual
10. v-bind v-bind se utiliza para vincular dinámicamente una o más características. Cuando no hay parámetros, se puede vincular a un objeto que contenga pares clave-valor. A menudo se utiliza para vincular dinámicamente clase y estilo. Y href, etc. Abreviado como dos puntos [:]
<div id = "app">
<div: class = "{'is-active': isActive, 'text-danger': hasError}"> </div>
</div>
<script>
var app = new Vue ( {
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>
Después de la compilación
<div class = "is-active"> </div>
11. v-model se utiliza para crear enlaces de datos bidireccionales en el formulario
<div id = "app">
<input v-model = "name">
<p> hola {{name}} </p>
</div>
<script>
var app = new Vue ({
el: '#app ',
datos: {
nombre:' 小 明 '
}
})
</script>
Los modificadores de modelo son
.lazy (resincronizar en el evento de cambio)> v-model.lazy .number (convierte automáticamente el valor de entrada del usuario en un tipo numérico)> v-model.number .trim (filtra automáticamente los espacios iniciales y finales de la entrada del usuario) > modelo v .trim
12. v-on v-on se utiliza principalmente para monitorear eventos dom con el fin de ejecutar algunos bloques de código. La expresión puede ser un nombre de método. Abreviado como: [@]
<div id = "app">
<button @ click = "consoleLog"> </button>
</div>
<script>
var app = new Vue ({
el: '#app',
métodos: {
consoleLog: function (event ) {
console.log (1)
}
}
})
</script>
Modificador de eventos
.stop evita que el evento continúe propagándose. El evento prevent ya no vuelve a cargar la página. capture utiliza el modo de captura de eventos, es decir, el evento desencadenado por el propio elemento se procesa aquí y luego es procesado por el elemento interno. self solo cuando event.target es La función de procesamiento se activa cuando el elemento actual en sí. El evento once solo se activará una vez. La pasiva le dice al navegador que no desea evitar el comportamiento predeterminado del evento.
3. ¿Cuál es la diferencia entre v-if y v-show?
Punto común: tanto v-if como v-show pueden mostrar y ocultar elementos
la diferencia:
1. v-show es solo la propiedad de visualización de un elemento de control simple y v-if es una representación condicional (la condición es verdadera, el elemento se representará, si la condición es falsa, el elemento se destruirá) 2. v-show tiene a mayor El costo de la primera representación, mientras que el costo de la primera representación de v-if es mucho menor. 3. v-if tiene un costo de conmutación más alto, y el costo de conmutación de v-show es menor. 4. v-if tiene v-else- coincidente if y v- else, y v-show no tiene 5. v-if se puede usar con la plantilla, pero v-show no
Cuarto, ¿cómo hacer que CSS solo funcione en el componente actual?
Agregar el estilo del componente al ámbito
<estilo con alcance> ... </style>
5. ¿Cuál es el papel de Keep-Alive?
Cuando Keep-Alive envuelve componentes dinámicos, las instancias de componentes inactivos se almacenarán en caché, lo que se utiliza principalmente para preservar el estado del componente o evitar volver a renderizar.
6. Pasos para usar complementos en Vue
1. Use la sintaxis import ... from ... de ES6 o el método require () de CommonJSd para introducir complementos. 2. Use el método global Vue.use (complemento) para usar complementos, y puede pasar un objeto de opción Vue.use (MyPlugin, { someOption: true})
Siete, ciclo de vida de Vue
8. ¿Cuáles son las formas de comunicarse entre los componentes de Vue?
La comunicación entre los componentes de Vue solo se refiere a los siguientes tres tipos de comunicación: comunicación de componente padre-hijo, comunicación de componente entre generaciones, comunicación de componente hermano
Nueve, la diferencia entre los escenarios computados y de observación y de la aplicación
calcula: Es un atributo calculado, que depende de otros valores de atributos, y se almacena en caché el valor del computarizada Sólo cuando el valor del atributo que depende de cambios, el. valor calculado se volverá a calcular la próxima vez que se obtiene el valor calculado. ver: más de un efecto de "observación", similar a algunas de las devoluciones de llamada del oyente de datos, la devolución de llamada se ejecutará siempre que los datos cambien cuando las operaciones posteriores monitoreadas usan el escenario: cuando necesitamos el cálculo numérico, y dependiendo de otros datos deben usarse calculados cuando los datos que necesitamos Al realizar operaciones asincrónicas o costosas durante los cambios, se debe usar el reloj
Diez, hay varios modos de enrutamiento de vue-router
Hash : use el valor hash de la URL como ruta. Soporta todos los navegadores.
Historial : Desde la API de historial de HTML5 y la configuración del servidor. Consulte el modo de historial de HTML5 en el sitio web oficial
Resumen : admite todos los modos de funcionamiento de JavaScript. Si se encuentra que no hay una API del navegador, la ruta se forzará automáticamente a este modo.
11. Comprensión de la página única de SPA, cuáles son sus ventajas y desventajas
SPA (aplicación de una sola página) solo carga el HTML, JavaScript y CSS correspondientes cuando se inicializa la página web. Una vez que se carga la página, SPA no volverá a cargarla ni la saltará debido a las operaciones del usuario. En su lugar, utiliza el mecanismo de enrutamiento para implementar la transformación de contenido HTML, la interfaz de usuario y la interacción del usuario, evitando la recarga de la página Ventajas:
1. La experiencia del usuario es buena y rápida. El cambio de contenido no necesita recargar toda la página, evitando saltos innecesarios y renderizado repetido. 2. Basado en el punto anterior, SPA es relativamente menos estresante en el servidor 3. Separación del frente -Responsabilidades de back-end y back-end, estructura clara, El front-end lleva a cabo la lógica de interacción, el back-end es responsable del procesamiento de datos
Desventajas:
1. La carga inicial requiere mucho tiempo: para realizar la función de la aplicación web de una sola página y el efecto de visualización, JavaScript y CSS deben cargarse de manera uniforme cuando se carga la página, y algunas páginas se cargan a pedido. 2. Reenviar y gestión de enrutamiento hacia atrás: debido a que una sola página se aplica en una. Todo el contenido se muestra en la página, por lo que las funciones de avance y retroceso del navegador no se pueden usar. Todo cambio de página debe desarrollar la gestión de la pila usted mismo. 3. El SEO es más difícil : Dado que todo el contenido se reemplaza y se muestra dinámicamente en una página, está en SEO. Tiene debilidades naturales