47 preguntas básicas de la entrevista de VueJS (con respuestas)

 

VueJS como marco liviano, Vue.js proporciona funciones tan poderosas que han atraído la atención de una gran cantidad de desarrolladores.

Hoy en día, más empresas están comenzando a desarrollar proyectos basados ​​en el marco de Vue.js. Vue.js utiliza las características proporcionadas por EMAScript5 para implementar el enlace de datos, proporciona desarrollo de componentes y ayuda a acelerar el desarrollo de proyectos.

Al igual que Angular y React, Vue.js incluye pérdida de datos, enlace de datos bidireccional, implementación de DOM virtual, desarrollo de componentes, ciclo de vida, comunicación de componentes, etc. Estas tecnologías básicas son las que los desarrolladores deben dominar.

1. ¿Qué es el marco MVVM? ¿A qué escenarios se aplica?

El marco MVVM es un marco Modelo-Vista-Modelo de vista, donde ViewModel conecta el modelo (Modelo) y la vista (Vista).

En escenarios donde hay más manipulaciones de datos, el marco MVVM es más adecuado, lo que ayuda a representar páginas a través de datos de manipulación.

2. ¿Qué atributo de componente es de clase activa?

Es un atributo del componente de enlace de enrutador del módulo vue-enrutador.

3. ¿Cómo definir el enrutamiento dinámico de Vue-router?

Agregue dos puntos delante del nombre de la ruta estática, por ejemplo, establezca el parámetro de ruta dinámica id y establezca /: id para el atributo de ruta del objeto de ruta.

4. ¿Cómo obtener los parámetros dinámicos pasados?

En el componente, utilice params.id del objeto $ router, es decir, $ route.params.id.

5. ¿Qué tipo de ganchos de navegación tiene vue-router?

Hay 3 tipos.

El primero es el gancho de navegación global: router.beforeEach (hacia, desde, siguiente). La función es juzgar e interceptar antes de saltar.

El segundo es el gancho en el componente.

El tercer tipo es un componente exclusivo de enrutamiento independiente.

6. ¿Qué es mint-ui? ¿cómo utilizar?

Es una biblioteca de componentes de front-end basada en Vue.js. Instale con npm y luego importe estilos y código JavaScript mediante la importación. vue.use (mintUi) se usa para importar globalmente, import {Toast} from'mint-ui 'se usa para importar localmente en un solo componente.

7. ¿Qué es el modelo V? cual es el efecto?

v-model es una instrucción en Vue.js, que puede realizar un enlace de datos bidireccional.

8. ¿Cómo vincular eventos a etiquetas en Vue.js?

Hay dos formas de vincular eventos.

La primera es a través de la instrucción v-on, <input v-on: click = doLog () />.

La segunda forma, a través de @syntax sugar, <input @ click = doLog () />.

9. ¿Qué es vuex? ¿cómo utilizar? ¿En qué escenarios funcionales se utiliza?

Vuex es un sistema de gestión estatal implementado para el marco Vue.js.

Para utilizar vuex, se debe introducir store e inyectarlo en el componente Vue.js. Se puede acceder al objeto store a través de $ ostore dentro del componente.

Los escenarios de uso incluyen: en aplicaciones de una sola página, utilizadas para la comunicación entre componentes, como la reproducción de música, la gestión del estado de inicio de sesión y la adición a los carritos de la compra.

10. ¿Cómo implementar instrucciones personalizadas? ¿Qué funciones de gancho tiene? ¿Qué otros parámetros de la función de gancho?

Las instrucciones personalizadas incluyen los dos tipos siguientes.

• Instrucciones personalizadas globales: el objeto vue.js proporciona un método de directiva que se puede utilizar para personalizar las instrucciones. El método de la directiva acepta dos parámetros, uno es el nombre de la directiva y el otro es una función.

• Instrucciones personalizadas locales: definidas por el atributo directivas del componente.

Tiene las siguientes funciones de gancho.

• bind: se llama cuando la directiva está vinculada al elemento por primera vez.

• insertado: se llama cuando el elemento vinculado se inserta en el nodo principal (nuevo en Vue2.0).

• update: se llama cuando se actualiza el VNode del componente.

• componentUpdated: Llamado después de que el VNode y sus sub-VNodes del componente donde se encuentra la instrucción están todos actualizados (nuevo en Vue2.0).

• desvincular: se llama solo una vez, cuando la instrucción se desvincula del elemento.

