Vue learning: basado en instrucciones de vue, ranuras, componentes integrados en vue2
1. Vue instrucciones
1.1 v-pro
Deje que el contenido de la etiqueta se muestre tal cual, en lugar de compilarlo y mostrarlo
<h1 v-pre>{
{msg}}</h1>
<h1 v-pre>{
{1+1}}</h1>
1,2 v-una vez
Función: permite que el elemento/componente se represente solo una vez, para evitar actualizaciones no válidas
El elemento solo se representa una vez. Cuando la página se está ejecutando, el mensaje se representará en la página. Al hacer clic, el mensaje cambiará pero no se volverá a representar en la página.
<h1 v-once @click="msg=888">{
{msg}}</h1>
data(){
return {
msg:'Vuejs项目'
}
}
1.3 v-capa
Evite que los elementos muestren llaves dobles antes del final del renderizado
Resuelva el problema de renderizar el resultado después de renderizar en la página, no aparecerán llaves dobles
<h1 v-cloak>{
{msg}}</h1>
data(){
return {
msg:'Vuejs项目'
}
}
2. Ranura
Las ranuras se pueden usar en componentes de mesa y componentes de carrusel
2.1 Ranura predeterminada
Cuando es la ranura predeterminada, puede escribir contenido directamente en el componente principal y usar <slot/>un marcador de posición en el componente secundario para hacer que el contenido escrito en el componente principal <slot/>se represente en la posición del componente secundario.
En el componente principal:
<Dialog ref="dialog">
<!-- 当是默认插槽时可以直接在父组件中写内容 -->
<!-- vip还有3天过期 -->
<!-- <input type="text"> -->
</Dialog>
En el subcomponente:
<!-- 默认插槽 default可以省略不写-->
<!-- <slot name="default"/> -->
2.2 Ranuras con nombre
Cuando se trata de una ranura con nombre, use la plantilla de la plantilla para envolver el contenido que se representará y escriba el nombre correspondiente a la ranura del subcomponente en la etiqueta de la plantilla.
ranura en V: el nombre se puede abreviar #nombre
Use la ranura para determinar dinámicamente cuál es el contenido interno del componente, ocupe una posición dentro del componente y determine a través del contenido, las diferentes ranuras tienen nombres diferentes
En el componente principal:
<template v-slot:title>
警告
</template>
En el subcomponente:
<!-- 具名插槽 -->
<slot name="title" :msg="msg"></slot>
2.3 Espacios delimitados
Las ranuras de alcance pueden extender el uso de datos en subcomponentes, y los datos recibidos solo se pueden usar en plantillas de subcomponentes y no se pueden usar en ningún otro lugar
#Name = "alcance" Para recibir los datos en el subcomponente, coloque el contenido en la ranura del subcomponente
En el componente principal:
<template #title="scope">
<h3>{
{scope.msg}}</h3>
警告
</template>
En el subcomponente:
<slot name="title" :msg="msg"></slot>
data(){
return {
visible:false,
// 作用域仅限于当前子组件内容
msg:'我是dialog组件',
}
},
3. Componentes incorporados
3.1 Componentes dinámicos
componente: según el cambio del subíndice, cambia dinámicamente el componente (descarga el componente anterior y carga el siguiente componente)
La característica es: el valor del atributo is puede ser un componente específico o el nombre del componente
3.2 Componentes de animación
transición: el atributo de nombre puede especificar el prefijo del nombre de la animación, y el modo establece el orden de la animación de entrada y la animación de salida, la entrada es primero la salida y luego la entrada, y la entrada-salida es la primera entrada y luego la salida
3.3 Componentes de caché
Keep-alive: los componentes internos se almacenarán en caché al cambiar. Los componentes que no necesitan mostrarse durante el cambio se almacenarán en caché en la memoria de la computadora en lugar de destruirse. Cuando se vuelve a mostrar el componente, solo se mostrará desde el caché y no ser re-instanciado El componente es instanciado y montado cuando se muestra por primera vez
El atributo max en keep-alive, una vez que haya demasiados componentes en caché ocupará demasiada memoria de la computadora, puede usar max para establecer la cantidad máxima de componentes que se pueden almacenar en caché
El componente de caché de mantenimiento debe estar al lado del componente dinámico; de lo contrario, no tiene ningún efecto.
Atributos en keep-alive:
atributo max: si max puede acomodar hasta diez componentes, cuando se alcanza el undécimo componente, el primer componente en la cola se destruirá y el undécimo se colocará, manteniendo diez en la memoria se puede controlar El tamaño del memoria para aliviar el uso de la memoria
include="nombre del componente" Especifique manualmente el componente interno al cambiar, solo el componente que contiene este nombre se almacenará en caché y los demás componentes se destruirán. No es necesario almacenar en caché todos los componentes, y no es necesario almacenar en caché uno. Se pueden almacenar varios componentes ser almacenado en caché Separe varios componentes con comas
excluir = "nombre del componente" El componente especificado no se almacenará en caché. Si hay varios componentes y solo unos pocos no necesitan almacenarse en caché, puede usar el atributo de exclusión
Los componentes de caché se pueden usar para componentes que requieren cambios frecuentes. Desventajas: existe el riesgo de fugas de memoria.
Código de muestra
componente principal:
<template>
<div id="app">
<!-- 动态组件 component,根据下标的变化，动态的切换组件（卸载上一个组件，搭载下一个组件） -->
<!-- 动态组件 component,特点是：is属性的值可以是具体的组件，也可以是组件的名字 -->
<!-- 动画组件 transition，其中name属性可以规定动画名称的前缀，mode设置入场动画，立场动画的顺序，out-in 先出后入，in-out 先入后出 -->
<!-- 缓存组件 keep-alive，内部组件在切换时会缓存起来，组件在切换时不需要显示的组件会缓存在计算机内存中而不是销毁当组件重新显示时只是从缓存中取出显示即可不会重新实例化 -->
<!-- keep-alive 内的max属性，一旦缓存的组件过多会占用过多的计算机内存，可以用max来设置，最多可以缓存多少个组件 -->
<!-- keep-alive 缓存组件需要紧挨着动态组件的位置否则没有效果 -->
<transition name="fade" mode="out-in">
<!-- 如果max最多可以容纳十个组件，当第十一个组件的时候会将队列中最先放进去的组件销毁掉，将第十一个放进去，一直保持内存中放十个 可以控制内存的大小，缓解内存占用情况-->
<!-- include="组件名" 手动指定内部组件在切换时只有包含该名字的组件才会被缓存其他组件会被销毁，并不是每个组件都需要缓存，同时也不一定缓存一个可以缓存多个组件，多个组件之间用逗号隔开-->
<!-- exclude="组件名" 用于指定的组件不会被缓存，有多个组件只有几个组件不需要缓存时可以用exclude属性 -->
<keep-alive :max="10" include="Home">
<component :is="coms[currentIndex]"/>
</keep-alive>
</transition>
<div class="tabbar">
<span :class="{active:currentIndex == index}" v-for="(item,index) in btns" :key="index"
@click="currentIndex=index">{
{item}}</span>
</div>
</div>
</template>
<script>
import Home from './components/Home.vue'
import Mine from './components/Mine.vue'
import Order from './components/Order.vue'
export default {
data(){
return {
currentIndex:0,
btns:['首页','订单','我的'],
// coms:[Home,Order,Mine]
// 字符串的写法
coms:['Home','Order','Mine']
}
},
components:{
Home,
Mine,
Order,
}
}
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
}
.tabbar {
display: flex;
justify-content: space-around;
align-content: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
box-sizing: border-box;
border-top:1px solid #ccc
}
.tabbar .active{
color: lightblue;
}
// 入场动画
.fade-enter {//动画开始时的状态
// opacity: 0;
transform: scale(1) rotate(0deg);
}
.fade-enter-active {
transition: all 0.2s;
}
.fade-enter-to {//动画结束时的状态
// opacity: 1;
transform: scale(1) rotate(360deg);
}
// 离场动画
.fade-leave {
// opacity: 1;
transform: scale(1) rotate(360deg);
}
.fade-leave-active {
transition: all 0.2s;
}
.fade-leave-to {
// opacity: 0;
transform: scale(1) rotate(0deg);
}
</style>
Subcomponente Inicio
<template>
<div class="Home">
Home组件
</div>
</template>
<script>
export default {
created(){
console.log('Home组件 已实例化');
},
mounted(){
console.log('Home组件 已挂载');
},
destroyed(){
console.log('Home组件 已销毁');
},
// 在激活的时候重新执行某些d代码比如重新发送请求以得到最新的数据
activated(){
console.log('Home组件 激活了');
},
deactivated(){
console.log('Home组件 缓存了');
}
}
</script>
<style>
.Home{
background-color: lightsalmon;
height: 300px;
line-height: 300px;
text-align: center;
}
</style>
subcomponente de mina
<template>
<div class="Mine">
Mine组件
</div>
</template>
<script>
export default {
created(){
console.log('Mine组件 已实例化');
},
mounted(){
console.log('Mine组件 已挂载');
},
destroyed(){
console.log('Mine组件 已销毁');
},
activated(){
console.log('Mine组件 激活了');
},
deactivated(){
console.log('Mine组件 缓存了');
}
}
</script>
<style>
.Mine{
background-color: lightgreen;
height: 300px;
line-height: 300px;
text-align: center;
}
</style>
Subcomponente de pedido
<template>
<div class="Order">
Order组件
</div>
</template>
<script>
export default {
created(){
console.log('Order组件 已实例化');
},
mounted(){
console.log('Order组件 已挂载');
},
destroyed(){
console.log('Order组件 已销毁');
},
activated(){
console.log('Order组件 激活了');
},
deactivated(){
console.log('Order组件 缓存了');
}
}
</script>
<style>
.Order{
background-color: lightskyblue;
height: 300px;
line-height: 300px;
text-align: center;
}
</style>
3.4 Funciones de ciclo de vida extendido
activado y desactivado son ganchos de ciclo de vida relacionados con caché
- activado: El componente está activado (volver a ejecutar algún código cuando esté activado, como volver a enviar la solicitud a los últimos datos)
- desactivado: el componente se almacena en caché
- errorCaptured: función de captura de errores