05 Vue进阶 - 图1

1 slot插槽 (内容分发)

  1. a. 单个slot 
  2. b. 具名slot
  3.     *混合父组件的内容与子组件自己的模板-->内容分发
  4.     *父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

1.1 基本使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10.     <!-- 不使用插槽写的aaa不会显示,使用就会显示-->
  11.     <child1>aaa</child1>
  13. </div>
  14. </body>
  15. <script>
  16.     var bus = new Vue() //new一个vue的实例，就是中央事件总线
  17.     Vue.component('child1', {
  18.         template: `<div>
  19.           首页
  20.           <slot></slot>
  21.         </div>`,
  23.     })
  24.  var vm = new Vue({
  25.         el: '#box',
  27.     })
  28. </script>
  29. </html>

1.2 插槽应用场景1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10. <!--    写了一个轮播组件，用户想轮播什么就放什么-->
  11.     <swiper>
  12.         <p v-for="data in 4">{{data}}</p>
  13.     </swiper>
  15.        <swiper>
  16.            <img :src="data" v-for="data in 5">
  17.     </swiper>
  19. </div>
  20. </body>
  21. <script>
  22.     var bus = new Vue() //new一个vue的实例，就是中央事件总线
  23.     Vue.component('swiper', {
  24.         template: `<div>
  25.           <slot></slot>
  26.         </div>`,
  28.     })
  29.  var vm = new Vue({
  30.         el: '#box',
  32.     })
  33. </script>
  34. </html>

1.3 插槽应用场景2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10.     <!--通过插槽实现在一个组件中控制另一个组件的显示隐藏-->
  11.     <navbar> <button @click="isShow=!isShow">点我显示隐藏</button></navbar>
  13.     <swiper v-if="isShow"></swiper>
  14. </div>
  15. </body>
  16. <script>
  17.     Vue.component('navbar', {
  18.         template: `<div>
  19.           navbar
  20.           <slot></slot>
  21.         </div>`,
  23.     })
  24.     Vue.component('swiper', {
  25.         template: `<div>
  26.           <p>111</p>
  27.           <p>222</p>
  28.           <p>333</p>
  29.         </div>`,
  31.     })
  32.     var vm = new Vue({
  33.         el: '#box',
  34.         data:{
  35.             isShow:true
  36.         }
  38.     })
  39. </script>
  40. </html>

1.4 具名插槽

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10. <!--    具名插槽，把p标签给a插槽，div标签给b插槽-->
  11.     <navbar>
  12.         <p slot="a">pppp</p>
  13.         <div slot="b">bbbb</div>
  14.     </navbar>
  15. </div>
  16. </body>
  17. <script>
  18.     Vue.component('navbar', {
  19.         template: `<div>
  20.         <slot name="a"></slot>
  21.           navbar
  22.           <slot name="b"></slot>
  23.         </div>`,
  25.     })
  26. var vm = new Vue({
  27.         el: '#box',
  28.         data:{
  30.         }
  32.     })
  33. </script>
  34. </html>

2 transition过渡

  1. Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
  2. (1)单元素/组件过渡  * css过渡  * css动画  * 结合animate.css动画库
  3. (2) 多个元素过渡(设置key) 
  4.      *当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。  
  5.       mode:in-out ; out-in
  6. (3)多个组件过渡
  7. (4)列表过渡(设置key) 
  8.      *<transition-group>不同于 transition， 它会以一个真实元素呈现：默认为一个 <span>。你也可以通过tag 特性更换为其他元素。  
  9.      * 提供唯一的 key 属性值

3 生命周期

  1. i. 生命周期各个阶段https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
  2. ii. 生命周期钩子函数的触发条件与作用

4 swiper学习

