vue的练习

最新推荐文章于 2024-08-25 09:57:22 发布

九九七七

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量102

点赞数

文章标签： vue.js javascript html jquery

本文链接：https://blog.csdn.net/qq_54455551/article/details/125269945

版权

该博客介绍了如何将一个使用jQuery实现的背景滚动效果转换为Vue.js实现。通过对比jQuery和Vue的代码，展示了Vue的响应式特性和组件化思想在实现相同效果时的优势。同时，提供了完整的Vue代码示例，帮助读者理解Vue的用法。

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

按jquery效果，使用vue复刻出来

jquery：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        body {
          position: relative;
          width: 100%;
          background: url("images/0.jpg");
          background-attachment: fixed;
          background-position: -50px 0;
          background-size: 120% 100%;
        }
    
        ul,
        ol,
        li {
          list-style: none;
        }
    
        .web {
          position: fixed;
          top: -127px;
          left: 0;
          width: 100%;
          height: 127px;
          line-height: 127px;
          text-align: center;
          /* border: 1px solid #ddd; */
          background: rgba(255, 255, 255, .86);
          transition: all 1s ease;
        }
    
        .web ul {
          width: 928px;
          overflow: hidden;
          display: inline-block;
          vertical-align: middle;
        }
    
        .web ul li {
          position: relative;
          width: 138px;
          height: 76px;
          float: left;
          margin-right: 20px;
        }
    
        .web ul li:last-child {
          margin-right: 0;
        }
    
        .web ul li img {
          width: 138px;
          height: 76px;
        }
    
        .tips {
          width: 30px;
          height: 30px;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          background: url("images/tips.png") -94px -4px;
        }
    
        .button {
          width: 36px;
          height: 56px;
          position: absolute;
          top: 0;
          left: 20px;
          background: url("images/button.png");
          z-index: 10;
        }
      </style>
    </head>
    <body>
      <div class="button" id="toggle"></div>
      <div class="web" id="web">
        <ul id="nav-list">
          <li>
            <!-- <span class="tips"></span> -->
            <img src="images/0.jpg" />
          </li>
          <li><img src="images/1.jpg" />
          </li>
          <li><img src="images/2.jpg" /></li>
          <li><img src="images/3.jpg" /></li>
          <li><img src="images/4.jpg" /></li>
          <li><img src="images/5.jpg" /></li>
        </ul>
      </div>
      <!-- 1. 引入jquery库 -->
      <script src="./libs/jquery.js"></script>
      <script>
        // 等待页面的 DOM 加载完毕之后再执行
        $(function () {
          // console.log(1)
          // 创建一个DOM元素   
          var tips = '<span class="tips"></span>'
    
          var lis = $('#nav-list li')
          var count = 0
          var flag = true
          // console.log(lis)
          // 给所有的li 添加一个 tips  并隐藏
          lis.append(tips).find('.tips').hide()
          // 找到第一个元素并显示
          lis.eq(0).find('.tips').show()
          // 事件触发  
          // 事件源.事件的类型(事件的处理函数)
          lis.click(function () {
            // $(this) 表示点击的当前元素
            // console.log($(this).index())
            // lis.eq()
            // 保存当前点击的下标   
            var index = $(this).index()
            count = index
            // console.log(lis.eq(index).find('.tips').show().parent())
            // 点击具体的元素 然后添加 tips 并查找兄弟元素 带有tips的 都隐藏  
            lis.eq(index).append(tips).siblings().find('.tips').remove();
            show(index)
          })
          function show(index) {
            $('body').css({
              'background-image': 'url(./images/' + index + '.jpg)'
            })
          }
          // 鼠标悬浮的时候 
          lis.mouseover(function () {
            var index = $(this).index()
            show(index)
          })
          // 鼠标离开的时候  
          lis.mouseout(function () {
            show(count)
          })
          $('#toggle').click(function () {
            $('#web').css({
              top: getTop()
            })
            flag = !flag
          })
          function getTop() {
            return flag ? '0' : '-127px'
          }
        })
      </script>
    </body>
    </html>

效果：

vue：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
            width: 100%;
            background-image: url("images/0.jpg");
            background-attachment: fixed;
            background-position: -50px 0;
            background-size: 120% 100%;
        }

        ul,
        ol,
        li {
            list-style: none;   
        }

        .web {
            position: fixed;
            top: -127px;
            left: 0;
            width: 100%;
            height: 127px;
            line-height: 127px;
            text-align: center;
            /* border: 1px solid #ddd; */
            background: rgba(255, 255, 255, .86);
            transition: all 1s ease;
        }

        .web ul {
            width: 928px;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
        }

        .web ul li {
            position: relative;
            width: 138px;
            height: 76px;
            float: left;
            margin-right: 20px;
        }

        .web ul li:last-child {
            margin-right: 0;
        }

        .web ul li img {
            width: 138px;
            height: 76px;
        }

        .tips {
            width: 30px;
            height: 30px;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            background: url("images/tips.png") -94px -4px;
        }

        .button {
            width: 36px;
            height: 56px;
            position: absolute;
            top: 0;
            left: 20px;
            background: url("images/button.png");
            z-index: 10;
        }
    </style>
</head>
<body>
    <!-- 小按钮点击显示tab栏 -->
    <div id="app">
        <div class="button" id="toggle" @click="changeTab()"></div>
        <div class="web" id="web">
            <ul @click="changeBg($event)" id="nav-list">
                <li v-for="(item,key) in obj":key = "key" @mouseover="show($event)" @mouseout="showOut($event)">
                    <img :src="item" alt="" :index="key">
                    <span class="tips" v-if="key==index?true:false"></span>
                </li>
            </ul>
        </div>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                // 开关
                flag:true,
                // 数据
                obj:{
                    li0:"./images/0.jpg",
                    li1:"./images/1.jpg",
                    li2:"./images/2.jpg",
                    li3:"./images/3.jpg",
                    li4:"./images/4.jpg",
                    li5:"./images/5.jpg",
                },
                index:"li0",//默认小√在第一张图片
                now:"./images/0.jpg"
            },
            methods: {
                changeTab(){
                    // 小按钮点击tab栏出现与隐藏
                    document.querySelector("#web").style.top = this.flag?"0":"-127px"
                    return this.flag = !this.flag
                },
                // 改变背景图片
                changeBg(e){
                    this.show(e)
                    this.now = e.path[0].src
                    this.index = e.path[0].getAttribute("index")
                },
                // 改变背景图片,但是不改变小√
                show(e){
                    document.querySelector("body").setAttribute("style",`background-image:url(${e.path[0].src})`)
                },
                // 切换背景图片为原来的
                showOut(e){
                    document.querySelector("body").setAttribute("style",`background-image:url(${this.now})`)
                }
            }
        })
    </script>
</body>
</html>

效果一样的不多展示了。ok看代码有注释的。