20231014-黑马Vue学习笔记-第二天

最新推荐文章于 2024-09-05 16:55:11 发布
最新推荐文章于 2024-09-05 16:55:11 发布
阅读量194 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44887198/article/details/133821489
版权

文章目录

指令修饰符

①按键修饰符
	@keyup.enter -> 键盘回车监听
②v-model修饰符
	v-model.trim -> 去除首尾空格
	v-model.number -> 转数字
③事件修饰符
	@事件名.stop -> 阻止冒泡
	@事件名.prevent -> 阻止默认行为

v-bind操作CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <style>
    .box {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      text-align: center;
    }

    .bgColor {
      background-color: aquamarine;
    }

    .bigger {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <!-- 适用场景：一个类名 来回切换 -->
  <!-- <div id="box" class="box" :class="{bgColor:false,bigger:true}"> -->

  <!-- 适用场景：批量添加或删除类 -->
  <div id="box" class="box" :class="['bgColor','bigger']">
    Nice day!
  </div>

  <!-- 操作style <div class="box" :style="{CSS属性名1:'CSS属性值',CSS属性名2:'CSS属性值'}"></div> -->

  <script>
    const app = new Vue({
      el: "#box",
      data: {

      }
    });
  </script>
</body>

</html>

案例-京东秒杀Tab导航高亮

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    li {
      list-style: none;
      display: inline-block;
      width: 120px;
      height: 50px;
      margin-right: 20px;
      text-align: center;
    }

    a {
      text-decoration: none;
      color: black;
      font-size: 25px;
      line-height: 50px;
    }

    .active {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="nav">
    <ul>
      <li v-for="(item,index) in list" @click="activeIndex=index">
        <a href="#" :class="{active:(index===activeIndex)}">{{item.name}}</a>
      </li>
    </ul>
    <hr>
  </div>

  <script>
    const app = new Vue({
      el: "#nav",
      data: {
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ],
        activeIndex: 0
      }
    });
  </script>
</body>

</html>

案例-小黑学习网（v-model应用于其他表单元素）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    #app {
      width: 640px;
      height: 480px;
      background-color: aquamarine;
      margin: 100px auto;
    }
  </style>
</head>

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

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

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

    性别：
    <input type="radio" name="sex" value="1" v-model="gender">♂男
    <input type="radio" name="sex" value="0" v-model="gender">♀女
    <br><br>

    所在城市：
    <select name="" id="" v-model="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="成都">成都</option>
      <option value="南京">南京</option>
    </select>
    <br><br>

    自我描述：
    <textarea name="" id="" cols="30" rows="10" style="resize: none;" v-model="desc"></textarea>
    <br><br>

    <button @click="sign">立即注册</button>
    <br><br>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        isSingle: false,
        gender: '1',
        city: '北京',
        desc: ''
      },
      methods: {
        sign() {
          if (this.username === '' || this.desc === '') {
            alert('请输入完整信息！！！');
            return;
          }
          alert(
            '姓名：' + this.username + '\n' +
            '性别：' + (this.gender === '1' ? '男' : '女') + '\n' +
            '是否单身：' + (this.isSingle ? '是' : '否') + '\n' +
            '所在城市：' + this.city + '\n' +
            '自我介绍：' + this.desc + '\n' +
            '注册成功！！！'
          );
        }
      }
    });
  </script>
</body>

</html>

computed计算属性-简略写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="box">
    <h1>小黑的礼物清单</h1>
    <table border="1" width="300">
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item,index) in list" :key="item.id">
        <td>{{item.name}}</td>
        <td>{{item.num}}</td>
      </tr>
    </table>
    <p>礼物总数：{{totalCount}}个</p>
  </div>
  <script>
    const app = new Vue({
      el: "#box",
      data: {
        list: [
          { id: 1, name: "蓝球", num: 1 },
          { id: 2, name: "玩具", num: 2 },
          { id: 3, name: "铅笔", num: 5 },
        ]
      },
      computed: {
        totalCount() {
          let total = this.list.reduce((sum, item) => sum + item.num, 0);
          return total;
        }
      }
    });
  </script>
</body>

</html>

computed计算属性和methods方法的区别

computed 计算属性：
作用：封装了一段对于数据的处理，求得一个结果。
语法：
① 写在 computed 配置项中
② 作为属性，直接使用 → this.计算属性 {{ 计算属性 }}
缓存特性（提升性能）：
计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算 → 并再次缓存
methods 方法：
作用：给实例提供一个方法，调用以处理业务逻辑。
语法：
① 写在 methods 配置项中
② 作为方法，需要调用 → this.方法名( ) {{ 方法名() }} @事件名=“方法名”