https://www.swiper.com.cn/

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  8.     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  9.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  10.     <!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  -->
  11.     <!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  -->
  12.     <style>
  13.         .swiper-container {
  14.             width: 80%;
  15.             height: 600px;
  16.         }
  17.     </style>
  19. </head>
  20. <body>
  21. <div id="box">
  23.     <div class="swiper-container">
  24.         <div class="swiper-wrapper">
  25.             <div class="swiper-slide" v-for="data in datalist">
  27.                 {{data}}
  28.                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg" alt="">
  29.             </div>
  30.         </div>
  31.         <!-- 如果需要分页器 -->
  32.         <div class="swiper-pagination"></div>
  33.         <!-- 如果需要导航按钮 -->
  34.         <div class="swiper-button-prev"></div>
  35.         <div class="swiper-button-next"></div>
  37.         <!-- 如果需要滚动条 -->
  38.         <div class="swiper-scrollbar"></div>
  39.     </div>
  40. </div>
  41. </body>
  42. <script>
  43.     var vm = new Vue({
  44.         el: '#box',
  45.         data: {
  46.             datalist: [],
  47.         },
  48.         mounted() {
  49.             setTimeout(() => {
  50.                 this.datalist = ['111', '222', '333']
  51.             }, 2000)
  52.             //轮播图初始化不是放在这，因为数据变化和dom更新是异步的
  53.             //需要放在updated中
  54.         },
  55.         updated() {
  56.             var mySwiper = new Swiper('.swiper-container', {
  57.                 // direction: 'vertical', // 垂直切换选项
  58.                 loop: true, // 循环模式选项
  59.                 // 如果需要分页器
  60.                 pagination: {
  61.                     el: '.swiper-pagination',
  62.                 },
  63.                 // 如果需要前进后退按钮
  64.                 navigation: {
  65.                     nextEl: '.swiper-button-next',
  66.                     prevEl: '.swiper-button-prev',
  67.                 },
  69.                 // 如果需要滚动条
  70.                 scrollbar: {
  71.                     el: '.swiper-scrollbar',
  72.                 },
  74.             })
  75.         },
  78.     })
  79. </script>
  80. </html>

5 自定义组件的封装

自定义封装swiper组件（基于swiper）
注意： 防止swipe初始化过早

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  8.     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  9.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  10.     <!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  -->
  11.     <!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  -->
  12.     <style>
  13.         .swiper-container {
  14.             width: 80%;
  15.             height: 600px;
  16.         }
  17.     </style>
  19. </head>
  20. <body>
  21. <div id="box">
  22.     {{name}}
  23. <!--    diff算法检测到key变化了，会把swipper删掉，重新创建，触发组件的mounted执行，完成swipper实例化，不在updated中初始化-->
  24. <!--    子组件的mounted在根组件的mounted之前执行，所有组件挂载完成后，根组件才挂载-->
  25.     <swipper :key="datalist.length">
  26. <!--    <swipper>-->
  27.         <div class="swiper-slide" v-for="data in datalist">
  28.             <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg" alt="">
  29.         </div>
  30.     </swipper>
  31. </div>
  32. </body>
  33. <script>
  35.     Vue.component('swipper',{
  36.         template:`
  37.         <div class="swiper-container">
  38.         <div class="swiper-wrapper">
  39.           <slot></slot>
  40.         </div>
  41.         <div class="swiper-pagination"></div>
  42.         <div class="swiper-button-prev"></div>
  43.         <div class="swiper-button-next"></div>
  44.         <div class="swiper-scrollbar"></div>
  45.     </div>
  46.         `,
  47.         mounted(){
  48.             console.log('子组件mounted')
  49.             var mySwiper = new Swiper('.swiper-container', {
  50.                 // direction: 'vertical', // 垂直切换选项
  51.                 loop: true, // 循环模式选项
  52.                 // 如果需要分页器
  53.                 pagination: {
  54.                     el: '.swiper-pagination',
  55.                 },
  56.                 // 如果需要前进后退按钮
  57.                 navigation: {
  58.                     nextEl: '.swiper-button-next',
  59.                     prevEl: '.swiper-button-prev',
  60.                 },
  62.                 // 如果需要滚动条
  63.                 scrollbar: {
  64.                     el: '.swiper-scrollbar',
  65.                 },
  67.             })
  68.         },
  70.         // updated(){//如果跟组件中有数据变化，就会导致swipper组件触发update(vm.name='ss'测试一下),导致多次执行，影响效率，所以使用key+mounted方式
  71.         //     console.log('子组件update')
  72.         //     var mySwiper = new Swiper('.swiper-container', {
  73.         //         // direction: 'vertical', // 垂直切换选项
  74.         //         loop: true, // 循环模式选项
  75.         //         // 如果需要分页器
  76.         //         pagination: {
  77.         //             el: '.swiper-pagination',
  78.         //         },
  79.         //         // 如果需要前进后退按钮
  80.         //         navigation: {
  81.         //             nextEl: '.swiper-button-next',
  82.         //             prevEl: '.swiper-button-prev',
  83.         //         },
  84.         //
  85.         //         // 如果需要滚动条
  86.         //         scrollbar: {
  87.         //             el: '.swiper-scrollbar',
  88.         //         },
  89.         //
  90.         //     })
  91.         // }
  94.     })
  95.     var vm = new Vue({
  96.         el: '#box',
  97.         data: {
  98.             name:'lqz',
  99.             datalist: [],
  100.         },
  101.         mounted() {
  102.             setTimeout(() => {
  103.                 this.datalist = ['111', '222', '333']
  104.             }, 2000)
  105.             //轮播图初始化不是放在这，因为数据变化和dom更新是异步的
  106.             //需要放在updated中
  107.         },
  111.     })
  112. </script>
  113. </html>

