Vue

1. slot

• 原因：组件的内容 会被模板中的覆盖 为了解决这个问题 引入一个插槽 slot

• 2.5 slot

  • slot 插槽 作用是开辟空间给未来的元素使用，未来元素也就是组件元素
  • 可以使用slot + name来使用

  <div id="app">
          <hello>
              <!-- 此处的p不会渲染 会被模板中的覆盖 为了解决这个问题 引入一个插槽 slot -->
              <p slot="header">头部</p>
              <p>底部</p>
          </hello>
      </div>
      <template id="hello">
          <div>
              <!-- 为了改变页面布局 可以用slot + name 来实现  -->
               <slot name= "header"></slot>
              <p>{{msg}}</p>
              <slot></slot>
              <!-- 插槽的作用 开辟空间给未来的元素使用 未来元素也就是组件的内容 -->
          </div>
      </template>
  
  //script
  Vue.component('Hello', {
          template: '#hello',
          data() {
              return {
                  msg: 'huahua'
              }
          }
      })
  
      //    new Vue({
      //        el:'#app'
      //    })
      new Vue({
  
      }).$mount('#app') //手动挂载
  

• 2.6 v-slot

  • v-slot是将slot组件上的数据传递给未来元素 【v-slot:default=""】

    <div id="app">
          <hello>
              <!-- 此处的p不会渲染 会被模板中的覆盖 为了解决这个问题 引入一个插槽 slot -->
              <template v-slot:default="info">
                  <p>
                     {{info.aa}} 
                  </p>
              </template>
          </hello>
      </div>
  
  
     <template id="hello">
          <div>
              <p>组件</p>
              <slot :aa="msg"></slot>
              <!-- 插槽的作用 开辟空间给未来的元素使用 未来元素也就是组件的内容 -->
          </div>
      </template>
  

2. 组件的生命周期【组件的钩子有哪些】

   1. • 为什么要使用生命周期？
      • 想要使用组件，那么就得在组件的特定阶段完成特点的任务 【 特定时间点，完成特点任务 】
      • 名词： 钩子
        • 特点时间点，触发的一个方法

   • 组件的生命周期分为三个阶段： 初始化、运行中、销毁 8个钩子函数

     • 生命周期钩子不允许写成箭头函数，因为箭头函数会改变this指向

     • 初始化

       • beforeCreate () {}

         • 组件即将创建
         • 任务： 初始化事件，并且为整个生命周期的开始做准备
         • 意义：
           • 数据未获取，真实dom未拿到
           • 数据请求，数据修改

       • created () {}

         • 组件创建结束
         • 任务： 进行数据的注入和数据的反应
         • 意义：
           • 数据拿到了，真实dom没有拿到
           • 数据请求，数据修改

       • beforeMount () {}

         • 组件即将挂载
         • 任务： 判断组件是否有el/template选项，如果有那么使用render函数将template模板中的jsx转换成VDOM对象模型，如果没有，需要我们使用$mount/outerHTML手动挂载
         • 意义：
           • 更多的是内部完成任务，我们外部就不干预了
           • 数据拿到了，真实dom没有拿到
           • 数据请求，数据修改

       • mounted () {}

         • 组件挂载结束
         • 任务： 将vdom渲染为真实dom,然后挂载到页面中，这个时候我们在页面中可以看到内容了
         • 意义：
           • 操作真实dom 【 可以进行第三方库实例化 】
           • 数据拿到了，真实dom拿到
           • 数据请求，数据修改

       • 总结;

         • 我们常将数据请求写在 created 中，因为created钩子是第一次获得数据的地方
         • mounted钩子函数可以进行DOM操作【 第三方库实例化【静态数据】 】

         new Vue({
               el:'#app',
               data:{
                   msg:'huahua'
               },
               beforeCreate() {  //组件即将创建 初始化事件并为整个生命周期做准备
                   console.log('beforeCreate');
                   console.log(this.msg);
                   //未获取数据 且真实DOM未拿到
                   console.log(document.querySelector('p'));
                 //   fetch('./data/data.json')
                 //        .then(res=>res.json())
                 //         .then(data=>console.log(data))
                 //     // .then(data=>{
                 //     //       this.msg = data.name
                 //     // })
                 //        .then(err=>{console.log(err)})
               },//可以数据请求 数据修改
               created() {   //组件创建结束 数据注入
                   console.log('created');
                   console.log(this.msg);//可获取数据  真实DOM未拿到
                   console.log(document.querySelector('p'));
                   fetch('./data/data.json')
                        .then(res=>res.json())
                         // .then(data=>console.log(data))
                     .then(data=>{
                           this.msg = data.name
                     })
                        .then(err=>{console.log(err)})
               },//数据请求 数据修改
               beforeMount() {  //组件即将挂载
                  console.log('beforeMount');
                   console.log(this.msg);//可获取数据  真实DOM未拿到
                   console.log(document.querySelector('p'));
               },
               mounted() {
                 console.log('mounted');
                   console.log(this.msg);
                   console.log(document.querySelector('p'));
               },
           })
         

     • 运行中

       • beforeUpdate 组件更新前
         • 触发条件： 组件的数据发生改变
         • 任务： VDOM重新生成，然后通过diff算法和以前的VDOM比对，生成patch补丁对象 【 内部进行 】
       • updated 组件更新结束
         • 触发条件： 组件的数据发生改变
         • 任务： 将patch补丁对象进行渲染生成真实dom
         • 意义：
           • 可以操作DOM 【 第三方库的实例化【 动态数据 】 】
       • 总结： 平时使用updated进行第三方库实例化

     • 销毁

     • 意义： 用来完成善后工作 【 计时器， 第三库实例， window.onscroll 】

     • 组件的销毁有两种形式

       • 内部销毁 this.$destroy
         • 组件会被销毁掉，但是组件的DOM外壳还在
       • 外部销毁
       • 通过开关销毁 【 推荐 】

     • 组件的销毁会触发两个钩子函数 【 没啥差别， 任意选择使用 】

       • beforeDestroy () {} 销毁前
       • destroyed () {} 销毁结束