computed计算属性-完整写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="box">
    姓：<input type="text" v-model="firstName">+
    名：<input type="text" v-model="lastName">=
    <span>{{fullName}}</span>
    <br><br>
    <button @click="changeName">改名卡</button>
  </div>

  <script>
    const app = new Vue({
      el: "#box",
      data: {
        firstName: '刘',
        lastName: '备'
      },
      methods: {
        changeName() {
          this.fullName = "张飞";
          console.log("改名");
        }
      },
      computed: {
        // 简写 -> 获取，没有配置设置的逻辑
        // fullName() {
        //   return this.firstName + this.lastName;
        // }

        // 完整写法 -> 获取 + 设置
        fullName: {
          get() {
            return this.firstName + this.lastName;
          },
          set(value) { //被修改赋值时执行
            this.firstName = value.slice(0, 1);
            this.lastName = value.slice(1);
          }
        }
      }
    });
  </script>
</body>

</html>

成绩案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <style>
    .red {
      color: red;
    }
  </style>
</head>

<body>
  <div id="box">
    <div>
      <table border="1" width="400">
        <tr>
          <th>编号</th>
          <th>科目</th>
          <th>成绩</th>
          <th>操作</th>
        </tr>
        <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><button @click="Remove(item.id)">删除</button></td>
          </tr>
        </tbody>
        <tbody v-else>
          <td colspan="4" style="text-align: center;">暂无数据</td>
        </tbody>
      </table>
      <span>总分：{{Total}}</span>
      <span>平均分：{{Average}}</span>
    </div>
    <div>
      科目：<input type="text" v-model.trim="subject">
      分数：<input type="text" v-model.number="score">
      <button @click="Add">添加</button>
    </div>
  </div>

  <script>
    const app = new Vue({
      el: "#box",
      data: {
        list: [
          { id: 1, subject: '语文', score: 20 },
          { id: 7, subject: '数学', score: 99 },
          { id: 12, subject: '英语', score: 70 },
        ],
        subject: '',
        score: ''
      },
      methods: {
        Remove(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: {
        Total() {
          return this.list.reduce((sum, item) => sum + item.score, 0);
        },
        Average() {
          if (this.list.length === 0)
            return 0;
          return (this.Total / this.list.length).toFixed(2);
        }
      }
    });
  </script>

</body>

</html>

watch侦听器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="box">
    <input type="text" name="" id="" v-model="obj.words">
  </div>

  <script>
    const app = new Vue({
      el: "#box",
      data: {
        // words: ''
        obj: {
          words: ""
        }
      },
      watch: {
        // words(newValue, oldValue) { // oldValue 可省略
        //   console.log('变化了', newValue, oldValue);
        // }

        'obj.words'(newValue) {
          console.log('变化了', newValue);
        },

        // // 完整写法
        // obj: {
        //   deep: true, //深度监视
        //   immediate: true, //立刻执行，一进入页面就执行一次
        //   handle(newValue) { //数据修改时触发

        //   }
        // }

      }
    });
  </script>
</body>

</html>

案例-水果购物车

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    td {
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="box">
    <table border="1" width="1000">
      <thead>
        <tr>
          <th>选中</th>
          <th>水果</th>
          <th>单价</th>
          <th>个数</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="list.length===0">
        <td colspan="6">空空如也</td>
      </tbody>
      <tbody v-else v-for="(item,index) in list" :key="item.id">
        <tr>
          <td><input type="checkbox" v-model="item.isChecked"></td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>
            <button @click="item.num--" :disabled="item.num<=1">-</button>
            {{item.num}}
            <button @click="item.num++">+</button>
          </td>
          <td>{{item.price*item.num}}</td>
          <td><a href="https://www.baidu.com" @click.prevent="del(item.id)">删除</a></td>
        </tr>
      </tbody>
      <tfoot>
        <td><input type="checkbox" v-model="isAll">全选</td>
        <td colspan="3"></td>
        <td>总价：￥{{totalPrice}}</td>
        <td><button>结算{{totalCount}}</button></td>
      </tfoot>
    </table>
  </div>

  <script>
    const defaultArr = [
      { id: 1, name: '火龙果', isChecked: true, num: 2, price: 3 },
      { id: 2, name: '苹果', isChecked: false, num: 8, price: 7 },
      { id: 3, name: '香蕉', isChecked: false, num: 6, price: 5 },
      { id: 4, name: '葡萄', isChecked: false, num: 3, price: 10 },
      { id: 5, name: '香梨', isChecked: false, num: 9, price: 4 },
    ];
    const app = new Vue({
      el: "#box",
      data: {
        list: JSON.parse(localStorage.getItem('list')) || defaultArr
      },
      methods: {
        del(id) {
          this.list = this.list.filter(item => item.id != id);
        }
      },
      computed: {
        // isAll() {
        //   return this.list.every(item => item.isChecked === true);
        // }

        isAll: {
          get() {
            return this.list.every(item => item.isChecked === true);
          },
          set(value) {
            this.list.forEach(function (item) {
              item.isChecked = value;
            });
          }
        },
        totalCount() {
          return this.list.reduce((sum, item) => {
            if (item.isChecked) {
              return sum + item.num;
            }
            else {
              return sum;
            }
          }, 0);
        },
        totalPrice() {
          return this.list.reduce((sum, item) => {
            if (item.isChecked) {
              return sum + (item.num * item.price);
            }
            else {
              return sum;
            }
          }, 0);
        }
      },
      watch: {
        list: {
          deep: true,
          handler(newValue) {
            localStorage.setItem('list', JSON.stringify(newValue)); // 存到本地
          }
        }
      }
    });
  </script>
</body>

</html>
ぃ咔哇依°ヽ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2022_黑马vue笔记
qq_43420617的博客
03-23 2803
vue2 vue插件 1.Vue Snippets 2.Vetur vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！ 双向数据绑定： 在网页中，form 表单负责采集数据，Ajax 负责提交数据。 js 数据的变化，会被自动渲染到页面上 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中 MVVM 数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源
2021-08-31 Vue笔记(基本篇)
weixin_45737029的博客
09-23 336
一、Vue下载及使用 https://cn.vuejs.org/v2/guide/installation.html 这是官网的安装教程，但对于调试工具Vue Devtools, 官网链接直接打开是github的下载页面，需要自己配置和更改，不方便
vue学习总结day02
weixin_44472810的博客
04-13 143
day02 Vue常用特性 表单基本操作 获取单选框中的值 通过v-model <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就...
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67265919的博客
03-11 3644
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
Vue快速入门 - 黑马 (附音乐播放器源码)
weixin_51909882的博客
01-21 1153
黑马程序员Vue快速入门学习笔记，附部分源码
仿大众点评的小项目---黑马点评(全功能实现+额外功能)
m0_72866046的博客
10-08 3432
该项目是仿大众点评的小型Java项目，旨在为用户提供一个点评和分享平台。通过这个平台，用户可以浏览、搜索和比较各种商家的信息，包括美食、KTV等等。用户可以在平台上创建个人账号、关注他人、发表评论、点赞、上传图片和发布自己的博客。
WebApis学习笔记 更新完毕 2022最新黑马程序员
专注于 前端开发 知识分享
07-20 1898
黑马程序员WebApis学习笔记-复习笔记
8、Vue 核心技术与实战 智慧商城项目 DAY8~10
m0_51394252的博客
08-23 1032
已售{{ detail.goods_sales }}件
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2595
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 527
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1298
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
开发适合el-dialog的拉伸拖拽自定义指令和适配自定义的图片查看组件
鹤渺的星球
09-05 1058
我之前有开发过一个图片查看的组件，这个组件可在单页面打开，也可以在弹窗里打开，但是弹窗因为是比较固定，所以有一些局限性，只能拖拽，不能改变弹窗大小，于是有了开发【可以拖拽改变大小的弹窗】组件。通过自定义指令，实现弹窗的移动拖拽拉伸等功能动态计算弹窗的位置与尺寸，因为弹窗的位置和尺寸是动态计算的，涉及到鼠标的实时位置和弹窗初始位置之间的关系。代码也贴上去了，仅供参考。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 524
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
ant design vue+vue3+ts实现一天内按钮只能点击2次，并置灰，且过当天0点时需复原~
m0_62626838的博客
08-31 555
第二步：针对一天内按钮只能点击2次需求，首先我们要拿到当前的系统日期及明天日期，并转化为“2024-09-01”格式，为后续通过Date.parse()转化为总毫秒数做对比，来实现点击次数，但此时容易忽略一个问题，即弹窗是通过v-if实现的，每一次进来都会重新渲染，在子组件中定义的点击次数变量会清零，所以此时需要进行状态管理，这里使用的是pinia来实现的，将点击次数等数据存储在pinia中，然后在弹窗组件中使用即可。第三步：针对过0点之后复原问题。（这里应计算大于等于，后续优化）
vue仓库的使用
weixin_58462329的博客
09-02 748
Vue仓库通常指的是使用Vue CLI创建的项目仓库，它包含了项目的所有源代码、配置文件以及依赖项。
纯vue实现笔记系统
xc9711的博客
08-30 1441
只用vue前端实现笔记系统
el-popover弹框自定义位置
最新发布
weixin_47218354的博客
09-05 235
【代码】el-popover弹框自定义位置。
掌握Vue-router：从入门到实战技巧
Vue-router学习笔记 **学习目的** 掌握Vue框架中的路由管理是开发单页面应用程序（SPA）不可或缺的技能。通过熟悉Vue-router，开发者可以实现动态URL与组件内容的关联，提高用户体验并简化项目结构。 **Vue-router...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值