Los parámetros de la función de gancho son los siguientes.

• el: El elemento vinculado por la instrucción.

• vinculante: objeto de instrucción.

• vnode: nodo virtual.

• oldVnode: el nodo virtual anterior.

11. Nombre al menos 4 instrucciones en vue.js y su uso.

Las instrucciones relacionadas y su uso son las siguientes.

• v-if: determina si el objeto está oculto.

• v-for: representación en bucle.

• v-bind: enlaza un atributo.

• v-model: para lograr un enlace de datos bidireccional.

12. ¿Qué es Vue-router? Cuales son sus componentes?

Es un complemento de enrutamiento para Vue.js. Los componentes incluyen router-link y router-vIew.

13. ¿Qué son los ganchos de navegación? ¿Cuáles son sus parámetros?

Los ganchos de navegación, también conocidos como guardias de navegación, se dividen en ganchos globales, ganchos exclusivos de ruta única y ganchos a nivel de componente.

Los ganchos globales incluyen beforeEach, beforeResolve (nuevo en Vue 2.5.0) y afterEach.

Un gancho exclusivo de ruta única tiene beforeEnter.

Los ganchos de nivel de componente incluyen beforeRouteEnter, beforeRouteUpdate (nuevo en Vue2.2) y beforeRouteLeave.

Tienen los siguientes parámetros.

• to: El objeto de enrutamiento de destino que se debe ingresar.

• from: La ruta que la navegación actual está a punto de salir.

• siguiente: Esta función debe usarse para llegar a la siguiente ruta, si no se usa será interceptada.

14. ¿Cuál es el principio de enlace de datos bidireccional en Vue.js?

Vue. Js usa las características de propiedad proporcionadas por ES5, combinadas con el modelo de publicador-suscriptor, define métodos de característica get y set para cada propiedad a través de Object.defineProperty (), publica mensajes a los suscriptores cuando los datos cambian y activa la devolución de llamada de monitoreo correspondiente.

Los pasos específicos son los siguientes.

(1) Recorra recursivamente los objetos de datos que deben observarse, incluidos los atributos de los objetos de sub-atributo, y establezca los métodos de conjunto y obtención de características. Al asignar un valor a este objeto, se activará el método de característica de conjunto acotado, por lo que se puede monitorear el cambio de datos.

(2) Utilice compilar para analizar la instrucción de la plantilla y reemplazar las variables en la plantilla con datos. Luego, inicialice la vista de la página de representación, vincule la función de actualización al nodo correspondiente a cada instrucción y agregue suscriptores que monitorean los datos. Una vez que los datos cambien, se le notificará y actualizará la vista.

(3) Los suscriptores de Watcher son el puente de comunicación entre Observer y Compile. Las funciones principales son las siguientes.

• Agréguese al atributo suscriptor (dep) cuando se crea una instancia.

• Debe tener un método update ().

• Cuando dep.notice () publica una notificación, puede llamar a su propio método Updat () y activar la función de devolución de llamada vinculada en Compile.

(4) MVVM es el punto de entrada para el enlace de datos. Integra Observer, Compile y Watcher. Observer se usa para monitorear cambios en los datos del modelo, Compile se usa para analizar y compilar instrucciones de plantilla, y Watcher se usa para establecer la conexión entre Observer y Compilar Puente de comunicación, para lograr el efecto de actualización de la vista de notificación de cambio de datos. Utilice la interacción de vista para cambiar y actualizar el efecto de enlace bidireccional de los cambios en el modelo de datos.

15. Por favor, explique su comprensión del ciclo de vida de Vue.js.

Hay 8 etapas en total, a saber, antes de crear, crear, antes de montar, montar, antes de actualizar, actualizar, antes de destruir y destruir.

• beforeCreate: después de que se inicializa la instancia, se llama antes de la configuración del evento del observador de datos y del evento / observador.

• created: se llama inmediatamente después de que se crea la instancia. En este paso, la instancia ha completado las siguientes configuraciones: observadores de datos, cálculos de atributos y métodos, y devoluciones de llamada de eventos de observación / eventos. Sin embargo, la fase de montaje aún no ha comenzado y el atributo $ el no está visible actualmente.

• beforeMount: se llama antes del inicio del montaje, la función de render relacionada se llama por primera vez.

• montado: el se reemplaza por el vm. $ el recién creado, y se llama al gancho después de que se monta en la instancia. Si la instancia raíz monta un elemento en el documento, vm.sel también está en el documento cuando se llama montado .