3. 生命周期案例【轮播】

   • Swiper 第三方类库

     • 触摸滑动插件

      <link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.css" rel="stylesheet">
      <script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.js"></script>
     

   • 数据请求 + 数据修改 created中写

     //请求数据 静态请求  
      new Vue({
         el: '#app',
         data: {
           banners: []
         },
         created () {
           fetch('./data/banner.json')
             .then( res => res.json())
             .then( data => {
               this.banners = data 
             })
             .catch( error => console.log( error ))
         },
         mounted () {
           this.mySwiper = new Swiper ('.swiper-container', {
             loop: true, // 循环模式选项
             
             // 如果需要分页器
             pagination: {
               el: '.swiper-pagination',
             },
             
             // 如果需要前进后退按钮
             navigation: {
               nextEl: '.swiper-button-next',
               prevEl: '.swiper-button-prev',
             },
             
             // 如果需要滚动条
             scrollbar: {
               el: '.swiper-scrollbar',
             },
           })          
         },
         destroyed () {
           delete this.mySwiper
         }
       })
     

   • 静态数据第三方库实例化： mounted

   • 动态数据第三方库实例化： updated【 做判断 ，避免重复实例化】 / Vue.nextTick【 this.$nextTick】 /setTimeout

   //动态请求
   <script>
     new Vue({
       el: '#app',
       data: {
         banners: [],
         num: 100
       },
       created () {
         fetch('./data/banner.json')
           .then( res => res.json())
           .then( data => {
             this.banners = data 
             // 方案二
             // setTimeout(() => {
             //   if( this.mySwiper ) return false
             //     this.mySwiper = new Swiper ('.swiper-container', {
             //       loop: true, // 循环模式选项
                   
             //       // 如果需要分页器
             //       pagination: {
             //         el: '.swiper-pagination',
             //       },
                   
             //       // 如果需要前进后退按钮
             //       navigation: {
             //         nextEl: '.swiper-button-next',
             //         prevEl: '.swiper-button-prev',
             //       },
                   
             //       // 如果需要滚动条
             //       scrollbar: {
             //         el: '.swiper-scrollbar',
             //       },
             //     })          
             // },0)
   
             // 方案三        Vue中提供了一个 $nextTick        this.$nextTick   Vue.nextTick
             // Vue中nextTick表示DOM更新结束之后执行
   
               // this.$nextTick(() => {
               //   this.mySwiper = new Swiper ('.swiper-container', {
               //     loop: true, // 循环模式选项
                   
               //     // 如果需要分页器
               //     pagination: {
               //       el: '.swiper-pagination',
               //     },
                   
               //     // 如果需要前进后退按钮
               //     navigation: {
               //       nextEl: '.swiper-button-next',
               //       prevEl: '.swiper-button-prev',
               //     },
                   
               //     // 如果需要滚动条
               //     scrollbar: {
               //       el: '.swiper-scrollbar',
               //     },
               //   })   
               // })
   
               Vue.nextTick(() => {
                 this.mySwiper = new Swiper ('.swiper-container', {
                   loop: true, // 循环模式选项
                   
                   // 如果需要分页器
                   pagination: {
                     el: '.swiper-pagination',
                   },
                   
                   // 如果需要前进后退按钮
                   navigation: {
                     nextEl: '.swiper-button-next',
                     prevEl: '.swiper-button-prev',
                   },
                   
                   // 如果需要滚动条
                   scrollbar: {
                     el: '.swiper-scrollbar',
                   },
                 })   
               })
   
   
   
           })
           .catch( error => console.log( error ))
       },
       updated () {
         console.log('updated')
         // 这是一种方案
         // if( this.mySwiper ) return false
         // this.mySwiper = new Swiper ('.swiper-container', {
         //   loop: true, // 循环模式选项
           
         //   // 如果需要分页器
         //   pagination: {
         //     el: '.swiper-pagination',
         //   },
           
         //   // 如果需要前进后退按钮
         //   navigation: {
         //     nextEl: '.swiper-button-next',
         //     prevEl: '.swiper-button-prev',
         //   },
           
         //   // 如果需要滚动条
         //   scrollbar: {
         //     el: '.swiper-scrollbar',
         //   },
         // })          
       },
       destroyed () {
         delete this.mySwiper
       }
     })
   

