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

2023-10-17 16:01
文章标签 学习 黑马 笔记 第二天 vue 20231014

本文主要是介绍20231014-黑马Vue学习笔记-第二天，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 指令修饰符
  • v-bind操作CSS
  • 案例-京东秒杀Tab导航高亮
  • 案例-小黑学习网（v-model应用于其他表单元素）
  • computed计算属性-简略写法
  • computed计算属性和methods方法的区别
  • computed计算属性-完整写法
  • 成绩案例
  • watch侦听器
  • 案例-水果购物车

指令修饰符

①按键修饰符@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>

这篇关于20231014-黑马Vue学习笔记-第二天的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/226465。

相关文章

Go学习记录之runtime包深入解析

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,：本文主要介绍Go学习记录之runtime包的... 目录前言：一、runtime包内容学习1、作用：① Goroutine和并发控制：② 垃圾回收：③ 栈和
阅读更多...
Android学习总结之Java和kotlin区别超详细分析

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,：本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1：Kotlin 如何解决 Java 的 NullPointerExceptio
阅读更多...
使用vscode搭建pywebview集成vue项目实践

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》：本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv
阅读更多...
使用Vue-ECharts实现数据可视化图表功能

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts？1. 基于 ECharts，功能强大2. 更符合 Vue
阅读更多...
Vue中插槽slot的使用示例详解

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》：本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽
阅读更多...
springboot+vue项目怎么解决跨域问题详解

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》：本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理（开发环境推荐）2. 后端全局配置 CORS（生产环境推荐）3. 后端注解配置（按接口
阅读更多...
Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

《Vue2项目中配置TailwindCSS和FontAwesome的最佳实践举例》：本文主要介绍Vue2项目中配置TailwindCSS和FontAwesome的最... 目录vue 2 项目中配置 Tailwind css 和 Font Awesome 的最佳实践一、Tailwind CSS 配置1. 安
阅读更多...
重新对Java的类加载器的学习方式

重新对Java的类加载器的学习方式

《重新对Java的类加载器的学习方式》：本文主要介绍重新对Java的类加载器的学习方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍1.1、简介1.2、符号引用和直接引用1、符号引用2、直接引用3、符号转直接的过程2、加载流程3、类加载的分类3.1、显示
阅读更多...
一文详解如何在Vue3中封装API请求

一文详解如何在Vue3中封装API请求

《一文详解如何在Vue3中封装API请求》在现代前端开发中,API请求是不可避免的一部分,尤其是与后端交互时,下面我们来看看如何在Vue3项目中封装API请求,让你在实现功能时更加高效吧... 目录为什么要封装API请求1. vue 3项目结构2. 安装axIOS3. 创建API封装模块4. 封装API请求
阅读更多...
Java学习手册之Filter和Listener使用方法

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》：本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter（过滤器）1. Filter 的工作原理2. Filter 的配置与使用二、Listen
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2