• beforeUpdate: se llama cuando se actualizan los datos, antes de que el DOM virtual se vuelva a renderizar y parchear.

• actualizado: el DOM virtual se vuelve a renderizar y se parchea debido a cambios en los datos, después de lo cual se llamará al gancho.

• beforeDestroy: se llama antes de que se destruya la instancia. En este paso, la instancia todavía está completamente disponible.

• destruido: se llama después de que se destruye la instancia de Vue. js. Después de la llamada, todo lo que indique la instancia de Vue. Js se desvinculará, se eliminarán todos los detectores de eventos y se destruirán todas las instancias secundarias.

Cuando se utiliza la función de mantenimiento activo del componente, se añaden los dos ciclos siguientes.

• activado se llama cuando se activa el componente de mantener vivo;

• Se llama a deactivated cuando el componente Keep-Live está desactivado.

La versión Vue 2.5.0 agrega un nuevo gancho de ciclo: ErrorCaptured, que se llama cuando se captura un error de un componente descendiente.

16. Describa el proceso de encapsulación de componentes de Vue.

Los componentes pueden mejorar la eficiencia de desarrollo de todo el proyecto, pueden abstraer la página en múltiples módulos relativamente independientes y resolver los problemas de baja eficiencia, mantenimiento difícil y reutilización en el desarrollo de proyectos tradicionales.

Utilice el método Vue.extend para crear un componente y utilice el método Vue.component para registrar el componente. Los subcomponentes necesitan datos y pueden recibir datos en accesorios. Después de que el componente secundario modifique los datos, si desea pasar los datos al componente principal, puede utilizar el método de emisión.

17. ¿Cómo conociste a vuex?

Vuex puede entenderse como un modelo o marco de desarrollo. Es una extensión de la capa de datos del marco Vue.js. Gestione de forma centralizada los cambios en los componentes de la unidad mediante el estado (fuente de datos). El estado de la aplicación se concentra en la tienda. La forma de cambiar el estado es enviar mutaciones, que es una transacción sincrónica. La lógica asincrónica debe encapsularse en acción.

18. ¿Qué es Vue-loader? ¿Cuáles son sus usos?

Es un cargador que analiza archivos .vue y puede convertir template / js / style en módulos JavaScript.

El propósito es escribir la gramática de EMAScript 6 a través de vue-loader, JavaScript, scss o menos para el estilo de estilo y la gramática de jade para la plantilla.

19. Indíquenos el uso de cada carpeta y archivo en el directorio src del proyecto vue.cli.

La carpeta de activos almacena recursos estáticos; los componentes almacenan componentes; el enrutador define las configuraciones relacionadas con el enrutamiento; la vista es una vista; app. Vue es un componente principal de la aplicación; main.js es un archivo de entrada.

20. ¿Cómo usar componentes personalizados en Vue.cli? ¿Qué problemas ha encontrado durante el uso?

Los pasos específicos son los siguientes.

(1) Cree un nuevo archivo de componentes en el directorio de componentes y el script debe exportar la interfaz expuesta.

(2) Importe las páginas (componentes) que deben utilizarse.

(3) Inyecte los componentes importados en la propiedad de los componentes de los subcomponentes uejs.

(4) Utilice componentes personalizados en la vista de plantilla.

21. Hable sobre su comprensión de la compilación de plantillas de vue.js.

En resumen, primero se convierte en AST (Árbol de sintaxis abstracta, árbol de sintaxis abstracta), es decir, la estructura de sintaxis del código fuente se abstrae en una representación en forma de árbol, y luego se procesa a través de la función de procesamiento y se devuelve a VNode (Vue .js nodo DOM virtual).

Los pasos detallados son los siguientes.

(1) La plantilla se compila en AST a través del compilador de compilación, compile es el valor de retorno de create Compiler y createCompiler se usa para crear el compilador. Además, la compilación también es responsable de fusionar opciones.

(2) AST obtendrá la función de renderizado a través de generate (el proceso de transformar AST en una cadena de función de renderizado). El valor de retorno de render es VNode, que es un nodo DOM virtual de Vue.Js, que contiene subnodos de nombre de etiqueta , texto, etc.

22. Hable sobre el modo MVVM en Vue.js.

El modelo MVVM es el modelo Model-View-ViewModel.

