vista
escrito en frente
El artículo anterior resumió cómo resolver el problema de la versión de nodejs en el proceso de operación real, y también resumió la diferencia entre el ciclo de vida de vue2 y vue3.Si está interesado, puede ir al artículo anterior . el ciclo de vida vue .
Ahora que conoce los puntos de conocimiento del ciclo de vida de Vue, comencemos con la sintaxis de la plantilla de Vue. En Vue, la plantilla de Vue corresponde a la parte Vista (vista) de Vue, que también es uno de los aspectos más importantes de Vue. En Vue , debe comprender Para las plantillas de Vue, debemos comenzar desde dos aspectos, uno es la sintaxis de la plantilla de Vue y el otro es la representación de la plantilla. La sintaxis de la plantilla es más simple, pero la representación de la plantilla (compilación de la plantilla) es más complicada. Si necesita comprender la representación de la plantilla, debe comprender las funciones de representación de Vue, los principios de respuesta y similares.
Sintaxis de la plantilla Vue
<!-- App.vue -->
<template>
<div id="app">
{
{
message }}
</div>
</template>
El código anterior muestra solo una forma en la plantilla de Vue, y también es la forma de plantilla más simple y común.
En Vue, la sintaxis de la plantilla es el puente de comunicación entre la lógica y la vista. El HTML escrito usando la sintaxis de la plantilla responderá a varios cambios en la instancia de Vue. En pocas palabras, la lógica en la instancia de Vue se puede representar en la página como te gusta.
Los métodos de interpolación de uso común en las plantillas de Vue incluyen principalmente: texto, HTML sin procesar, atributos, expresiones de JavaScript, instrucciones y modificadores**, etc.
texto
Si se usa el comando v-once, entonces la interpolación es una interpolación única. Es decir, cuando los datos cambien, el contenido de la interpolación no se actualizará. Su uso es el siguiente:
<!-- App.vue -->
<template>
<div id="app">
<span v-once>{
{
message }}</span>
</div>
</template>
HTML sin formato
No puede usar v-html para componer plantillas parciales porque Vue no es un motor de plantillas basado en cadenas. Además, la representación dinámica de HTML arbitrario es peligrosa porque puede conducir fácilmente a ataques XSS.
La sintaxis de interpolación (es decir, {
{}}) interpretará los datos como texto ordinario en lugar de código HTML. Para generar HTML real, debe usar la instrucción v-html, como en el siguiente ejemplo:
<!-- App.vue -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<div>{
{
rawHTML}}</div>
<div v-html="rawHTML"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
rawHTML: '<span style="color:red;">原始HTML</span>'
}
}
}
</script>
Atributos
En el caso de los atributos booleanos, cuya presencia implica verdadero, v-bind funciona de manera ligeramente diferente, por ejemplo:
<button v-bind:disabled="isButDisabled">Button</button>
Una colección de marcos temáticos y plantillas Vue de código abierto
Ahora hay muchos proyectos de Project Vue que tienen plantillas de Vue muy útiles. Aquí hay algunas colecciones de última clase de uso común.
BootstrapVue
Con más de 85 componentes, más de 45 complementos disponibles, múltiples directivas y más de 670 íconos, BootstrapVue proporciona la implementación más completa de los componentes de Bootstrap v4.5 y el sistema de cuadrícula disponible para Vue.js v2.6 One, con amplias funciones y WAI-ARIA automático. marcado de accesibilidad.
Utilice BootstrapVue para crear proyectos ARIA (aplicación de Internet enriquecida accesible, aplicaciones de medios enriquecidos accesibles, es decir, aplicaciones amigables sin barreras) que respondan primero a dispositivos móviles, basados en Vue.js y el marco de front-end de CSS más popular del mundo: Bootstrap v4
Dirección de GitHub: BootstrapVue va directamente a
elemento-ui
Element-ui debe usarse comúnmente. Para usar Element, primero debe introducir Element-ui completo
y escribir el siguiente contenido en main.js:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
Haga clic para saltar a la dirección de salto: dirección Element-ui
También hay algunos proyectos de código abierto como:
- Marco de gestión de fondo basado en Vue2.0 y bulma0.2 - vue-admin
- Código abierto de Renren/renren-fast-vue
renren-fast-vue construye y desarrolla en base a vue y element-ui, realiza la función de front-end de la administración de fondo de renren-fast y proporciona una mejor solución de front-end
Separación de los extremos delantero y trasero, interacción de datos mediante token, implementación independiente * Personalización de temas, personalización integral unificada mediante variables scss * Menú dinámico, gestión unificada y enrutamiento de acceso mediante gestión de menús * Cambio de datos, datos de interfaz/simulación simulada mediante configuración simulada Cambio de datos* Al publicar, puede configurar dinámicamente los recursos estáticos de CDN/cambiar entre versiones antiguas y nuevas.
- Wakayori / RuoYi-Vue
- Exposición VueJS
resumen final
Puedes echar un vistazo a estos proyectos, usarlos más, aprenderás más puntos de conocimiento gramatical y recuerda prestar atención a la cuenta oficial si aprendes más conocimiento.
