零基础学习vue-01-案例

最新推荐文章于 2024-04-20 07:19:52 发布

雾岛吹风

最新推荐文章于 2024-04-20 07:19:52 发布

阅读量2.5k

点赞数 10

文章标签： vue

本文链接：https://blog.csdn.net/m0_48862284/article/details/120461739

版权

1. 买水果

提示： v-model="变量" 输入框的值会绑定给vue的这个变量(别忘了在data里先声明哦)

<template>
  <div class="box">
    <table>
      <caption>欢迎光临_vue开发的收银系统_水果店</caption>
      <thead>
        <tr>
          <th>苹果{{price}}￥/ 斤数，折扣 {{discount}}</th>
          </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span>请输入你要购买的斤数</span>
            <input type="number" v-model="num">
          </td>
        </tr>
        <tr>
          <td>
            <button @click="btnFn">结账买单~</button>
          </td>
        </tr>
        <tr>
          <td>
            <span>结账单: 总价: {{total}}￥元</span> &nbsp;
            <span>折价后: {{newTotal}}￥元</span>  &nbsp;
            <span>省了: {{save}}￥元</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style>
table {
  width: 500px;
  height: 200px;
  border: 1px solid #000;
  margin: 50px auto;
  text-align: center;
}
th,
tr,
td {
  border: 1px solid #000;
  height: 50px;
}


</style>

<script>
export default {
  data() {
    return {
      price: 10,
      discount: '< 8折 >',
      total: 0,
      newTotal: 0,
      save: 0,
      num: 0
    }
  },
  methods: {
    btnFn() {
      this.total = this.num * this.price
      this.newTotal = this.total * 0.8
      this.save = this.total - this.newTotal
    }
  }

}
</script>

2. 请选择您的爱好

目标：用户选择栏目, 把用户选中的栏目信息在下面列表显示出来

数据：["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"]

提示：vue变量是数组类型, 绑定在checkbox标签上

<template>
  <div>
    <div>
      <p>{{ msg }}</p>
      <!-- 遍历写在父级身上，若写在子级身上会报错 -->
      <span v-for="(item,index) in arr" :key="index">
        <!-- 子级身上再进行取值 v-model实现双向绑定 
        v-model遇到复选框
          vue变量 非数组类型 关联复选框 checked属性（结果：true/false）
          vue变量 数组类型 关联复选框 value属性值（使用v-model获取表单的value值）
        -->
        <input type="checkbox" v-model="hobby" :value="item"/>{{item}}
        <!-- 取出的item放在data中的hobby空数组中; 插入表达式--{{vue变量}}进行填充 -->
      </span>
    </div>
    <div>
      <ul>
        <!-- 使用v-for变量hobby；插入表达式--{{vue变量}}进行填充 -->
        <li v-for="(item,index) in hobby" :key="index">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "请选择喜欢化的专栏",
      hobby: [],
      arr: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"]
    };
  },
};
</script>

<style>
</style>

3. 购物车

目标

完成商品浏览和删除功能, 当无数据给用户提示
需求如下:

需求1: 根据给的初始数据, 把购物车页面铺设出来
需求2: 点击对应删除按钮, 删除对应数据
需求3: 当数据没有了, 显示一条提示消息

<template>
  <div id="app">
    <table class="tb">
      <tr>
        <th>编号</th>
        <th>品牌名称</th>
        <th>创立时间</th>
        <th>操作</th>
      </tr>
      <!-- 循环渲染的元素tr -->
      <!-- 为了防止报错：带上 :key="index" -->
      <tr v-for="(obj,index) in list" :key="index">
        <!-- 对象.属性 可以访问到对应的属性值 -->
        <!-- v-for遍历：
          每次遍历数组里每个值，创建一次当前所在标签结构
          每次遍历执行时，都是独立执行的 -->
        <td>{{obj.id}}</td>
        <td>{{obj.name}}</td>
        <td>{{obj.time}}</td>
        <td>
          <!-- 
          给标签绑定事件：
            无值：@事件名="methods中的函数"
            传值：@事件名="methods中的函数(实参)" -->
          <button @click='btnFn(index)'>删除</button>
        </td>
      </tr>
      <!-- v-if="vue变量或表达式"，""中的判断结果为true或false，为true显示，为false隐藏 -->
      <tr v-if="list.length === 0">
        <td colspan="4">没有数据咯~</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // isShow: false,
      list: [
        { id: 1, name: "奔驰", time: "2020-08-01" },
        { id: 2, name: "宝马", time: "2020-08-02" },
        { id: 3, name: "奥迪", time: "2020-08-03" },
      ],
    };
  },
  methods: {
    // 带上形参
    btnFn(num) {
      // 数组删除指定索引位置上的数组元素：数组.splice(索引下标,删除个数)
      this.list.splice(num,1)
    }
  }
};
</script>

<style>
#app {
  width: 600px;
  margin: 10px auto;
}

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