Vue.js se basa en datos. Vue.js crea una instancia del objeto para vincular el DOM y los datos. Una vez vinculado, se sincronizará con los datos. Siempre que los datos cambien, el DOM también cambiará.

ViewModel es el núcleo de Vue.js, es una instancia de Vue.js. Vue.js creará una instancia de un elemento HTML. Este elemento HTML puede ser el cuerpo o el elemento al que hace referencia un selector de CSS.

Los escuchas DOM y los enlaces de datos son las claves para el enlace bidireccional. Los oyentes DOM monitorean todos los elementos DOM en la capa Ver de la página. Cuando ocurren cambios, los datos en la capa Modelo cambian en consecuencia. Data Bindings supervisa los datos de la capa de modelo. Cuando los datos cambian, los elementos DOM de la capa de vista también cambian.

23. ¿Cuál es la diferencia entre el comando v-show y el comando v-if?

Tanto v-show como v-if son instrucciones de renderizado condicional. La diferencia es que no importa que el valor de v-show sea verdadero o falso, el elemento existirá en la página HTML; y solo cuando el valor de v-if sea verdadero, el elemento existirá en la página HTML. El comando v-show se implementa modificando el valor del atributo de estilo del elemento.

24. ¿Cómo hacer que CSS solo funcione en el componente actual?

Cada componente de Vue.js puede definir su propio código CSS y JavaScript. Si desea que el CSS escrito en el componente solo funcione en el componente actual, solo necesita agregar el atributo Scoped a la etiqueta Style, es decir, <style scoped> </style>.

25. ¿Cómo crear componentes vue.js?

En vue.js, los componentes deben registrarse antes de que puedan usarse. El código específico es el siguiente

<！--应用程序--><div id="app"><ickt></ickt></div><！--模板--><template id="demo"><！--模板元素要有同一个根元素--><div><h1>{
   
   {msg}}</h1></div></template><script type="text/javascript">//定义组件类var Ickt = Vue.extend ({
   
   template：'#demo',data:function(){
   
   return {
   
   msg：'有课前端网'}}})//注册组件Vue .component（'ickt, Ickt）//定义Vue实例化对象var app= new Vue ({
   
   el：'#app',data:{}})</script>

26. ¿Cómo realizar el anidamiento de enrutamiento? ¿Cómo realizar el salto de página?

El anidamiento de enrutamiento representará otros componentes en este componente, en lugar de hacer que toda la página salte a la ubicación donde la vista del enrutador define la representación del componente. Para realizar un salto de página, la página debe procesarse en el componente raíz, que se puede configurar de la siguiente manera.

new Vue({
   
   el：'#icketang', router:router, template：'<router-view></router-view>'})

Primero, cree una instancia del componente raíz y defina el contenedor de representación del componente en el componente raíz. Luego, monte la ruta, y cuando se cambie la ruta, se cambiará toda la página.

27. ¿Cuál es la función del atributo ref?

A veces, para acceder directamente a algunos elementos dentro del componente, puede definir el atributo. En este momento, puede acceder al elemento que establece el atributo ref más rápidamente a través del atributo this. $ Refs dentro del componente. Este es un elemento DOM nativo. Utilice la API DOM nativa para manipularlos, por ejemplo, el siguiente código.

 

<div id="icke">< span ref="msg">有课前端网</span>< span ref=" otherMsg">专业前端技术学习网校</span></div>app. $refs. msg. text Content//有课前端网app. $refs.otherMsg. textContent//专业前端技术学习网校

Nota: En Ve2.0, el atributo ref reemplaza la función de la instrucción v-el en la versión 1.0.

28. ¿Qué es Vue.js?

Vue.js es un marco progresivo para crear interfaces de usuario. A diferencia de otros marcos de trabajo pesados, Vue.js adopta un diseño de desarrollo incremental de abajo hacia arriba. La biblioteca central de Vue.js solo se enfoca en la capa de vista, y es fácil de aprender e integrar con otras bibliotecas o proyectos existentes. Además, Vue.js es totalmente capaz de impulsar aplicaciones complejas de una sola página desarrolladas con bibliotecas y componentes de un solo archivo compatibles con el ecosistema Vue.js.

El objetivo de Vue. Js es implementar el desarrollo de componentes de enlace de datos reactivos a través de la API más simple posible.

29. Describe algunas características de vue.js.

Vue.js tiene las siguientes características.

(1) Modo MVVM.

