当前位置：首页 > news >正文

Vue黑马笔记(最新）

news 2025/11/14 6:30:12

VUE

vue是一个用于构建用户界面的渐进式框架

创建一个VUE实例

核心步骤：

准备容器
引包（官网）-开发版本/生产版本
创建一个vue实例 new vue()
指定配置项->渲染数据
el指定挂载点（选择器）,指定管理的是哪个容器。
data提供数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<div id="app"><!-- 编写渲染的代码逻辑 --><h1>{{ msg }}</h1><a>{{count}}</a>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>//一旦引入了vuejs核心包，在全局环境，就有了vue构造函数const app = new Vue({el: '#app',data:{msg: 'Helloyyh',count: 666}})
</script>
</body>
</html>

插值表达式

作用

利用表达式进行插值，将数据渲染到页面中
语法格式

{{ 表达式 }}
注意点：
1. 使用的数据要存在（data）
2. 支持的是表达式，而非语句if… for
3. 不能在标签属性里面使用

响应式特性

数据改变，视图会自动更新

如何访问或修改数据呢？

访问数据：实例.属性名
修改数据：“实例.属性名”=值

指令

指令就是带有v-前缀的特殊属性，不同属性对应不同的功能

v-html

v-html="表达式"动态设置元素innerHTML

v-show

作用：控制元素显示隐藏
语法：v-show=‘‘表达式’’ 值为true显示，false隐藏
原理：切换 display：none控制显示隐藏
场景：频繁切换显示隐藏的场景

v-if

作用：控制元素显示隐藏（条件渲染）
语法：v-if=“表达式” 表达式值为true显示，false隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换场景

v-else v-else-if

作用：辅助v-if进行判断渲染
语法：v-else v-else-if=‘‘表达式’’
注意：需要紧挨着v-if一起使用

v-on

作用：注册事件 = 添加监听+提供处理逻辑
语法：v-on：事件名=‘‘内联语句’’

v-on：事件名=‘‘methods中的函数名’’
简写：@事件名

//内联语句方式
<body><div id="app"><button @click="count--">-</button>    //简写<span>{{ count }}</span><button v-on:click="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>//一旦引入了vuejs核心包，在全局环境，就有了vue构造函数const app = new Vue({el: '#app',data:{count: 100}})</script>
</body>

//methods方式
<body><div id="app"><button @click="fn">切换显示隐藏</button><h1 v-show="isshow">杨雨涵</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app1 = new Vue({el: '#app',data:{isshow: true},methods:{fn(){//让提供的所有methods中的函数，this都指向当前实例//app1 === thisapp1.isshow = !app1.isshow}}})</script>
</body>

v-on调用传参

<body><div id="app"><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button><br><p>银行卡余额：{{ money }}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app1 = new Vue({el: '#app',data:{money: 100},methods:{buy(price){this.money-=price;}}})</script>
</body>

v-bind

作用：动态的设置html的标签属性→src url title …
语法：v-bind：属性名=“表达式”
简写：“v-bind：” 直接 “：+属性名”

<div id="app"><img v-bind:src="url">
</div>const app = new Vue({el:'#app',data:{url:'图片路径’}
})

v-for

作用：基于数据循环，多次渲染整个元素 →数组、对象、数字…
遍历数组语法：

v-for=“(item,index) in 数组”、

item每一项，index下标

<body><div id="app"><ul><li v-for="(item, index) in list">{{ item }}-{{ index }}</li></ul><ul><li v-for="(item) in list">{{ item }}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app1 = new Vue({el: '#app',data:{list:['西瓜','苹果','鸭梨','榴莲']}})</script>
</body>

v-for中的key

key作用：给元素添加唯一标识，便于vue进行列表项的正确排序复用
注意点：
1. key的值只能是字符串或数字类型
2. key的值必须具有唯一性
3. 推荐使用id作为key(唯一)，不推荐使用index作为key（会变化，不对应）

<li v-for="(item,index)in xxx" :key="唯一值"

v-model

作用：给表单元素使用，双向数据绑定→可以快速获取或设置表单元素内容
1. 数据变化 → 视图自动更新
2. 视图变化 → 数据自动更新
语法：v-model = ‘变量’

<body><div id="app">账户：<input type="text" v-model="username"><br><br>密码：<input type="password" v-model="password"><br><br><button @click="login">登录</button><button @click="reset">重置</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app1 = new Vue({el: '#app',data:{username:'',password:''},methods:{login (){console.log(this.username,this.password)},reset (){this.username = ''this.password = ''}}})</script>
</body>

指令修饰符

通过 “.” 指明一些指令的后缀，不同后缀封装了不同的处理操作 → 简化代码

按键修饰符

@keyup.enter → 键盘回车监听
v-model修饰符

v-model.trim → 去除首尾空格

v-model.number → 转数字
事件修饰符

@事件名.stop → 阻止冒泡

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

v-bind-操作class

语法 :class=“对象/数组”

对象→ 健就是类名，值就是布尔值。如果值为true，有这个类；否则没有这个类
```
<div class="box" :class="{类名1: 布尔值 , 类名2: 布尔值}"></div>
```
适用场景：一个类名，来回切换
数组→ 数组中所有的类，都会添加到盒子上，本质就是一个class列表
```
<div class="box" :class="[类名1，类名2，类名3]"></div>
```
使用场景：批量添加或删除类

<body><div id="app"><ul><li v-for="(item,index) in list" :key="item.id" @click="activeindex = index"><a :class="{active:index === activeindex}" href="#">{{item.name}}</a></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app1 = new Vue({el: '#app',data:{activeindex: 0, //记录高亮list:[{id:1,name:'京东秒杀'},{id:2,name:'每日特价'},{id:3,name:'品类秒杀'}]}})</script>
</body>

v-bind-操作style

语法 :style=“样式对象”

<div class="box" :style="{css属性名1：css属性值, css属性名2: css属性值}"></div>

适用场景：某个具体属性的动态设置

<body><div id="app"><div class="progress"><div class="inner" :style="{width: percent +'%'}"><span>{{percent}}%</span></div></div><button @click="percent = 25">设置25%</button><button @click="percent = 50">设置50%</button><button @click="percent = 75">设置75%</button><button @click="percent = 100">设置100%</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app1 = new Vue({el: '#app',data:{percent:25}})</script>
</body>

计算属性computed

基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

在computed配置项中，一个计算属性对应一个函数
使用起来和普通属性一样使用 {{ 计算属性名 }}

<body><div id="app"><h3>小黑的礼物清单</h3><table><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 src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 现有的数据list: [{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]},computed: {totalCount () {// 基于现有的数据，编写求值逻辑// 计算属性函数内部，可以直接通过 this 访问到 app 实例// 需求：对 this.list 数组里面的 num 进行求和 → reducelet total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>
</body>

computed 计算属性 VS methods方法

computed计算属性：

作用：封装了一段对于数据的处理，求得一个结果。
语法：写在computed配置项中。作为属性，直接使用 → this.计算属性 {{计算属性}}
缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算，并再次重新计算。

methods方法：

作用：给实例提供一个方法，调用以处理业务逻辑
语法：写在methods配置项中。作为方法，需要调用 → this.方法名() {{方法名()}} @事件名=“方法名”

计算属性的完整写法

计算属性默认的简写，只能读取访问，不能修改。若要修改，需要写计算属性的完整写法。

computed:{计算属性名:{get(){一段代码逻辑return 结果}，set(修改的值){一段代码逻辑}
}}

<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.7.16/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) {        this.firstName = value.slice(0, 1)this.lastName = value.slice(1)}}}})</script>
</body>

watch侦听器（监视器）

作用：监视数据变化，执行一些业务逻辑或异步操作

语法：

简单写法 → 简单类型数据，直接监视

data:{words:'苹果',obj:{words:'苹果'}
},watch:{//该方法会在数据变化时，触发执行数据属性名(newValue,oldValue){一些业务逻辑 或 异步操作}，'对象.属性名'(newValue,oldValue){一些业务逻辑 或 异步操作}
}

完整写法 →添加额外配置项
1. deep: true 对复杂类型深度监视
2. immediate: true 是否立即执行一次handler方法

data:{obj:{words: '苹果',lang: 'italy'}
},
watch:{//watch 完整写法数据属性名：{deep：true，//深度监视handler(newValue){console.log(newValue)}}
}

水果购物车案例

业务技术总结：

渲染功能：v-if/v-else v-for :class
删除功能：点击传参，filter过滤覆盖原数组
修改个数：点击传参，find找对象
全选反选：计算属性computed 完整写法get/set
统计选中的总价和总数量：计算属性computed reduce条件求和
持久化到本地：watch监视，localStorage，JSON.stringify，JSON.parse

Vue黑马笔记(最新）

VUE vue是一个用于构建用户界面的渐进式框架创建一个VUE实例核心步骤： 准备容器引包（官网）-开发版本/生产版本创建一个vue实例 new vue()指定配置项->渲染数据 el指定挂载点（选择器）,指定管理的是哪个容器。dat…...

编程日记 2024/3/25 3:25:12

安全工具介绍 SCNR/Arachni

关于SCNR 原来叫Arachni 是开源的，现在是SCNR，商用工具了可试用一个月 Arachni Web Application Security Scanner Framework 看名字就知道了，针对web app 的安全工具，DASTIAST吧安装安装之前先 sudo apt-get update sudo…...

编程日记 2024/3/25 3:23:09

赋能数据收集：从机票网站提取特价优惠的JavaScript技巧

背景介绍在这个信息时代，数据的收集和分析对于旅游行业至关重要。在竞争激烈的市场中，实时获取最新的机票特价信息能够为旅行者和旅游企业带来巨大的优势。随着机票价格的频繁波动，以及航空公司和旅行网站不断推出的限时特价优惠&#xff…...

编程日记 2024/3/25 3:13:01

【大模型】在VS Code(Visual Studio Code)上安装中文汉化版插件

文章目录一、下载安装二、配置显示语言（一）调出即将输入命令的搜索模式（二）在大于号后面输入：Configure Display Language（三）重启三、总结【运行系统】win 11 【本文解决的问题】 1、英文不…...

编程日记 2024/3/25 3:08:57

自定义WordPress顶部的菜单的方法

要自定义WordPress顶部的菜单，你需要使用WordPress的菜单系统。首先，你需要创建自定义菜单，然后将其设置为顶部导航菜单。以下是创建自定义菜单并设置其为顶部导航菜单的步骤： 登录到WordPress管理界面。转到“外观”>“菜单…...

编程日记 2024/3/25 3:07:56

独孤思维：流量暴涨，却惨遭违规

最近独孤操作虚拟资料短视频，有个很深的感悟。每天发10条短视频，积累到20天左右，播放量和粉丝数开始暴涨。虽然很多牛比的比我数据好，但是对于刚做短视频的独孤来说，我已经满足了。但是又发了10来天，…...

编程日记 2024/3/25 3:03:53

【python 装饰器 - 重试】做一个简易重试装饰器，如果函数执行错误则会自动重新执行，可设置重试次数，对爬虫比较友好

文章日期：2024.03.19 使用工具：Python 类型：装饰器文章全程已做去敏处理！！！ 【需要做的可联系我】 AES解密处理（直接解密即可）（crypto-js.js 标准算法）&…...

编程日记 2024/3/25 2:59:49

Linux线程补充之——同步

一、Linux线程同步同步是相对于竞争的概念； 同步就是在保证安全的前提下啊，按照一定的顺序访问临界资源； 所有的资源一定是先访问的临界资源，申请失败然后才进行排队的；互斥锁保证的是来访问的进程只允许…...

编程日记 2024/3/25 2:57:47

面试九设计模式

单例模式通常被归类为创建型设计模式，因为它主要关注如何创建对象的实例，以及如何确保在整个应用程序生命周期中只有一个实例存在。 1.为什么日志模块和数据库连接池需要单例模式使用单例模式来实现数据库连接池主要有以下几个原因： 全局唯…...

编程日记 2024/3/25 2:55:46

c++和c语言的区别实例

C和C语言在程序设计领域内具有深远的影响，它们不仅丰富了编程的世界，也为软件开发人员提供了强大的工具。虽然C是在C语言的基础上发展起来的，但两者之间存在着一些关键的区别。为了更深入地理解这些不同，本文将从多个维度探讨C和C…...

编程日记 2024/3/25 2:54:45

图论基础|841.钥匙和房间、463. 岛屿的周长

目录 841.钥匙和房间思路：本题是一个有向图搜索全路径的问题。只能用深搜（DFS）或者广搜（BFS）来搜。 463. 岛屿的周长 841.钥匙和房间力扣题目链接 (opens new window) 有 N 个房间，开始时你位于 0…...

编程日记 2024/3/25 2:51:35

把 Taro 项目作为一个完整分包，Taro项目里分包的样式丢失

现象： 当我们把 Taro 项目作为原生微信小程序一个完整分包时，Taro项目里分包的样式丢失，示意图如下： 原因： 在node_modules/tarojs/plugin-indie/dist/index.js文件里，限制了只有pages目录下会被引入app.w…...

编程日记 2024/3/25 2:48:31

腾讯云服务器价格查询系统，2024年1年、3年和5年活动价格表

腾讯云服务器多少钱一年？61元一年起。2024年最新腾讯云服务器优惠价格表，腾讯云轻量2核2G3M服务器61元一年、2核2G4M服务器99元一年可买三年、2核4G5M服务器165元一年、3年756元、轻量4核8M12M服务器646元15个月、4核16G10M配置32元1个月、312元一年、8核…...

编程日记 2024/3/25 2:44:27

第十四届蓝桥杯大赛软件赛省赛Java大学B组

最近正在备考蓝桥杯，报的java b组，顺便更一下蓝桥的幸运数字题目思路：填空题，暴力即可 import java.util.Scanner; // 1:无需package // 2: 类名必须Main, 不可修改public class Main {static int trans(int x, int y){int …...

编程日记 2024/3/25 2:43:25

Java二阶知识点总结（七）SVN和Git

SVN 1、SVN和Git的区别 SVN是集中式的，也就是会有一个服务器保存所有代码，拉取代码的时候只能从这个服务器上拉取；Git是分布式的，也就是说每个人都保存有所有代码，如果要获取代码，可以从其他人手上获取SV…...

编程日记 2024/3/25 2:41:23

Java后端八股------设计模式

Coffee可以设计成接口。...

编程日记 2024/3/25 2:39:22

DBO优化GRNN回归预测(matlab代码)

DBO-GRNN回归预测matlab代码蜣螂优化算法(Dung Beetle Optimizer, DBO)是一种新型的群智能优化算法，在2022年底提出，主要是受蜣螂的的滚球、跳舞、觅食、偷窃和繁殖行为的启发。数据为Excel股票预测数据。数据集划分为训练集、验证集、测试集,比例…...

编程日记 2024/3/25 2:38:21

Day 31 贪心01

理论基础贪心的本质是选择每一阶段的局部最优，从而达到全局最优。最好用的策略就是举反例，如果想不到反例，那么就试一试贪心吧。贪心算法一般分为如下四步： 将问题分解为若干个子问题找出适合的贪心策略求解每一个子问题的最优…...

编程日记 2024/3/25 2:35:17

C++11特性：std::lock_guard是否会引起死锁？

今天在评审代码的时候，因为位于两个不同的线程中（一个是周期性事件线程，一个是触发式事件线程），需要对一个资源类的某些属性进行互斥的访问，因此采用lock_guard互斥量包装器，但是在升级的过程中…...

编程日记 2024/3/25 2:33:16

stm32使用定时器实现PWM与呼吸灯

PWM介绍 STM32F103C8T6 PWM 资源： 高级定时器（ TIM1 ）： 7 路通用定时器（ TIM2~TIM4 ）：各 4 路例如定时器2 PWM 输出模式： PWM 模式 1 ：在向上计数时&#xff0…...

编程日记 2024/3/25 2:32:14

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...

编程新知 2025/11/9 14:10:32

React第五十七节 Router中RouterProvider使用详解及注意事项

前言在 React Router v6.4 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和…...

编程新知 2025/11/7 20:04:23

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...

编程新知 2025/11/11 23:02:06