vue(9)----组件(2)slot插槽 动画过渡 动态组件

slot插槽

  • 作用: 可以让我们在组件中书写内容
  1. 单个slot
<body>
 <div id="app">
   <Hello>
     <header>  头部  header>
     <section> 内容 section>
     <footer> 底部 footer>
   Hello>
 div>
 <template id="hello">
   <div>
     hello  
     
     <slot>slot>
   div>
 template>
body>
Vue.component( 'Hello', {
   template: '#hello'
 })
 new Vue({
   el: '#app'
 })
  1. 具名solt
  <div id="app">
    <Hello>
      
头部 header>
内容 section>
底部 footer> Hello> div> <template id="hello"> <div> slot> slot> hello slot> div> template>
Vue.component( 'Hello', {
    template: '#hello'
  })
  new Vue({
    el: '#app'
  })

transition

  • vue中实现过渡或是动画一共提供了这样四种形式:
  1. 在 CSS 过渡和动画中自动应用 class — 自己写css3动画。
  2. 可以配合使用第三方 CSS 动画库,如 Animate.css – 别人写好了类名(常用)
  3. 在过渡钩子函数中使用 JavaScript 直接操作DOM–自己用原生js来写动画
  4. 可以配合使用第三方JavaScript动画库,如Velocity.js–用别人写好的动画库
<div id="app">
    
  • vue只要一使用transition组件就会自动添加6个类名 和 8 个钩子函数
  • /* 6个类名 v-enter v-leave-to v-enter-active v-leave-active*/
  • transition组件如果有name选项,就可以将类名 v- 换成 ‘name’-
<style>
    /* 6个类名  v-enter  v-leave-to  v-enter-active  v-leave-active*/
    .fade-enter-active, .fade-leave-active{
      transition: all 1s; 
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }

  style>
head>
<body>
  <div id="app">
    
  • animate.css
<link rel="stylesheet" href="./animate.css">
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
head>
<body>
  <div id="app">
    

动态组件

动态组件是vue内部提供了一个叫做component的组件,这个组件身上可以通过绑定is属性来进行 组件的切换 。

<div id="app">
      
    Vue.component( 'Aa',{
        template: '

AA

' }) Vue.component( 'Bb',{ template: '

BB

' }) new Vue({ el: '#app', data: { name: 'Aa' } })
  • 动态组件写入缓存
  • keep-alive组件可以进行组件的内容缓存,将组件的内容存入浏览器缓存中,这样可以大大的节省切换的事件。
  • keep-alive 和 component动态组件两者常常一起搭配使用
    <div id="app">
      

你可能感兴趣的:(vue.js)