Cuando el modelo de datos (Modelo) cambia, la vista (Vista) escucha el cambio y también cambia sincrónicamente; cuando la vista (Vista) cambia, el modelo de datos (Modelo) escucha el cambio y también cambia sincrónicamente.

Existen varias ventajas al utilizar el modelo MVVM.

• Acoplamiento bajo, las vistas pueden ser independientes de los cambios y modificaciones del modelo. Un modelo de vista se puede vincular a diferentes vistas. El modelo puede permanecer sin cambios cuando la vista cambia, y la vista también puede permanecer sin cambios cuando cambia el modelo.

• Reutilización, puede poner algo de lógica de vista en ViewModel, lo que permite 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. El diseñador puede centrarse en el diseño de la vista.

• Capacidad de prueba, la vista se puede probar con el modelo de vista.

(2) Desarrollo de componentes

(3) Sistema de mando

(4) Vue2.0 comenzó a admitir DOM virtual.

Pero en Vue1.0, los elementos DOM reales se manipulan en lugar del DOM virtual, lo que puede mejorar el rendimiento de representación de la página.

30. Describe las características de vue.js.

Vue. Js tiene las siguientes características.

• Conciso: la página consta de una plantilla HTML + datos JSON + objetos instanciados de Vue. Js.

• Basado en datos: calcula automáticamente atributos y rastrea expresiones de plantilla dependientes.

• Componentización: utilice componentes reutilizables y desacoplados para construir páginas.

• Ligero: la cantidad de código es pequeña y no depende de otras bibliotecas.

• Rápido: implemente de forma precisa y eficiente las actualizaciones de DOM en lotes.

• Fácil de conseguir: se puede instalar mediante npm, bower y otros métodos, y es fácil de integrar.

31. ¿Cómo vincular eventos en vue.js?

El evento está limitado por la sintaxis de v-on seguida del nombre del evento = "función de devolución de llamada del evento ()". El parámetro set () de la función de devolución de llamada de evento es opcional. Si hay un conjunto de parámetros (), los parámetros de la función de devolución de llamada de evento deben pasarse activamente y el objeto de evento debe pasarse $ event. Por supuesto, en este momento también se pueden transferir algunos otros datos personalizados. Si no hay un conjunto de parámetros, la función de devolución de llamada de evento tiene un parámetro predeterminado, que es el objeto de evento. La función de devolución de llamada de evento debe definirse en el atributo de métodos del componente, y el alcance es el objeto instanciado de Vue. Js, por lo que en el método, puede usar los datos y métodos en Vue. Js a través de esto, o puede enlazar rápidamente el evento a través de @ Grammar, como @event name = "función de devolución de llamada de evento ()".

32. Explique la función del componente <keep-alive>.

Cuando <keep-alive> envuelve componentes dinámicos, las instancias de componentes inactivos se almacenan en caché en lugar de destruirlas.

<keep-alive> es un componente abstracto, no representará un elemento DOM por sí mismo, ni aparecerá en la cadena del componente principal.

Cuando el componente se cambia dentro de <keep-alive>, se ejecutarán sus dos subfunciones de ciclo de vida, activadas y desactivadas.

<keep-alive><component :is="view"></component></keep-alive >

33. ¿Qué es axios? ¿Cómo usarlo?

axios es un módulo utilizado para reemplazar el complemento vue-resource.js en vue2.0, y es un módulo para solicitar el backend.

Instale axios con npm install axios. Según la especificación del módulo EMAScript de EMAScript 6, importe axios a través de la palabra clave import y agréguelo al prototipo de la clase Vue.js. De esta manera, cada componente (incluidos los objetos instanciados de vue.js) heredará el objeto del método. Define métodos como get y post, que pueden enviar solicitudes get o post. La función de devolución de llamada después del registro exitoso en el método then puede acceder directamente al objeto de instanciación del componente y almacenar los datos devueltos a través de la función de alcance de la función de flecha.

​​​​​​​

import Vue from ' vue' import axios from 'axios'；Vue.prototype.$http=axios； new Vue ({
   
   el：' ickt',data：{
   
   msg：' '}，template：'<h1> { { msg } }</h1>'，created:function() {
   
   this.$http.get( 'data.json' ).then（res => {
   
   this. msg= res .data. data})}})

34. En axios, ¿cuál es la operación que se realiza cuando se llama axios.post ('api / user')?

