Vue 04Day Knowledge Point

一.组件进阶

一.ref 和 $refs

作用：利用 ref 和 $refs 可以用于 获取 dom 元素, 或者组件实例

1.获取原生DOM标签

添加ref属性，获取目标标签

Vue-Day 04 - 图1

Vue-Day 04 - 图2

2.通过ref属性获取组件对象

通过 this.$refs 获取组件对象, 可调用组件对象里方法等

Vue-Day 04 - 图3

二.$nextTick

1.$nextTick的学习

需求：点击改data的数据, 获取原生DOM内容

1.创建标签显示数据

  1. <p ref = "a">数字:{{count}}</p>
  2. <button @click="btn">点击加一</button>

2.点击+1, 马上获取原生DOM内容

  1. methods: {
  2.    btn(){
  3.    this.count++;
  4.    console.log(this.$refs.a.innerHTML);
  5.    }
  6. }

$nextTick：等DOM更新后, 才会触发执行此方法里的函数体

Vue-Day 04 - 图4

data改变，更新DOM是异步的，我们可以运用this.$nextTick里的函数体获取到更新后的DOM

2.$nextTick小案例

需求：点击按钮自身隐藏, 出现输入框并马上处于激活状态

注意: 一定要用v-if来写 (保证DOM异步更新前获取不到输入框, 可以体现$nextTick的价值)

  1. <template>
  2. <!-- 准备好input 和 按钮  -->
  3. <!-- 按钮点击 会显示 input （点击按钮消失，显示input，并显示focus焦点） -->
  4. <!-- 给按钮绑定一个点击事件 @click = "searchFn" 然后在methods中 调用事件函数
  5. 因为input 是进行隐藏 我们使用v-if  按钮则运用v-else 进行一个切换
  6. 在点击事件函数中 进行v-if="show" 的取反 单点击按钮 按钮隐藏 input框显示
  7.  -->
  8.  <!-- 获取焦点，就要找dom 给input 添加一个ref 获取dom中的focus
  9.      this.$refs.inp.focus()
  10.      因为他是异步 所以需要用
  11.       this.$nextTick(()=>{
  12.        console.log(this.$refs.inp.focus());
  13.       });
  14.   -->
  15.  <div>
  16.    <input type="text" placeholder="输入搜索的关键字" v-if="show" ref="inp" />
  17.   <button v-else @click="searchFn">点击搜索</button>
  18.  </div>
  19. </template>
  21. <script>
  22. export default {
  23.   data(){
  24.     return{
  25.       show:false,
  26.     }
  27.   },
  28.   methods:{
  29.     searchFn(){
  30.       this.show = !this.show;
  31.       this.$nextTick(()=>{
  32.        console.log(this.$refs.inp.focus());
  33.       // console.log(this.$refs.inp);
  34.       });
  35.     }
  36.   }
  37. }
  38. </script>
  40. <style>
  41. </style>

三.dynamic 动态组件

1.基本概念

动态组件：可以改变的组件

动态组件可以解决多组件同一个位置，切换显示的需求

基本语法：

1.compontent 组件(位置) + is属性(哪个组件)

Vue-Day 04 - 图5

2.修改is属性绑定的值 => 切换组件

3.动态组件切换的时候会销毁

4.可以缓存 keep-alive

2.动态组件点击切换小案例

Vue-Day 04 - 图6

当点击指定的按钮就会切换相应内容

  1. <template>
  2.   <div>
  3.     <button @click="name = 'little-cat'">小猫</button>
  4.     <button @click="name = 'little-dog'">小狗</button>
  5.     <button @click="name = 'little-pig'">小猪</button>
  7.     <component :is="name"/>
  8.   </div>
  9. </template>
  11. <script>
  12. import Cat from './components/little-cat.vue';
  13. import Dog from './components/little-dog.vue';
  14. import Pig from './components/little-pig.vue';
  16. export default {
  17.   data(){
  18.     return{
  19.       name:'little-cat'
  20.     }
  21.   },
  22.   components:{
  23.     'little-cat':Cat,
  24.     'little-dog':Dog,
  25.     'little-pig':Pig,
  26.   }
  27. }
  28. </script>
  30. <style>
  31. </style>

三个子组件都是按照以下代码操作(代码一样，只放一份)

  1. <template>
  2. //将小猫改成其他名称 分别放入对于的子组件即可
  3. <div><h1>小猫</h1></div>
  4. </template>
  6. <script>
  7. export default {}
  8. </script>
  9. <style>
  10. </style>

