vue学习---基于vue2中的vue指令、插槽、内置组件

vue学习—基于vue2中的vue指令、插槽、内置组件

1.vue的指令

1.1 v-pre

让标签内容原样显示，而不是先编译后显示

<h1 v-pre>{{msg}}</h1>
    <h1 v-pre>{{1+1}}</h1>

1.2 v-once

作用：让元素/组件只渲染一次，为了避免无效的更新

元素只渲染一次，当页面运行的时候将msg渲染到页面当点击后msg会变但是不会再次渲染到页面

<h1 v-once @click="msg=888">{{msg}}</h1>

 data(){
    return {
      msg:'Vuejs项目'
    }
  }

1.3 v-cloak

避免元素在渲染结束前显示双大括号

解决将渲染结束后的结果渲染到页面上，双大括号不会出现

 <h1 v-cloak>{{msg}}</h1>
 
 data(){
    return {
      msg:'Vuejs项目'
    }
  }

2.插槽

表格组件，轮播图组件中都可以用到插槽

2.1默认插槽

当是默认插槽时可以直接在父组件中写内容，在子组件中用<slot/>占位使得在父组件中写的内容在子组件的<slot/>位置渲染

父组件中：

<Dialog ref="dialog">
      <!-- 当是默认插槽时可以直接在父组件中写内容 -->
      <!-- vip还有3天过期 -->
      <!-- <input type="text"> -->
    </Dialog>

子组件中：

<!-- 默认插槽 default可以省略不写-->
            <!-- <slot name="default"/> -->

2.2具名插槽

当是具名插槽时，用template模板包裹需要渲染的内容，在template标签中写上子组件插槽对应的名字

v-slot:名字 可以缩写#名字

用插槽动态决定组件内部内容是什么，在组件内部占个位置，通过内容决定，不同插槽有不同的名字

父组件中：

<template v-slot:title>
        警告
      </template>

子组件中：

 <!-- 具名插槽 -->
            <slot name="title" :msg="msg"></slot>

2.3作用域插槽

作用域插槽可以延伸子组件内数据的使用范围，接收的数据只能在子组件模板中使用不能 在其他地方使用

#名字=“scope” 为了接收子组件中的数据 要在子组件中将内容放到插槽中

父组件中：

<template #title="scope">
        <h3>{{scope.msg}}</h3>
        警告
      </template>

子组件中：

<slot name="title" :msg="msg"></slot>

data(){
    return {
        visible:false,
        // 作用域仅限于当前子组件内容
        msg:'我是dialog组件',
    }
},

3.内置的组件

3.1动态组件

component：根据下标的变化，动态的切换组件（卸载上一个组件，搭载下一个组件）

特点是：is属性的值可以是具体的组件，也可以是组件的名字

3.2动画组件

transition：其中name属性可以规定动画名称的前缀，mode设置入场动画，出··场动画的顺序，out-in 先出后入，in-out 先入后出

3.3缓存组件

keep-alive：内部组件在切换时会缓存起来，组件在切换时不需要显示的组件会缓存在计算机内存中而不是销毁当组件重新显示时只是从缓存中取出显示即可不会重新实例化，当组件第一次显示的时候会被实例化并挂载

keep-alive 内的max属性，一旦缓存的组件过多会占用过多的计算机内存，可以用max来设置，最多可以缓存多少个组件

keep-alive 缓存组件需要紧挨着动态组件的位置否则没有效果

keep-alive中的属性：

max属性：如果max最多可以容纳十个组件，当第十一个组件的时候会将队列中最先放进去的组件销毁掉，将第十一个放进去，一直保持内存中放十个 可以控制内存的大小，缓解内存占用情况

include=“组件名” 手动指定内部组件在切换时只有包含该名字的组件才会被缓存其他组件会被销毁，并不是每个组件都需要缓存，同时也不一定缓存一个可以缓存多个组件，多个组件之间用逗号隔开

exclude=“组件名” 用于指定的组件不会被缓存，有多个组件只有几个组件不需要缓存时可以用exclude属性

对于需要频繁切换的组件而言可以用缓存组件，缺点：存在内存泄漏的风险

示例代码

父组件：

<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子组件

<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子组件

<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子组件

<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扩展的生命周期函数

activated和deactivated都是缓存相关生命周期钩子

1. activated：组件激活了（在激活的时候重新执行某些代码比如重新发请求到最新的数据）
2. deactivated：组件缓存了
3. errorCaptured：错误捕获函数