vue day2

最新推荐文章于 2024-07-22 15:13:59 发布
最新推荐文章于 2024-07-22 15:13:59 发布
阅读量613 收藏 10
点赞数 8
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52005267/article/details/134519113
版权

1、指令修饰符：.指明一些指令后缀，不同后缀封装不同处理操作

按键修饰符：@keyup.enter
请添加图片描述

v-model修饰符：
v-model.trim：去首位空格
v-model.number：转数字

事件修饰符：
阻止事件冒泡：
（1）
在这里插入图片描述
在这里插入图片描述
（2）
@事件名.stop

阻止默认行为：
@事件名.prevent

2、v-bind控制样式属性

操作class：
（1）:class=“{类名1：布尔值，类名2：布尔值}” 对象（频繁切换）
（2）:class=“[类名1，类名2]” 数组（一次批量增加属性或删除）
在这里插入图片描述
改成id好像也可以，目前没看出问题，但是id可能比较乱七八糟，有长有短，随机的那种，可能会增加比较时间？
在这里插入图片描述
操作style：
适用于控制单个属性
:style:“{css属性名1:css属性值，。。。}”
属性值要加引号，若属性名中间有-，应改为小驼峰命名
请添加图片描述

3、v-model应用于表单元素
请添加图片描述
看右下角，选择哪个元素，select的value值和这个option的value值相同

请添加图片描述
通过改变select的value值，来改变选择的option
请添加图片描述

<!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>
    textarea {
      display: block;
      width: 240px;
      height: 100px;
      margin: 10px 0;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>小黑学习网</h3>

    姓名：
      <input type="text" v-model="username"> 
      <br><br>

    是否单身：
      <input type="checkbox" v-model="isSingle"> 
      <br><br>

    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input v-model="gender" type="radio" name="gender" value="1">男
      <input v-model="gender" type="radio" name="gender" value="2">女
      <br><br>

    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model="cityId">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">成都</option>
        <option value="104">南京</option>
      </select>
      <br><br>

    自我描述：
      <textarea v-model="desc"></textarea> 

    <button>立即注册</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        isSingle: false,
        gender: "2",
        cityId: '102',
        desc: ""
      }
    })
  </script>
</body>
</html>

4、计算属性
请添加图片描述
请添加图片描述
5、计算属性完整写法
请添加图片描述

请添加图片描述
此时使用的是计算属性的简写，只能获取计算属性的结果值，不能修改计算属性值，看右边报错了。

点改名卡，触发changeName函数，因为修改了计算属性，故执行set函数
请添加图片描述

<!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>
    input {
      width: 30px;
    }
  </style>
</head>

<body>

  <div id="app">
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span>{{ fullName }}</span><br><br>

    <button @click="changeName">改名卡</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: '刘',
        lastName: '备',
      },
      methods: {
        changeName() {
          this.fullName = '黄忠'

        }
      },
      computed: {
        // 简写 → 获取，没有配置设置的逻辑
        // fullName () {
        //   return this.firstName + this.lastName
        // }

        // 完整写法 → 获取 + 设置
        fullName: {
          // (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）
          //     会将返回值作为，求值的结果
          get() {
            return this.firstName + this.lastName
          },
          // (2) 当fullName计算属性，被修改赋值时，执行set
          //     修改的值，传递给set方法的形参
          set(value) {
            // console.log(value.slice(0, 1))          
            // console.log(value.slice(1))         
            this.firstName = value.slice(0, 1)
            this.lastName = value.slice(1)
          }
        }
      }
    })
  </script>
</body>

</html>

7、案例
在这里插入图片描述

<!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" />
  <link rel="stylesheet" href="./styles/index.css" />
  <title>Document</title>
</head>