6 自定义指令

  1. (1)自定义指令介绍 directives
  2. (2)钩子函数* 参数 el,binding,vnode(vnode.context)* bind,inserted,update,componentUpdated,unbind
  3. (3)函数简写
  4. (4)自定义指令-轮播
  5.     *inserted 插入最后一个元素时调用(vnode.context.datalist.length-1)
  6.     *this.$nextTick()

6.1 基本使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="box">
  11.     <div v-mystyle>divdiv我是div</div>
  12. </div>
  13. </body>
  14. <script>
  15.     //自定义指令，以后用的时候必须 v-指令名，即v-mystyle
  16. Vue.directive('mystyle',{
  17.     //当被改指令修饰的标签插入到dom中会执行
  18.     inserted(){
  19.         console.log('我执行了')
  20.     },
  21. })
  22.  var vm = new Vue({
  23.         el: '#box',
  24.         data: {
  25.         },
  29.     })
  30. </script>
  31. </html>

6.2 让所有使用自定义指令的标签背景都变红色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="box">
  11.     <div v-mystyle>divdiv我是div</div>
  12.     <p v-mystyle>我是p，用了自定义指令，会变红</p>
  13. </div>
  14. </body>
  15. <script>
  16.     //自定义指令，以后用的时候必须 v-指令名，即v-mystyle
  17. Vue.directive('mystyle',{
  18.     //当被改指令修饰的标签插入到dom中会执行
  19.     inserted(el){
  20.         //el就是被修饰标签的dom
  21.         console.log(el)
  22.         //所以我们直接操作dom
  23.         el.style.background='red'
  24.     },
  25. })
  26.  var vm = new Vue({
  27.         el: '#box',
  28.         data: {
  29.         },
  33.     })
  34. </script>
  35. </html>

6.3 用户指定自定义指令的背景色,修改变量，背景变化

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="box">
  11.     <!--放js的变量，所以用'red'-->
  12.     <div v-mystyle="'red'">divdiv我是div</div>
  13.     <p v-mystyle="mycolor">我是p，用了自定义指令，会变红</p>
  14. </div>
  15. </body>
  16. <script>
  17.     //自定义指令，以后用的时候必须 v-指令名，即v-mystyle
  18. Vue.directive('mystyle',{
  19.     //当被改指令修饰的标签插入到dom中会执行
  20.     inserted(el,input){ //该方法，如果更新变量mycolor，并不会变化，所以需要重写update方法  vm.mycolor='yellow'
  21.         //el就是被修饰标签的dom
  22.         console.log(el)
  23.         console.log(input) //input的value属性是传入的变量
  24.         //所以我们直接操作dom
  25.         // el.style.background='red'
  26.         el.style.background=input.value
  27.     },
  28.     update(el,input){
  29.         el.style.background=input.value
  31.     }
  32. })
  33.  var vm = new Vue({
  34.         el: '#box',
  35.         data: {
  36.             mycolor:'green',
  37.         },
  41.     })
  42. </script>
  43. </html>