4. 自定义过滤器

   • 注意：

     • 是对已有数据进行格式化
     • 过滤器也可以传递参数
     • 过滤器要使用管道符才能起作用

   • 分类

     • 全局过滤器
       • Vue.filter(过滤器名称，回调函数)

     <body>
       <div id="app">
         <p> {{ time | dateFilter('*') }} </p>
       </div>
     </body>
     <script src="../../../lib/vue.js"></script>
     <script>
       /* 
         案例： 日期的格式化   new Date() 
         Wed Jul 31 2019 15:35:19 GMT+0800 (China Standard Time) ---> 2019/7/31
       */
     
       /* 
         过滤器
           1. 全局
           2. 局部
     
         时间戳： Date.now()            date.getTime()
     
     
         使用： <p> {{ 要格式化的数据 | 过滤器名称 }} </p>
     
     
         |  管道符
     
         回调函数中的返回值是什么，格式化后的数据就是什么
     
       */
     
       // Vue.filter(过滤器名称，过滤器的回调函数 )
     
       Vue.filter( 'dateFilter', ( val,type ) => { //val就是我们要过滤的数据
         var date = new Date( val )
         return date.getFullYear() + type + ( date.getMonth() + 1 ) +type+ date.getDate()
       })
     
       new Vue({
         el: '#app',
         data: {
           time: Date.now()
         }
       })
     </script>
     

     • 局部过滤器
       • filters选项

     new Vue({
         el: '#app',
         data: {
           time: Date.now()
         },
         filters: {
           // 过滤器名称： 回调函数
           'dateFilter': ( val,type) => {
               var date = new Date( val )
               return date.getFullYear() + type + ( date.getMonth() + 1 ) +type+ date.getDate()
           }
         }
       })