<body>
  <div id="app" class="score-case">
    <div class="table">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="list.length>0">
          <tr v-for="(item,index) in list" :key="item.id">
            <td>{{index+1}}</td>
            <td>{{item.subject}}</td>
            <td :class="{red:item.score<60}">{{item.score}}</td>
            <td><a href="#" @click.prevent="del(item.id)">删除</a></td>
          </tr>

        </tbody>
        <tbody v-else>
          <tr>
            <td colspan="5">
              <span class="none">暂无数据</span>
            </td>
          </tr>
        </tbody>

        <tfoot>
          <tr>
            <td colspan="5">
              <span>总分：{{totalScore}}</span>
              <span style="margin-left: 50px">平均分：{{avr}}</span>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="form">
      <div class="form-item">
        <div class="label">科目：</div>
        <div class="input">
          <input v-model.trim="subject" type="text" placeholder="请输入科目" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">分数：</div>
        <div class="input">
          <input v-model.number="score" type="text" placeholder="请输入分数" />
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button @click="add" class="submit">添加</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, subject: '语文', score: 20 },
          { id: 7, subject: '数学', score: 99 },
          { id: 12, subject: '英语', score: 70 },
        ],
        subject: '',
        score: ''
      },
      methods: {
        del(id) {
          this.list = this.list.filter(item => item.id !== id)
        },
        add() {
          if (!this.subject) {
            alert('请输入科目')
            return
          }
          if (typeof this.score !== 'number') {
            alert('请输入正确的成绩')
            return
          }
          // 将数据增加到数组最前端
          this.list.unshift({
            id: +new Date(),
            subject: this.subject,
            score: this.score
          })

          this.subject = ''
          this.score = ''
        }

      },
      // 计算属性
      computed: {
        // 用数组累加方法 reduce
        totalScore() {
          const num = this.list.reduce((prev, cur) => prev + cur.score, 0)
          return num
        },
        avr() {
          // 全部删除后，会出现0/0，加个判断
          if (this.list.length === 0) {
            return 0
          }
          return (this.totalScore / this.list.length).toFixed(2)
        }
      }
    })
  </script>
</body>

</html>

8、watch侦听器