二.自定义指令

1.自定义指令

自定义指令即自己定义的指令，封装dom操作，扩展额外功能

有局部注册 和 全部注册

需求：当页面加载时，让元素将获得焦点

Vue-Day 04 - 图7

局部注册

  1. <template>
  2. <!-- 当我们需要封装dom 扩展额外功能的时候我们就使用自定义指令 -->
  3. <div>
  4.     <h1 v-color v-backgroundColor v-bold>你好</h1>
  5. </div>
  7. </template>
  8. <script>
  9. export default {
  10.   // 局部注册
  11.     directives:{
  12.         "color":{
  13.             inserted(dom){
  14.                 dom.style.color = 'red';
  15.             }
  16.         },
  17.         "backgroundColor":{
  18.           inserted(dom){
  19.             dom.style.backgroundColor = 'yellow';
  20.           }
  21.         }
  22.     }
  23. }
  24. </script>
  26. <style>
  27. </style>

全局注册

  1. // 全局注册
  2. // Vue.component("组件标签名"，组件对象);
  3. // 全局注册 ——自定义属性
  4. Vue.directive("bold",{
  5.   "inserted"(dom){
  6.     dom.style.fontWeight = 'bold';
  7.   }
  8. })

2.自定义指令的值

语法：在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值

通过 binding.value 可以拿到指令值，指令值修改会触发 update

  1. <template>
  2. <!-- 当我们需要封装dom 扩展额外功能的时候我们就使用自定义指令 -->
  3. <div>
  4.   <!-- 给指定添加颜色 可以 但是不能直接添加 要在数据中传递颜色 然后binding  binding.value-->
  5.     <h1 v-color='red'  v-bold>你好</h1>
  6.     <h1 v-color='yellow'  v-bold>你好</h1>
  7.     <h1 v-color='blue'  v-bold>你好</h1>
  9. <!-- 直接在点击事件赋值是不可以的  需要更新它 -->
  10.     <button @click="red = 'black'">把红色变成黑色</button>
  11. </div>
  12. </template>
  14. <script>
  15. export default {
  16.   data(){
  17.     return{
  18.       red:'red',
  19.       yellow:'yellow',
  20.       blue:'blue',
  21.     }
  22.   },
  23.   // 局部注册
  24.     directives:{
  25.         "color":{
  26.             inserted(dom,binding){
  27.               console.log("指令参数",binding);
  28.                 dom.style.color = 'red';
  29.                 //  这里的dom就是我们指令所在的标签的dom  修改dom颜色
  30.                 dom.style.color = binding.value;
  31.             },
  32.             // update 会在指令的值v-指令 = "变量" 变量变化时候触发
  33.             update(dom,binding){
  34.               dom.style.color = binding.value;
  35.             }
  36.         },
  37.         "backgroundColor":{
  38.           inserted(dom){
  39.             dom.style.backgroundColor = 'yellow';
  40.           }
  41.         }
  42.     }
  43. }
  44. </script>
  46. <style>
  47. </style>

三.插槽

Vue-Day 04 - 图8

1.默认插槽

插槽：组件内部分内容允许外部传入

组件的内容部分，不希望写死，希望能使用的时候自定义，使用插槽。

