vue实践动态轮播图组件

最新推荐文章于 2023-10-04 17:09:17 发布

公子清

最新推荐文章于 2023-10-04 17:09:17 发布

阅读量594

点赞数

分类专栏：实践真题系列 Vue系列 js系列文章标签： vue实践动态轮播图组件轮播图组件

本文链接：https://blog.csdn.net/Josiah_Yuan/article/details/107119774

版权

vue实践动态轮播图组件数据更改【=>dom diff -> 把虚拟dom传化为真实的dom ->$nextTick(在回调函数后真实) -> 告知浏览器绘制】分割成3个件,BannerButton,BannerPagination,BannerPlugin注意：组件命名采用驼峰式写法解析关键词作用：template：每一个组件都有一个template，没有template也必须有rand，最起码要指定出我们的视图来data>return : 视图有了，就有数据，

摘要由CSDN通过智能技术生成

vue实践动态轮播图组件

数据更改【=>dom diff -> 把虚拟dom传化为真实的dom ->$nextTick(在回调函数后真实) -> 告知浏览器绘制】

分割成3个件,BannerButton,BannerPagination,BannerPlugin

注意：组件命名采用驼峰式写法

解析关键词作用：template：每一个组件都有一个template，没有template也必须有rand，最起码要指定出我们的视图来

data>return : 视图有了，就有数据，为了防止组件之间的数据冲突，把data用闭包包起来，

template:`
:每一个组件只能有一个根节点，加上div,将button里面的内容加进来

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/banner.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
    <!-- 数据更改【=>dom diff -> 把虚拟dom传化为真实的dom ->$nextTick(在回调函数后真实) -> 告知浏览器绘制】 -->
    <!-- 将div中的代码分割成3个组件：
        <section class="container">
           <div class="wrapper">
               <div class="slide">
                   <img src="./images/banner01.jpg" alt=""> 
               </div>
               <div class="slide">
                <img src="./images/banner02.jpg" alt=""> 
               </div>
               <div class="slide">
                <img src="./images/banner03.jpg" alt=""> 
               </div>
           </div>
           <div class="pagination">
               <span class="active"></span>
               <span></span>
               <span></span>
           </div>
           <a href="javascript:;" class="button-prev"></a>
           <a href="javascript:;" class="button-net"></a>
       </section> -->
    <!-- //调取通过属性传递,调取什么就传什么：init是初始值第一张，interval传递的时候-->

    <div id="app">
        <banner-plugin v-if='bannerData' :data='bannerData' :interval='2000' :transitionend='transitionend' :speed='500'
            :pagination='false'></banner-plugin>
        <p>切换到<span v-text='temp'></span>张了
        </p>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src=

最低0.47元/天解锁文章

公子清

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实践动态轮播图组件

vue实践动态轮播图组件数据更改【=>dom diff -> 把虚拟dom传化为真实的dom ->$nextTick(在回调函数后真实) -> 告知浏览器绘制】分割成3个件,BannerButton,BannerPagination,BannerPlugin注意：组件命名采用驼峰式写法解析关键词作用：template：每一个组件都有一个template，没有template也必须有rand，最起码要指定出我们的视图来data>return : 视图有了，就有数据，
复制链接

扫一扫