简单写法：请添加图片描述
数据一旦发生变化，就会触发watch中相应方法，数据可能和某个表单元素绑定，用户改变表单元素值，双向绑定使得数据值做相应变化。

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 请求方式：get
      // 请求参数：
      // （1）words：需要被翻译的文本（必传）
      // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
      // -----------------------------------------------
      
      const app = new Vue({
        el: '#app',
        data: {
          // words: ''
          obj: {
            words: ''
          },
          result: '', // 翻译结果
          // timer: null // 延时器id
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch: {
          // 该方法会在数据变化时调用执行
          // newValue新值, oldValue老值（一般不用）
          // words (newValue) {
          //   console.log('变化了', newValue)
          // }

          'obj.words' (newValue) {
            // console.log('变化了', newValue)
            // 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
            clearTimeout(this.timer)
            this.timer = setTimeout(async () => {
              const res = await axios({
                url: 'https://applet-base-api-t.itheima.net/api/translate',
                params: {
                  words: newValue
                }
              })
              this.result = res.data.data
              console.log(res.data.data)
            }, 300)
          }
        }
      })
    </script>

watch完整写法： 可添加配置项，可一次性监视复杂数据类型中所有属性，不用一个个监视复杂类型中所有属性
请添加图片描述

  <body>
    <div id="app">
      <!-- 条件选择框 -->
      <div class="query">
        <span>翻译成的语言：</span>
        <select v-model="obj.lang">
          <option value="italy">意大利</option>
          <option value="english">英语</option>
          <option value="german">德语</option>
        </select>
      </div>

      <!-- 翻译框 -->
      <div class="box">
        <div class="input-wrap">
          <textarea v-model="obj.words"></textarea>
          <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
          <div class="transbox">{{ result }}</div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 需求：输入内容，修改语言，都实时翻译

      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 请求方式：get
      // 请求参数：
      // （1）words：需要被翻译的文本（必传）
      // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
      // -----------------------------------------------
   
      const app = new Vue({
        el: '#app',
        data: {
          obj: {
            words: '小黑',
            lang: 'italy'
          },
          result: '', // 翻译结果
        },
        watch: {
          obj: {
            deep: true, // 深度监视
            immediate: true, // 立刻执行，一进入页面handler就立刻执行一次
            handler (newValue) {
              clearTimeout(this.timer)
              this.timer = setTimeout(async () => {
                const res = await axios({
                  url: 'https://applet-base-api-t.itheima.net/api/translate',
                  params: newValue
                })
                this.result = res.data.data
                console.log(res.data.data)
              }, 300)
            }
          }


          // 'obj.words' (newValue) {
          //   clearTimeout(this.timer)
          //   this.timer = setTimeout(async () => {
          //     const res = await axios({
          //       url: 'https://applet-base-api-t.itheima.net/api/translate',
          //       params: {
          //         words: newValue
          //       }
          //     })
          //     this.result = res.data.data
          //     console.log(res.data.data)
          //   }, 300)
          // }
        }
      })
    </script>
  </body>

9、购物车案例（持久化到本地没写）

<!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" />
  <link rel="stylesheet" href="./css/inputnumber.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <title>购物车</title>
</head>

<body>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div v-if="fruitList.length > 0" class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div v-for="(item,index) in fruitList" :key="item.id" class="tr" :class="{active:item.isChecked}">
            <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{item.price}}</div>
            <div class="td">
              <div class="my-input-number">
                <button class="decrease" @click="sub(item.id)" :disabled="item.num<=1"> - </button>
                <span class="my-input__inner">{{item.num}}</span>
                <button class="increase" @click="add(item.id)"> + </button>
              </div>
            </div>
            <div class="td">{{ item.num * item.price }}</div>
            <div @click="del(item.id)" class="td"><button>删除</button></div>
          </div>


        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" v-model="total" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span>
          <!-- 结算按钮 -->
          <button class="pay">结算( {{ totalCount }} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div v-else class="empty">🛒空空如也</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 水果列表
        fruitList: [
          {
            id: 1,
            icon: './img/火龙果.png',
            isChecked: true,
            // v-model对于checkedbox，绑定的是它的checked属性
            num: 2,
            price: 6,
          },
          {
            id: 2,
            icon: './img/荔枝.png',
            isChecked: false,
            num: 7,
            price: 20,
          },
          {
            id: 3,
            icon: './img/榴莲.png',
            isChecked: false,
            num: 3,
            price: 40,
          },
          {
            id: 4,
            icon: './img/鸭梨.png',
            isChecked: true,
            num: 10,
            price: 3,
          },
          {
            id: 5,
            icon: './img/樱桃.png',
            isChecked: false,
            num: 20,
            price: 34,
          },
        ],
      },
      methods: {
        del(id) {
          this.fruitList = this.fruitList.filter(item => item.id !== id)
        },
        sub(id) {
          this.fruitList.find(item => item.id === id).num--
        },
        add(id) {
          this.fruitList.find(item => item.id === id).num++
        }
      },
      computed: {
        total: {
          get() {
            return this.fruitList.every(item => item.isChecked)
          },

          set(value) {
            // value是全选框被勾选或取消勾选时（即数据变化），传过来的布尔值
            this.fruitList.forEach(item => item.isChecked = value)
          }

        },
        totalCount() {
          return this.fruitList.reduce((sum, item) => {
            if (item.isChecked) {
              // 选中 → 需要累加
              return sum + item.num
            } else {
              // 没选中 → 不需要累加
              return sum
            }
          }, 0)
        },
        // 总计选中的总价 num * price
        totalPrice() {
          return this.fruitList.reduce((sum, item) => {
            if (item.isChecked) {
              return sum + item.num * item.price
            } else {
              return sum
            }
          }, 0)
        }
      }

    })
  </script>
</body>