Vue-Day 04 - 图9

  1. <template>
  2. <div class="container">
  3.   <category-category title="美食" :list="foods">
  4.     <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
  5.   </category-category>
  7.   <category-category title="游戏" :list="games">
  8.      <ul> 
  9.         <li v-for="(g,index) in games" :key="index">{{g}}</li>
  10.     </ul>
  11.   </category-category>
  13.   <category-category title="电影" :list="films">
  14.     <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
  15.   </category-category>
  17. </div>
  18. </template>
  20. <script>
  21. import category from './components/category.-cate.vue'
  22. export default {
  23.   components:{
  24.     'category-category':category
  25.   },
  26.   data(){
  27.     return{
  28.       foods:['火锅','烧烤','汉堡','牛排'],
  29.       games:['lol','穿越火线','QQ飞车','红色警戒'],
  30.       films:['《蜡笔小新》','《名侦探柯南》','《赌侠》','《赌圣》']
  31.     }
  32.   }
  34. }
  35. </script>
  37. <style scoped>
  38. .container{
  39.   display: flex;
  40.   justify-content: space-around;
  41. }
  42. img{
  43.   width: 100%;
  44. }
  45. video{
  46.   width: 100%;
  47. }
  48. </style>
  1. <template>
  2.   <div class="category">
  3.     <h3>{{title}}分类</h3>
  4.     <!-- 定义个插槽 (挖个坑 等着组件的使用者进行填充) -->
  5.     <slot>默认值，当使用者没有传递具体结构，我就出现</slot>
  6.     <!-- <ul> 
  7.         <li v-for="(item,index) in list" :key="index">{{item}}</li>
  8.     </ul> -->
  9.    <!--  http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->
  10.   </div>
  11. </template>
  13. <script>
  15. export default {
  16.     // props:['list','title']
  17.     props:['title']
  18. }
  19. </script>
  21. <style>
  22. .category{
  23.     background-color: skyblue;
  24.     width: 200px;
  25.     height: 300px;
  26. }
  27. h3{
  28.   text-align: center;
  29.   background-color: orange;
  30. }
  31. </style>

2.具名插槽

Vue-Day 04 - 图10

  1. <template>
  2. <div class="container">
  3.   <category-category title="美食" :list="foods">
  4.     <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
  5.     <a slot="footer" href="http://baidu.com">更多美食</a>
  6.   </category-category>
  8.   <category-category title="游戏" :list="games">
  9.      <ul slot="center"> 
  10.         <li v-for="(g,index) in games" :key="index">{{g}}</li>
  11.     </ul>
  12.        <div class="foot" slot="footer"> 
  13.         <a href="http://baidu.com">单机游戏</a>
  14.         <a href="http://baidu.com">网络游戏</a>
  15.     </div>
  16.   </category-category>
  18.   <category-category title="电影" :list="films">
  19.     <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
  20.   <!-- <template slot="footer"> -->
  21.     <template v-slot:footer>
  22.      <div class="foot">
  23.     <a href="http://baidu.com">经典</a>
  24.     <a href="http://baidu.com">热门</a>
  25.     <a href="http://baidu.com">推荐</a>
  26.   </div>
  27.   <h4>欢迎前来观看</h4>
  28.   </template>
  29.   </category-category>
  31. </div>
  32. </template>
  34. <script>
  35. import category from './components/category.-cate.vue'
  36. export default {
  37.   components:{
  38.     'category-category':category
  39.   },
  40.   data(){
  41.     return{
  42.       foods:['火锅','烧烤','汉堡','牛排'],
  43.       games:['lol','穿越火线','QQ飞车','红色警戒'],
  44.       films:['《蜡笔小新》','《名侦探柯南》','《赌侠》','《赌圣》']
  45.     }
  46.   }
  47. }
  48. </script>
  50. <style scoped>
  51. .container,.foot{
  52.   display: flex;
  53.   justify-content: space-around;
  54. }
  55. img{
  56.   width: 100%;
  57. }
  58. video{
  59.   width: 100%;
  60. }
  61. h4{
  62.   text-align: center;
  63. }
  64. </style>
  1. <template>
  2.   <div class="category">
  3.     <h3>{{title}}分类</h3>
  4.     <!-- 定义个插槽 (挖个坑 等着组件的使用者进行填充) -->
  5.     <slot name="center">默认值，当使用者没有传递具体结构，我就出现1</slot>
  6.     <slot name="footer">默认值，当使用者没有传递具体结构，我就出现2</slot>
  7.     <!-- <ul> 
  8.         <li v-for="(item,index) in list" :key="index">{{item}}</li>
  9.     </ul> -->
  10.    <!--  http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->
  11.   </div>
  12. </template>
  14. <script>
  15. export default {
  16.     // props:['list','title']
  17.     props:['title']
  18. }
  19. </script>
  21. <style>
  22. .category{
  23.     background-color: skyblue;
  24.     width: 200px;
  25.     height: 300px;
  26. }
  27. h3{
  28.   text-align: center;
  29.   background-color: orange;
  30. }
  31. </style>

3.作用域插槽