Cuando se llama al método de publicación, significa que se envía una solicitud de publicación asincrónica.

35. ¿Qué es descaro? ¿Cómo instalar y usar en ue?

Sass es una instalación de lenguaje CSS precompilado y los pasos de uso son los siguientes.

(1) Utilice npm para instalar el cargador (sass-loader, css-loader, etc.).

(2) Configure el cargador sass en webpack. Config. Js.

模块module：{
   
   //加载程序loaders:[//加载scss {
   
   test:/ \ .scss$ /, loader : 'vue-style-loader！css-loader！sass-loader '        }      ]}

(3) Agregue el atributo lang a la etiqueta de estilo del componente, por ejemplo, lang = "scss".

<style type="text/css" lang="scss">$color:red； h1 {
   
   color: $color;}</style>

36. ¿Cómo insertar imágenes cíclicamente en Vue. Js?

La interpolación del atributo "src" dará como resultado un error de solicitud 404. En su lugar, debería utilizarse el formato v-bind: src.

el código se muestra a continuación:

<ul class="list"><li v-for="item in list"><img ：src=" 'img/' + item.url" alt="></1i></u1>

Nota: La interpolación de atributos es compatible con vue1.0. En la versión 2.0, solo la instrucción v-bind o el azúcar sintáctico de dos puntos ":" pueden realizar la vinculación dinámica de atributos.

37. ¿Cómo personalizar el valor de los datos vinculados para el elemento de marquesina?

Para los botones de opción, el valor suele ser una cadena estática. Si los datos vinculados al modelo v son iguales a un valor determinado, se selecciona el botón de opción.

<1abe1>选择你喜欢的运动</1abe1><！--数据双向绑定--><label>篮球<input  type="radio"  v-model="sports"  value="basketball"></label><label>足球<input  type="radio"  v-model="sports"  value="football"></label><label>网球<input  type="radio"  v-model="sports"  value="netball"></label>

Para los cuadros de selección múltiple, el valor de la variable de vinculación del modelo v suele ser un valor booleano, verdadero significa seleccionado y falso significa no seleccionado. Si desea personalizar el valor de los datos enlazados, debe usar el comando v-bind para establecer el valor verdadero (valor cuando se selecciona) y el valor falso (valor cuando no está seleccionado).

<1abe1>选择你的兴趣爱好</labe1><label>足球<input type="checkbox"  v-model="intrest. football"></label><label>篮球<input type="checkbox"  v-model="intrest. basketball"  v-bind:true-value=" trueValue" v-bind:false-value="falsevalue"></label>

38. ¿En qué circunstancias se generarán instancias de fragmentos?

En los siguientes casos, la plantilla de instancia de fragmento contiene varios elementos de nivel superior; la plantilla solo contiene texto normal; la plantilla solo contiene otros componentes (otros componentes pueden ser una instancia de fragmento); la plantilla contiene solo una instrucción de elemento, como vue -router <router -view>; El nodo raíz de la plantilla tiene una instrucción de control de flujo, como v-if o v-for.

En estos casos, la instancia tiene un número desconocido de elementos de nivel superior y la plantilla tratará su contenido DOM como fragmentos. La instancia del fragmento seguirá representando el contenido correctamente. Sin embargo, la plantilla no tiene un nodo raíz y su $ el apunta a un nodo de ancla, que es un nodo de texto vacío (un nodo de comentario en el modo de desarrollo).

Nota: En Vue2.0, solo se permite un nodo raíz en la plantilla de un componente.

39. Realice múltiples métodos para mostrar diferentes caracteres de acuerdo con diferentes condiciones.

La selección condicional se puede lograr mediante la instrucción "v-if, v-else". Sin embargo, si hay varias selecciones de condiciones consecutivas, es necesario utilizar el atributo calculado. Por ejemplo, cuando no se ingresa contenido en el cuadro de entrada, se muestra la cadena "por favor ingrese contenido"; de lo contrario, se muestra el contenido en el cuadro de entrada. El código es el siguiente.

<div id="app"><input type="text  v-model="inputvalue"><hl>  {  { showValue } }</h1></div>var app = new Vue ( {
   
    e1："#app'， data：{
   
   inputvalue：'  'computed: {
   
    showValue:function ( ) {
   
   return this. inputvalue | | '请输入内容'       }}})

40. ¿Qué es la pérdida de datos?

