Constructor de Vue-Extend y montaje manual de $mount
1 Aplicación de escenarios
1 Características del uso de componentes tradicionales:
. 2. Los componentes normales solo pueden representar componentes en lugares específicos, lo cual está limitado en algunos escenarios especiales, como:
Segundo, uso
Al crear una instancia de Vue, siempre hay un opción el para especificar el nodo raíz de la instancia. Si la opción el no está escrita, el componente está desinstalado. La función de Vue.extend es crear una subclase basada en el constructor de Vue. Sus parámetros son básicamente los mismos que los del nuevo Vue, pero los datos son una función como un componente. Usando $mount, los componentes se pueden representar y montar en cualquier nodo específico, como el cuerpo.
Para lograr el mismo efecto, además de usar extender, también puedes crear directamente una instancia de vue y usar la función Render para renderizar un componente . De esta manera, puedes usar. Vue se puede utilizar para escribir componentes complejos y también puede pasar los accesorios adecuados según sea necesario. Después de renderizar, manipular la instancia de renderizado también es muy simple.
Cabe señalar que los componentes renderizados manualmente por mount deben ser destruidos por $destroy antes de que la instancia pueda destruirse manualmente. Si es necesario, puede utilizar removeChild para eliminar nodos del DOM.
3. Combate práctico 1-¿Cómo renderizar componentes dinámicamente? archivo vue
1. Diseño de interfaz: General. Los archivos vue contienen tres partes, plantillas, scripts y estilos. Cuando se utiliza extender para construir una instancia de componente, su plantilla de opción corresponde a
Aware
(1) Cree el directorio de visualización y cree un nuevo archivo display.vue.
(2) El código pasado por el padre se divide y almacena en el html, js y css de los datos.
(3) this.js es una cadena que se puede convertir en un tipo de objeto mediante una nueva función (this.js).
(4) Utilice extender para construir una instancia e instalarla en el nodo del componente.
(5) Cargar css es crear una etiqueta de estilo, luego escribir css en ella e insertarla en el encabezado de la página. Para facilitar la eliminación de etiquetas de estilo creadas dinámicamente cuando este código cambia o se destruye el componente, se agrega una identificación aleatoria a cada etiqueta de estilo para su identificación.
(6) Destruya manualmente las instancias creadas por extend y css en el gancho beforeDestroy.
3. ¿Para qué se puede utilizar este componente de visualización renderizado dinámicamente?
Por ejemplo, al escribir un conjunto de documentos de biblioteca de componentes de Vue, el método tradicional es escribir un archivo .Vue en el entorno de desarrollo, luego compilarlo y empaquetarlo, cargar los recursos y conectarse. Si desea cambiar incluso un solo signo de puntuación, debe volver a conectarse. Pero para los componentes de visualización, solo necesita proporcionar un servicio para modificarlos. Los archivos Vue están en línea y se pueden actualizar en tiempo real sin empaquetarlos, cargarlos y en línea.
También se puede utilizar como sitio web para escribir ejemplos en línea y ejecutarlos en tiempo real.
4. Combate Práctico 2 - Cómo llamar a componentes mediante comandos.
A mejorar...