Vue-Day 04 - 图11

  1. <template>
  2. <div class="container">
  3.   <category-category title="游戏" >
  4.     <template scope="obj">
  5.       <ul> 
  6.         <li v-for="(g,index) in obj.games" :key="index">{{g}}</li>
  7.       </ul>
  8.     </template>
  9.   </category-category>
  11.   <category-category title="游戏" >
  12.      <template scope="obj">
  13.       <ol> 
  14.         <li style="color:red"  v-for="(g,index) in obj.games" :key="index">{{g}}</li>
  15.       </ol>
  16.      </template>
  17.   </category-category>
  19.   <category-category title="游戏">
  20.     <template scope="obj">
  21.         <h4 v-for="(g,index) in obj.games" :key="index">{{g}}</h4>
  22.     </template>
  23.   </category-category>
  24. </div>
  25. </template>
  27. <script>
  28. import category from './components/category.-cate.vue'
  29. export default {
  30.   components:{
  31.     'category-category':category
  32.   },
  33. }
  34. </script>
  36. <style scoped>
  37. .container,.foot{
  38.   display: flex;
  39.   justify-content: space-around;
  40. }
  41. img{
  42.   width: 100%;
  43. }
  44. video{
  45.   width: 100%;
  46. }
  47. h4{
  48.   text-align: center;
  49. }
  50. </style>
  1. <template>
  2.   <div class="category">
  3.     <h3>{{title}}分类</h3>
  4.     <!-- <slot >默认值，当使用者没有传递具体结构，我就出现1</slot> -->
  5.     <slot :games="games">我是默认的一些内容</slot>
  6.   </div>
  7. </template>
  9. <script>
  11. export default {
  12.     props:['title'],
  13.      data(){
  14.     return{
  15.       games:['lol','穿越火线','QQ飞车','红色警戒'],
  16.     }
  17.   }  
  18. }
  19. </script>
  21. <style>
  22. .category{
  23.     background-color: skyblue;
  24.     width: 200px;
  25.     height: 300px;
  26. }
  27. h3{
  28.   text-align: center;
  29.   background-color: orange;
  30. }
  31. </style>

4.插槽传参

匿名插槽传参

  1. <template>
  2. <div>
  3.   <niming-slot v-slot="obj">
  4.     <img :src="obj.zidingyi.url" alt="">
  5.     <h1>{{obj.zidingyi.name}}</h1>
  6.     <h1>{{obj.zidingyi.age}}</h1>
  7.   </niming-slot>
  8. </div>
  9. </template>
  11. <script>
  12. import NingMing from "./components/niming-slot.vue";
  13. export default {
  14.   components:{
  15.     "niming-slot":NingMing,
  16.   }
  17. }
  18. </script>
  19. <style>
  20. </style>
  1. <template>
  2.  <div>
  3.      <slot :zidingyi="user"></slot>
  4.  </div>
  5. </template>
  7. <script>
  8. export default {
  9.     data(){
  10.         return{
  11.             user:{
  12.                 name:'小明',
  13.                 age:18,     url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F041620104229%2F200416104229-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659665716&t=a7f983f36e9540d91b49a362a93540f3",
  14.             }
  15.         }
  16.     }
  17. }
  18. </script>
  20. <style>
  21. </style>

具名插槽传参（需要多个插槽）

  1. <template>
  2. <div>
  3.   <personal-info>
  4.   <template #header="obj">
  5.     <h1>{{obj.headerheader}}</h1>
  6.   </template>
  8.     <template #tbody="obj">
  9.     <h1>{{obj.tbodytbody}}</h1>
  10.     </template>
  12.     <template #footer="obj">
  13.       <img :src="obj.tupian" alt="">
  14.     </template>
  15.   </personal-info>
  16. </div>
  17. </template>
  19. <script>
  20. import PersonnalInfo from "./components/personal-info.vue"
  21. export default {
  22.  components:{
  23.   "personal-info":PersonnalInfo,
  24.  }
  25. }
  26. </script>
  28. <style>
  29. </style>
  1. <template>
  2. <div>
  3.     <slot name="header" :headerheader="user.name"></slot>
  4.     <slot name="tbody" :tbodytbody="user.age"></slot>
  5.     <slot name="footer" :tupian="user.url"></slot>
  6. </div>
  8. </template>
  10. <script>
  11. export default {
  12.     data(){
  13.         return{
  14.             user:{
  15.                 name:'小明',
  16.                 age:18,
  17.                 url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F041620104229%2F200416104229-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659665716&t=a7f983f36e9540d91b49a362a93540f3",
  18.             }
  19.         }
  20.     }
  21. }
  22. </script>
  24. <style>
  25. </style>