vue.js案例 vue实战案例

转载

mob64ca1402d47a 2023-08-13 13:30:08

文章标签 vue.js案例前端Vue html Vue css 文章分类 Vue.js 前端开发

Vue基础5个实用案例

前言

本章节怼几个案例供读者小伙伴们练习，写不出东西就是写的少，多写就有思路，案例也懒得去搞CSS了，大家主要锤Vue就可以了。不废话直接上货！

vue.js案例 vue实战案例_css

案例1：选择登陆方式

vue.js案例 vue实战案例_vue.js案例_02

需求

点击页面按钮可以选择使用邮箱登录或用户账号登录

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <span v-if="isTrue">
        <label for="username">用户账号</label>
        <input id="username"  placeholder="用户账号" />
      </span>
      <span v-else>
        <label for="email">用户邮箱</label>
        <input id="email"  placeholder="用户邮箱" />
      </span>
      <button type="button" @click="isTrue = !isTrue">点击切换</button>
    </div>
  </body>
  <script type="text/javascript">
    const app = new Vue({
      el: "#app",
      data:{
        isTrue: true
      }
    })
</script>
</html>

运行结果

vue.js案例 vue实战案例_html_03

小问题

我们在输入框中输入数据之后，切换到邮箱选项中，发现输入的用户名还在
因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不会重新创建元素
也就是它复用了input标签，并没有重新创建一个新的标签
我们可以给input标签添加key属性解决，如果key属性值不同则不会复用

<input id="username"  placeholder="用户账号" key="username"/>
<input id="email"  placeholder="用户邮箱" key="email"/>

如上，我们在input标签中添加key属性，值分别为username和email就可以解决，图就不放了！

vue.js案例 vue实战案例_css

案例2：发表评论

vue.js案例 vue实战案例_vue.js案例_02

需求

提供一个输入框，点击发表情评论按钮，评论显示在评论区

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title></title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="com"/>
      <button type="button" @click="sub">发表评论</button>
      <div id="com-content">
        <p v-for="msg in msgs">{{ msg }}</p>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    var app = new Vue({
      el:"#app",
      data:{
        com:"",
        msgs:[]
      },
      methods:{
        sub:function(){
          this.msgs.push(this.com);
          this.com = "";
        }
      }
    })
</script>
</html>

效果

vue.js案例 vue实战案例_Vue_06

步骤

使用v-model与data中com变量绑定
点击按钮之后触发sub函数
在函数中将com数据push追加到msgs数组中
使用v-for循环创建p标签展示msgs数组中数据

vue.js案例 vue实战案例_css

案例3：列表选中样式

vue.js案例 vue实战案例_vue.js案例_02

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
      /* 定义样式 */
      .active {
        color: skyblue;
      }
</style>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- 
         1、使用v-for遍历数组生成多个li列表
         2、同时获取数据和索引
         3、使用@click绑定函数传入当前li的索引
         4、在函数中将当前索引值赋值给currentIndex变量
         5、使用:class添加样式
         -->
        <li v-for="(item,index) in movies" @click="liClick(index)" :class="{active:currentIndex == index}">{{item}}</li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
    const app = new Vue({
      el: "#app",
      data: {
        movies:["悬崖之上","熊出没","迪迦","指环王"],
        currentIndex: 0
      },
      methods:{
        liClick(index){
          this.currentIndex = index;
        }
      }
    })
</script>
</html>

效果

vue.js案例 vue实战案例_css_09

vue.js案例 vue实战案例_css

案例4：购物车

vue.js案例 vue实战案例_vue.js案例_02

展示商品列表，显示商品名，价格，购买数量，总价，移除操作
价格随购买数量增减而变化，但是商品数最少是1
点击移除则删除对应的商品
最后计算出总价

思路