Si los datos no se definen durante la inicialización, los datos actualizados no pueden activar la actualización de la representación de la página. Esta parte de los datos son los datos que faltan (porque no hay una función establecida). Este fenómeno se denomina pérdida de datos.

41. ¿Cómo detectar cambios en los datos?

Debido a la limitación de las funciones de JavaScript, Vue.js no puede detectar los cambios en las siguientes matrices, es decir, los datos modificados en las siguientes matrices se "pierden".

Establecer elementos mediante indexación directa, como app.arr [0] = ...

Modifique la longitud de los datos, como app. Arr.length.

Para resolver este problema, Vue.js extiende la matriz de observación y le agrega un método $ set (). La matriz modificada por este método puede activar la actualización de la vista y detectar cambios en los datos.

•  

app.$set(app. arr, 5， 500);

42. ¿Cómo detectar cambios de objetos?

Debido a las limitaciones de las funciones de JavaScript, Vue.js no puede detectar la adición o eliminación de atributos de objeto. Debido a que Vue.js convierte propiedades en getter / setter durante la inicialización, las propiedades deben definirse en el objeto de datos para que Vue.js pueda convertirlo y hacer que responda durante la inicialización, por ejemplo, el siguiente código

var data ={
   
    obj:{
   
    a:1}}var app= new Vue ({
   
   el：'#app ',data:data })app.obj.a=10// 'app.obj.a'和'data.obj.a'现在是响应的app. obj. b=2//'app.obj.b'不是响应的data.obj.b=2//data.obj.b'不是响应的

Si necesita agregar propiedades después de que se crea la instancia y hacer que responda, puede usar el método de instancia $ set.

app.$set（app.obj，'b'，500）// 'app.obj.b'和'data.obj.b'现在是响应的

Para objetos de datos ordinarios, puede utilizar el método global Vue.set (objeto, clave, valor).

Vue.set（data.obj，"b'，500）//'app.obj.b'和'cata,obj.b'现在是响应的

43. Habla sobre el parpadeo de la página de Vue.js { {mensaje}}.

Vue. Js proporciona una instrucción v-cloak, que permanece en el elemento hasta que la instancia asociada termina de compilarse. Cuando se usa con CSS, esta directiva puede ocultar etiquetas no compiladas hasta que se complete la compilación de la instancia. El uso es el siguiente.

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

De esta manera, el <div> no se mostrará hasta el final de la compilación.

44. ¿Cómo realizar la vinculación bidireccional de los datos del modelo v en el bucle v-for?

A veces es necesario crear entradas en un bucle y usar el modelo v para lograr un enlace de datos bidireccional. En este momento, puede vincular un miembro de la matriz del modelo v al [$ index] seleccionado, de modo que pueda vincular diferentes modelos v a diferentes entradas y operarlos por separado.

<div v-for= " ( item, index ) in arr"><input type= "text "  v-model="arr [index ] "><h1> { { arr [index ] } } </h1></div>

45. ¿Cómo resolver el problema de una jerarquía de datos demasiado profunda?

Al desarrollar un negocio, a menudo sucede que los datos se obtienen de forma asincrónica y, a veces, el nivel de datos es más profundo, como el siguiente código.

<span 'v-text="a.b.c.d"></span>

Puede usar vm. $ Set para definir manualmente una capa de datos.

vm.$set ("demo"，a .b.c.d)

46. ​​¿Cómo solucionar el problema de que la cobertura de estilo en el archivo Vue.js no surta efecto?

De acuerdo con la declaración oficial de Vue. Js, style plus scoped puede hacer que el estilo sea "privatizado" (es decir, solo es válido para el código en el archivo Vue.js actual (componente), no para el código en otros archivos ( componentes). Causar un impacto)

Muchas veces, hemos introducido una interfaz de usuario de terceros y la cobertura de estilo en los archivos Vue.js no tiene efecto. La mayoría de los problemas se deben al estilo limitado.

La solución es poner esta parte del código que debe cubrirse en un archivo CSS separado y, finalmente, importarlo en el archivo main.js.

47. ¿Cómo evitar el dominio cruzado al llamar a interfaces en el entorno de desarrollo de Vue.js?

Configure el elemento proxyTable de la siguiente manera en el directorio del proyecto config / index.js.

​​​​​​​

proxyTable:{
   
   '/api '：{
   
   target:http://xxxxxx.com changeOrigin:true,pathRewrite:{
   
   '^/api'：' '}}}

 

Fin de este artículo ~