Renderizado de front-end
La representación de front-end consiste en completar datos en etiquetas HTML
Proceso: plantilla + datos -> renderizado de front-end -> contenido estático HTML
Método de renderizado de front-end
1. Cadena de empalme de js nativa
Método: los datos se unen a etiquetas HTML en forma de cadenas.
Desventajas: código no estándar, poco claro, mantenimiento problemático
2. Motor de plantillas de front-end
Método: Basado en art-template, el código está más estandarizado y estandarizado.
Ventajas: legibilidad mejorada, conveniente para mantenimiento posterior
Desventajas: no hay un mecanismo de evento especial, debe combinarse con js
3. Utilice la sintaxis de plantilla única de Vue
- Expresión de interpolación
- instrucción
- Enlace de eventos
- Vinculación de propiedad
- Encuadernación de estilo
- Estructura de bucle de rama
ejemplo
1. Cadena de empalme de js nativa
var info = document.getElementById ('información');
info.innerHTML = '';
para (var i = 0; i <10; i ++)
{
tag = "<span> 测试 </span>"
var div = document.createElement ('div');
div.innerHTML = etiqueta;
info.appendChild (div);
}
2. Motor de plantillas de front-end
<script id = 'abc' type = 'text / html'>
{{if isadmin}}
<h1> {{title}} </h1>
<ul>
{{cada lista como valor i}}
<li> 索引 ： {{i + 1}}: {{value}} </li>
{{/ each}}
</ul>
</script>
Expresión de interpolación de Vue
<div id = 'app'>
<! - Expresión de interpolación, agregue el atributo v-cloak a
div -> <div> {{msg}} </div>
<div> {{1 + 2}} </ div >
<div> {{msg + '---' + 'Vue'}} </div>
</div>
Portal: últimos datos de prueba de 2021 y principales posiciones de fábrica
Blogger: prueba para ganar dinero (un agricultor de código abierto de prueba que no es 996 sino 996)
Lema: Centrarse en el desarrollo de pruebas y la operación y el mantenimiento automatizados, trabajar duro para leer, pensar y escribir, y tener libertad financiera durante la vida del volumen interno.
Categorías de contenido: mejora tecnológica, charlas diversas en el lugar de trabajo, desarrollo profesional, lectura y escritura, gestión de inversiones y finanzas, vida sana.
csdn: https://blog.csdn.net/ccgshigao
Blog Park: https://www.cnblogs.com/qa-freeroad/
51cto: https://blog.51cto.com/14900374
Cuenta pública de WeChat: prueba para ganar dinero (comparte contenido y recursos exclusivos con regularidad)
