Vue基础学习 —— Day1练习

今早晚点睡喔

已于 2024-03-01 22:30:05 修改

阅读量486

点赞数 7

文章标签： vue 学习 javascript

于 2024-02-29 21:19:02 首次发布

本文链接：https://blog.csdn.net/Yyan7777/article/details/136380307

版权

本文介绍了四个基于Vue.js实现的前端交互示例，包括文字翻转、折叠面板切换、列表排序和增删操作，展示了Vue如何通过数据绑定和组件化降低DOM操作，提升开发效率。

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

1.翻转世界

目标: 点击按钮 - 把文字取反显示 - 再点击取反显示(回来了)

💡提示: 把字符串取反赋予回去

效果演示:

🤍总结: 记住方法特点, 多做需求, vue是数据变化视图自动更新, 减少操作DOM时间, 提高开发效率

代码：

<!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>
    body {
      background-color: #e6e9f6;
    }

    #app {
      width: 400px;
      margin: 20px auto;
      background-color: #d2dbf5;
      border: 4px solid blueviolet;
      border-radius: 1em;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
      padding: 1em 2em 2em;
    }

    #app h3 {
      text-align: center;
    }
    .container {
      padding: 0 1em;
    }

  </style>
</head>
<body>
  <div id="app">
    <h4>案例：翻转世界</h4>
      <div class="container">
        <h1>{{ word }}</h1>
        <button @click="rev(word)">点击逆转</button>
      </div>
      </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data:{
        word : 'Hello World!'
      },
      methods:{
        rev(word) {
            this.word = word.split('').reverse().join('')
        }
      }
    })
  </script>
</body>
</html>

2.折叠面板

目标: 点击展开或收起时，把内容区域显示或者隐藏

效果演示:

代码：

<body>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <button @click="display" v-show="isshow" class="btn">收起</button>
        <button @click="display" v-show="btnshow" class="btn">展开</button>
      </div>

      <div v-show="isshow" class="container" v-for="(item,index) in list" :key="item.id">
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isshow : true ,
        btnshow : false,
        list:[
          {id:1,name:'寒雨连江夜入吴,'},
          {id:2,name:'平明送客楚山孤。'},
          {id:3,name:'洛阳亲友如相问，'},
          {id:4,name:'一片冰心在玉壶。'}
        ]
      },
      methods: {
        display() {
          this.isshow = !this.isshow,
          this.btnshow = !this.btnshow
        }
      }
    })
  </script>

</body>

3.帅哥美女走一走

目标: 点击按钮, 改变3个li的顺序, 在头上的就到末尾.

💡提示: 操作数组里的顺序, v-for就会重新渲染li

效果演示:

代码：

<body>
  <div id="app">
    <h3>案例：走一走</h3>
      <div class="container">
        <ul>
            <li v-for="(item,index) in golist" :key="item.id">
              {{ item.name }}
            </li>
        </ul>
      </div>
      <button @click="togo">走一走</button>
      
      </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
  <script>
    const app = new Vue({
      el: '#app',
      data:{
        golist:[
          {id:1,name:'帅哥'},
          {id:2,name:'美女'},
          {id:3,name:'吗喽'}
        ]
      },
      methods:{
        togo() {
            this.golist.push(this.golist[0]),
            this.golist.shift();

        }
      }
    })
  </script>

</body>

4. 加加减减

目标: 点击生成按钮, 新增一个li(20以内的随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值

💡提示: 数组渲染列表, 生成和删除都围绕数组操作

效果演示:

代码：

<body>
  <div id="app">
    <h3>案例：加加减减</h3>
      <div class="container">
        <ul>
            <li v-for="(item,index) in list" :key="item">
              <span>{{ item }}</span>
              <button @click="del(index)">删除</button>
            </li>
        </ul>
      </div>
      <button @click="add">生成</button>
      
      </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
  <script>
    const app = new Vue({
      el: '#app',
      data:{
        list:[1,5,3]
      },
      methods:{
        add() {
            this.list.push(Math.floor(Math.random() * 20))
        },
        del(index) {
            this.list.splice(index, 1);
        }
      }
    })
  </script>

</body>

5. 购物车

目标: 完成商品浏览和删除功能, 当无数据给用户提示

需求1: 根据给的初始数据, 把购物车页面铺设出来

需求2: 点击对应删除按钮, 删除对应数据

需求3: 当数据没有了, 显示一条提示消息

效果演示:

代码：

<!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>
    #app {
      width: 600px;
      margin: 10px auto;
    }

    .tb {
      border-collapse: collapse;
      width: 100%;
    }

    .tb th {
      background-color: #153851;
      color: white;
    }

    .tb td,
    .tb th {
      padding: 5px;
      border: 1px solid black;
      text-align: center;
    }

    .add {
      padding: 5px;
      border: 1px solid black;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div id="app">
    <table class="tb">
      <tr>
        <th>编号</th>
        <th>品牌名称</th>
        <th>创立时间</th>
        <th>操作</th>
      </tr>
      <!-- 循环渲染的元素tr -->
      <tr v-for="(item,index) in list" :key="item.id">
        <td>{{ index+1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.time }}</td>
        <td>
          <button @click="remove(item.id)">删除</button>
          <!--不要用“delete”是关键字--> 
        </td>
      </tr>
      <tr>
        <td v-if="(list.length?0:1)"colspan="4">没有数据咯~</td>
      </tr>
    </table>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: "奔驰", time: "2020-08-01" },
          { id: 2, name: "宝马", time: "2020-08-02" },
          { id: 3, name: "奥迪", time: "2020-08-03" },
        ]
      },
      methods: {
        remove(id) {
            this.list = this.list.filter(item => item.id !== id)
            if(this.list.length < 0) {
                isshow = true;
            }
            else isshow = false
        }
      }
    })
  </script>

</body>

</html>