</html>
learn 11233466
关注
  • 8
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Day2购物车代码和素材
08-04
在“Vue Day2购物车代码和素材”这个主题中，我们主要关注的是使用Vue.js框架构建一个购物车功能。Vue.js是一个轻量级的前端JavaScript框架，它以其易学、可复用性和组件化特性而受到开发者的喜爱。在这个项目中，...
vue2-day3.zip
08-10
在"vue2-day3.zip"这个压缩包中，我们很可能看到的是关于Vue 2.x版本的第三天学习资料，这可能包括教程、代码示例或者项目实践等内容。Vue 2.x是Vue.js的一个重要版本，它引入了许多改进和优化，使得开发更加高效和...
Vue Day7 综合案例
08-11
2. **数据绑定**：Vue.js的双向数据绑定使得视图和模型间的交互变得简单。在购物车案例中，商品列表和购物车的数据会实时同步，这得益于`v-model`指令的使用。 3. **计算属性与侦听器**：为了动态计算购物车总价或...
Day8 智慧商城 Vue2
08-27
在本课程"Day8 智慧商城 Vue2"中，我们将深入探讨如何使用Vue.js框架构建一个功能完善的智慧商城应用。Vue.js是一款轻量级的前端JavaScript框架，以其易用性、灵活性和高效的更新机制受到开发者们的广泛欢迎。在这个...
vue中预览视频，word，pdf，xlsx
小小小猿
07-22 168
如果vue版本是vue2.6版本或者以下版本还需要安装@vue/composition-api。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 238
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 420
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 732
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
vue this.$refs 动态拼接
cimbala的博客
07-19 161
业务需要，refs是不固定的。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 380
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue 腾讯云 javascript sdk + 简单富文本组件设计+实战
呵呵哒!的博客
07-19 228
【代码】vue 腾讯云 javascript sdk + 简单富文本组件设计+实战。
vue使用x6画流程图，简单使用
qq_34631220的博客
07-18 665
【代码】vue使用x6画流程图，简单使用。
Vue的模板编译：深入理解渲染函数与预编译模板
哎 你看的博客
07-22 692
Vue.js 是一个用于构建用户界面的渐进式框架，它的核心特性之一是其响应式和声明式的模板语法。Vue 的模板不仅仅是简单的字符串插值，它们会被编译成渲染函数，这个过程涉及到将模板字符串转换成 JavaScript 代码。本文将深入探讨 Vue 的模板编译过程，并讨论如何使用预编译模板来提高应用性能。
element UI ：el-table横向列内容超出宽度，滚动条不显示问题
qq_44776454的博客
07-18 556
element UI ：el-table横向列内容超出宽度，滚动条不显示问题
vue封装防重复点击事件，并全局挂载使用
m0_47791238的博客
07-22 70
在utils文件夹中(可以和普通工具类存放一起，也可以按自己需求存放)创建js文件 preventReClick.js。1、创建防重复点击的js文件，在js文件中添加防重复点击的方法。
7 Vue3
ever__ever的博客
07-22 731
vue3支持vue2的大多数特性，实现对vue2的兼容
【Vue】`v-on` 指令详解：事件绑定与处理的全面指南
lph159的博客
07-19 277
v-on是 Vue.js 用于事件监听的指令，可以绑定原生 DOM 事件或自定义事件。其基本语法如下：
Vue 组件 $emit 通信简单例子
qq_30049249的博客
07-19 452
https://andi.cn/page/621585.html
巧用Vue3 composition api的计算属性实现扁平化tree连线
felix_alone2012的博客
07-19 476
本示例节选自vue3最新开源组件实战教程大纲（持续更新中）的tree组件开发部分。将进一步把基于Vue3 composition api的computed计算属性特性应用到组件开发实战中，继续以最佳实践的方式呈现给大家。
vue2简单日历组件
11-25
以下是一个简单的Vue2日历组件的实现，包括日期选择和月份切换功能： ```html <span class="prev" @click="prevMonth">< <span class="title">{{ year }}年{{ month }}月 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值