首先创建html、css、js三个文件
html文件中引入css和js，写table表格来展示商品
商品需要使用v-for指令循环展示，商品增减和移除分别对应三个函数
总价使用计算属性计算，并使用过滤器处理数据格式
css中就是写样式不多赘述
js中创建Vue实例，定义商品属性
三个函数对应商品数量增减和移除，定义计算属性计算总价，定义过滤器处理价格格式

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>购物车案例</title>
    <!-- 引入css -->
    <link rel="stylesheet" type="text/css" href="./index.css"/>
  </head>
  <body>
    <div id="app">
      <div v-if="books.length">
        <table>
          <thead>
            <tr>
              <th></th>
              <th>书籍名称</th>
              <th>出版日期</th>
              <th>价格</th>
              <th>购买数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in books">
              <th>{{item.id}}</th>
              <th>{{item.name}}</th>
              <th>{{item.date}}</th>
              <th>{{item.price | finalPrice}}</th>
              <th>
                <button type="button" @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
                {{item.count}}
                <button type="button" @click="increment(index)">+</button>
              </th>
              <th>
                <button type="button" @click="removeBook(index)">移除</button>
              </th>
            </tr>
          </tbody>
        </table>
        <h2>总价格{{totalPrice | finalPrice}}</h2>
      </div>
      <h2 v-else>
        购物车为空
      </h2>
    </div>
  </body>
  <script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="./main.js" type="text/javascript" charset="utf-8"></script>
  
</html>

CSS

table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}


th,td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}


th{
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

JavaScript

const app = new Vue({
  el: "#app",
  data: {
    books: [
      {
        id: 1,
        name: "《被讨厌的勇气》",
        date: "2006-2",
        price: 85.00,
        count: 1
      },
      {
        id: 2,
        name: "《人性的光辉》",
        date: "2008-2",
        price: 49.00,
        count: 1
      },
      {
        id: 3,
        name: "《活着》",
        date: "2006-2",
        price: 34.00,
        count: 1
      },
      {
        id: 4,
        name: "《当下的力量》",
        date: "2007-2",
        price: 42.00,
        count: 1
      },
      {
        id: 5,
        name: "《国富论》",
        date: "2001-2",
        price: 58.00,
        count: 1
      }
    ]
  },
  methods: {
    decrement(index){
      this.books[index].count--
    },
    increment(index){
      this.books[index].count++
    },
    removeBook(index){
      this.books.splice(index,1)
    }
  },
  computed:{
    totalPrice(){
      //let totalPrice = 0;
      //for(let i = 0;i < this.books.length;i++){
        //totalPrice += this.books[i].price * this.books[i].count;
      //}
      //return totalPrice;
            
            // 或者使用reduce高阶函数
            return this.books.reduce(function(preValue,book){
        return preValue + book.price * book.count
      },0);
    }
  },
  // 使用过滤器处理价格保留两位和人民币符号
  filters:{
    finalPrice(price){
      return "¥" + price.toFixed(2)
    }
  }
})

效果

vue.js案例 vue实战案例_vue.js案例_12

vue.js案例 vue实战案例_css

案例5：v-model绑定单选框、多选框等

vue.js案例 vue实战案例_vue.js案例_02

说明

这里正好补充一下v-model绑定其他表单元素的写法，读者小伙伴可以写完之后自己调试一下看看效果

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- 1、绑定单选框：性别案例 -->
      <input type="radio" name="sex" value="男" v-model="sex"/>男
      <input type="radio" name="sex" value="女" v-model="sex"/>女
      <h2>当前选择的性别：{{sex}}</h2>
      
      <!-- 2、多选框案例，选择爱好 -->
      <input type="checkbox" name="hobby" value="篮球" v-model="hobby"/>篮球
      <input type="checkbox" name="hobby" value="唱" v-model="hobby"/>唱
      <input type="checkbox" name="hobby" value="跳" v-model="hobby"/>跳
      <input type="checkbox" name="hobby" value="rap" v-model="hobby"/>rap
      <h2>爱好是：{{hobby}}</h2>
      
      <!-- 3、选择同意用户协议 -->
      <input type="checkbox" v-model="isAgree"/>同意协议
      <button type="button" :disabled="!isAgree">下一步</button>
      <br>
      <!-- select框 -->
      <select name="" v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="橘子">橘子</option>
      </select>
      <h2>你选择的水果是：{{fruit}}</h2>
      
      <!-- 加上multiple，表示可多选 -->
      <select name="" v-model="fruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="橘子">橘子</option>
      </select>
      <h2>你选择的水果是：{{fruits}}</h2>
    </div>
  </body>
  <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    const app = new Vue({
      el: "#app",
      data: {
        sex: "男",
        hobby: [],
        isAgree: false,
        fruit: "香蕉",
        fruits: []
      }
    })
</script>
</html>

这里给大家分享5个vue的基础案例，大家一定要多多锤炼，觉得有所帮助或者疑问欢迎评论区留言！

vue.js案例 vue实战案例_vue.js案例_15