.tb th {
  background-color: #0094ff;
  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>

4. 点名系统

目标：点击开始, 随机显示名字, 点结束暂停

<template>
  <div>
    <h2>随机点名</h2>
    <div class="box">
      <span>名字是：</span>
      <div class="qs">{{msg}}</div>
    </div>
    <div class="btns">
      <button class="start" @click="startFn">开始</button>
      <button class="end" @click="endFn">结束</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '这里显示名字',
      arr: ["黄忠","马超","张飞","超云","关羽",'云揽星河'],
      timer: null
    }
  },
  methods: {
    // data中的变量，都得使用this.进行调用data中的数据最终挂载在this对象身上
    startFn() {
      // 先清除定时器，否则点击开始按钮后，再点击结束按钮不会马上结束
      clearInterval(this.timer)
      this.timer=setInterval(()=> {
        let index = Math.floor(Math.random() * this.arr.length)
        // 将随机获取的名字赋值给 data中 msg变量
        this.msg = this.arr[index]
      },200)
    },
    endFn() {
      // 清除定时器
      clearInterval(this.timer)
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

h2 {
  text-align: center;
}

.box {
  width: 600px;
  margin: 50px auto;
  display: flex;
  font-size: 25px;
  line-height: 40px;
}

.qs {
  width: 450px;
  height: 40px;
  color: red;
}

.btns {
  text-align: center;
}

.btns button {
  width: 120px;
  height: 35px;
  margin: 0 50px;
}
</style>

5. 协议倒计时

目标：打开网页, 做一个协议倒计时的效果

<template>
  <div>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br />
    <!-- 属性不给值, 默认就是true值 -->
    <!-- :属性名="vue变量"--给dom标签的属性设置vue变量 -->
    <button class="btn" :disabled="status" @click="btnFn">我已经阅读用户协议({{count}})</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: false,
      count: 60,
      timer: null
    }
  },
  methods: {
    btnFn() {
      this.status = true
      this.timer = setInterval(() => {
        this.count--
        // 若倒计时显示为0
        if(this.count === 0) {
          // 清除定时器
          clearInterval(this.timer)
          // 设置初始状态
          this.status = false
          // 回到初始值
          this.count = 60
        }
      },1000)  // 隔一秒倒计时进行自减
    }
  }
};
</script>

6. 随机数生成和删除

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

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

<template>
  <div id="app">
    <ul>
      <li v-for="(item,index) in arr" :key="index">
        <span>{{item}}</span>
        <!-- 给按钮标签添加点击事件，并传入实参 -->
        <button @click="delFn(index)">删除</button>
      </li>
    </ul>
    <button @click="btnFn">生成</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [],
    };
  },
  methods: {
    btnFn() {
      // 生成0~50之内的随机数
      let num = Math.floor(Math.random() * 50)
      // 将随机生成的随机数追加到arr数组中
      this.arr.push(num)
    },
    // 形参
     delFn(a){
     this.arr.splice(a,1)
   }
  },
  
}
</script>

7. 点击"走一走"按钮换位置

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

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

<template>
  <div id="app">
    <!-- 使用v-for变量myArr数组，每次遍历数组里每个值，创建一次当前所在标签结构 -->
    <ul v-for="(item,index) in myArr" :key="index">
      <!-- {{}}--每遍历一次，使用插值表达式进行数据填充-->
      <li>{{item}}</li>
    </ul>
    <button @click="btnFn">走一走</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myArr: ["帅哥", "美女", "程序猿"],
    };
  },
  methods: {
    btnFn() {
      let a = this.myArr[0]
      this.myArr.splice(0,1)
      this.myArr.push(a)
    }
  }
}
</script>

8. 点击切换笑话

<template>
  <div>
    <p>{{ word }}</p>
    <button @click="btnFn">点击说笑话</button>
  </div>
</template>

<script>
// 需求: 点击切换随机笑话
// 1. 准备标签和变量
// 2. 绑定点击事件
// 3. 点击产生随机数, 换出对应笑话, 设置给word变量影响页面

// 注意: jokeArr拼写
// data里变量, 都得用this.来调用
export default {
  data(){
    return {
      word: '这是一个笑话',
      jokeArr: ['最近感觉记忆力下降得厉害', '于是就找了一个记事本','把每天重要的事情都记下来' , '可是今天早上起来, 差不多把床都拆了', '愣是没找到记事本.....']
    }
  },
  methods: {
    btnFn(){
      let num = Math.floor(Math.random() * this.jokeArr.length)
      this.word = this.jokeArr[num]
    }
  }
}
</script>

<style>

</style>

9. 翻转"世界"

提示：
字符串 -> 数组：.split()
数组 -> 字符串：.join()

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="btnFn">逆转世界</button>
  </div>
</template>

<script>
// 目标: 点击翻转地球
// 1. 准备标签和变量初始值
// 2. 绑定点击事件
export default {
  data(){
    return {
      message: "Hello, World"
    }
  },
  methods: {
    btnFn(){
      // 3. 转成数组
      let arr = this.message.split("") // ["H", "e", "l", "l", ...]
      // 4. 数组翻转元素
      arr.reverse() // ["d", "l", "r", "o", "W", ...]
      // 5. 数组转回字符串
      this.message = arr.join("")

      // this.message = this.message.split("").reverse().join('')
    }
  }
}
</script>

<style>

</style>

10. 折叠面板

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

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <!-- // 3. span绑定-点击事件 -->
        <span class="btn" @click="btnFn">
          收起
        </span>
      </div>
      <!-- // 4. 控制下面v-show显示 -->
      <div class="container" v-show="isShow">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>
</template>

<script>
// 目标: 折叠面板
// 1. 准备标签+样式(less)
// 2. 下载less和less-loader(注意版本号)
// yarn add less@3.0.4 less-loader@5.0.0 -D
// 注意: webpack在使用时, 版本一定要对应, 否则一个新的一个旧的(旧的里面没有另外一个新的包方法就报错)
// 脚手架用的是webpack4.x版本 -> less-loader8.0以下的版本
// 昨天webpack5.x -> 最新的less-loader8和8以上的版本
export default {
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    btnFn(){
      // 5. 把变量值改变, 影响v-show的效果
      if (this.isShow === true) {
        this.isShow = false;
      } else if (this.isShow === false) {
        this.isShow = true;
      }
      // this.isShow = !this.isShow;
    }
  }
}
</script>


<style lang="less">
// 这里的样式代码, 都是less语法的
// webpack内置了less的配置-(less-loader配置好了，只配置未下载)
// 但是: webpack没给你下less和less-loader2个包
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
  }
}
</style>