6.4 通过指令控制swipper初始化

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  8.     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  9.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  10.     <!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  -->
  11.     <!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  -->
  12.     <style>
  13.         .swiper-container {
  14.             width: 80%;
  15.             height: 600px;
  16.         }
  17.     </style>
  19. </head>
  20. <body>
  21. <div id="box">
  23.     <div class="swiper-container">
  24.         <div class="swiper-wrapper">
  25.             <!--v-comp把当前索引值和数组总长度传入，如果索引等于数组总长度减一说明都加载完了，完成swipper初始化-->
  26.             <div class="swiper-slide" v-for="(data,i) in datalist" v-comp="{index:i,length:datalist.length}">
  28.                 {{data}}
  30.             </div>
  31.         </div>
  32.         <!-- 如果需要分页器 -->
  33.         <div class="swiper-pagination"></div>
  34.         <!-- 如果需要导航按钮 -->
  35.         <div class="swiper-button-prev"></div>
  36.         <div class="swiper-button-next"></div>
  38.         <!-- 如果需要滚动条 -->
  39.         <div class="swiper-scrollbar"></div>
  40.     </div>
  41. </div>
  42. </body>
  43. <script>
  44.     Vue.directive('comp', {
  45.         inserted(el, input) {
  46.             console.log(input.value)
  47.             //只要校验到传入的是最后一个插入了，就初始化swipper
  48.             if (input.value.index === input.value.length - 1) {
  49.                 var mySwiper = new Swiper('.swiper-container', {
  50.                     // direction: 'vertical', // 垂直切换选项
  51.                     loop: true, // 循环模式选项
  52.                     // 如果需要分页器
  53.                     pagination: {
  54.                         el: '.swiper-pagination',
  55.                     },
  56.                     // 如果需要前进后退按钮
  57.                     navigation: {
  58.                         nextEl: '.swiper-button-next',
  59.                         prevEl: '.swiper-button-prev',
  60.                     },
  62.                     // 如果需要滚动条
  63.                     scrollbar: {
  64.                         el: '.swiper-scrollbar',
  65.                     },
  67.                 })
  68.             }
  70.         },
  71.     })
  72.     var vm = new Vue({
  73.         el: '#box',
  74.         data: {
  75.             datalist: [],
  76.         },
  77.         mounted() {
  78.             setTimeout(() => {
  79.                 this.datalist = ['111', '222', '333']
  80.             }, 2000)
  81.         },
  84.     })
  85. </script>
  86. </html>

7 过滤器

  1. https://cn.vuejs.org/v2/guide/filters.html
  2. ele图片转换，猫眼电影图片转换
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  7.     <script src="js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="box">
  11.     <!--猫眼数据：https://m.maoyan.com/#movie-->
  12.     <ul>
  13.         <li v-for="data in datalist">
  14.             <h2>{{data.nm}}</h2>
  15.             <br>
  16. <!--            <img :src="data.img" alt="">-->
  17. <!--            <img :src="changePath(data.img)" alt="">-->
  18. <!--            过滤器-->
  19.             <img :src="data.img | myChange" alt="">
  20.         </li>
  21.     </ul>
  22. </div>
  23. </body>
  24. <script>
  25.     //定义过滤器
  26.     Vue.filter('myChange',function (url) {
  27.         return url.replace('w.h','128.180')
  28.     })
  29.     var vm = new Vue({
  30.         el: '#box',
  31.         data: {
  32.             datalist: [],
  33.         },
  34.         methods:{
  35.             changePath(url){
  36.                 return url.replace('w.h','128.180')
  37.             }
  38.         },
  39.         mounted() {
  40.             //http://p0.meituan.net/w.h/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg
  41.             //http://p0.meituan.net/128.180/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg
  42.             axios.get("./json/test.json").then(res => {
  43.                 console.log(res.data.coming) // axios 自动包装data属性 res.data
  44.                 this.datalist = res.data.coming
  45.             }).catch(err => {
  46.                 console.log(err);
  47.             })
  48.         },
  50.     })
  51. </script>
  52. </html>