Vue learning - based on vue instructions, slots, built-in components in vue2
1. Vue instructions
1.1 v-pro
Let the label content be displayed as-is, instead of compiling and displaying
<h1 v-pre>{
{msg}}</h1>
<h1 v-pre>{
{1+1}}</h1>
1.2 v-once
Function: Let the element/component be rendered only once, in order to avoid invalid updates
The element is only rendered once. When the page is running, the msg will be rendered to the page. When clicked, the msg will change but will not be rendered to the page again
<h1 v-once @click="msg=888">{
{msg}}</h1>
data(){
return {
msg:'Vuejs项目'
}
}
1.3 v-cloak
Prevent elements from displaying double curly braces before the end of rendering
Solve the problem of rendering the result after rendering to the page, double braces will not appear
<h1 v-cloak>{
{msg}}</h1>
data(){
return {
msg:'Vuejs项目'
}
}
2. Slot
Slots can be used in table components and carousel components
2.1 Default slot
When it is the default slot, you can directly write content in the parent component, and use <slot/>a placeholder in the child component to make the content written in the parent component <slot/>render at the position of the child component
In the parent component:
<Dialog ref="dialog">
<!-- 当是默认插槽时可以直接在父组件中写内容 -->
<!-- vip还有3天过期 -->
<!-- <input type="text"> -->
</Dialog>
In the subcomponent:
<!-- 默认插槽 default可以省略不写-->
<!-- <slot name="default"/> -->
2.2 Named slots
When it is a named slot, use the template template to wrap the content to be rendered, and write the name corresponding to the subcomponent slot in the template tag
v-slot: name can be abbreviated #name
Use the slot to dynamically determine what the internal content of the component is, occupy a position inside the component, and determine through the content, different slots have different names
In the parent component:
<template v-slot:title>
警告
</template>
In the subcomponent:
<!-- 具名插槽 -->
<slot name="title" :msg="msg"></slot>
2.3 Scoped slots
Scope slots can extend the use of data in subcomponents, and the received data can only be used in subcomponent templates and cannot be used elsewhere
#Name = "scope" In order to receive the data in the subcomponent, put the content in the slot in the subcomponent
In the parent component:
<template #title="scope">
<h3>{
{scope.msg}}</h3>
警告
</template>
In the subcomponent:
<slot name="title" :msg="msg"></slot>
data(){
return {
visible:false,
// 作用域仅限于当前子组件内容
msg:'我是dialog组件',
}
},
3. Built-in components
3.1 Dynamic components
component: According to the change of the subscript, dynamically switch the component (unload the previous component and load the next component)
The feature is: the value of the is attribute can be a specific component or the name of the component
3.2 Animation Components
transition: The name attribute can specify the prefix of the animation name, and the mode sets the order of the entry animation and exit animation, out-in is first out and then in, and in-out is first in and then out
3.3 Cache components
keep-alive: Internal components will be cached when switching. Components that do not need to be displayed during switching will be cached in computer memory instead of being destroyed. When the component is redisplayed, it will only be displayed from the cache and will not be re-instantiated. The component is instantiated and mounted when it is displayed for the first time
The max attribute in keep-alive, once there are too many cached components will take up too much computer memory, you can use max to set the maximum number of components that can be cached
The keep-alive cache component needs to be next to the dynamic component, otherwise it has no effect
Attributes in keep-alive:
max attribute: If max can accommodate up to ten components, when the eleventh component is reached, the first component in the queue will be destroyed, and the eleventh one will be put in, keeping ten in the memory can be controlled The size of the memory to alleviate the memory usage
include="component name" Manually specify the internal component when switching, only the component containing this name will be cached and other components will be destroyed. Not every component needs to be cached, and it is not necessary to cache one. Multiple components can be cached. Separate multiple components with commas
exclude="component name" The specified component will not be cached. If there are multiple components and only a few components do not need to be cached, you can use the exclude attribute
Cache components can be used for components that require frequent switching. Disadvantages: there is a risk of memory leaks
sample code
parent component:
<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>
Home subcomponent
<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>
Mine subcomponent
<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>
Order subcomponent
<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 Extended lifecycle functions
activated and deactivated are both cache-related lifecycle hooks
- activated: The component is activated (re-execute some code when activated, such as re-sending the request to the latest data)
- deactivated: the component is cached
- errorCaptured: error capture function