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

【Vue-vue基础知识】学习笔记

article 2026/2/2 3:01:45

<<回到导览
vue基础知识
- 1.1.创建一个vue实例
- 1.2.vue基础指令
- - 1.2.1.v-bind
  - 1.2.2.v-model
  - 1.2.3.常用事件
  - 1.2.4.指令修饰符
- 1.3.计算属性
- - 1.3.1.计算属性的完整写法
  - 1.3.2.【案例】成绩
- 1.4.watch
- - 1.4.1.watch属性
  - 1.4.2.翻译业务实现
  - 1.4.3.watch属性的完整写法
  - 1.4.4.【案例】水果购物车
- 1.5.生命周期
- - 1.5.1.【应用】初始化渲染
  - 1.5.2.【应用】获取焦点

vue基础知识

mvvm模型

响应式数据，一旦数据变化，视图效果跟着变化

1.1.创建一个vue实例

代码：

 <!-- 1.准备容器 --><div id="app">{{msg}}{{age-1}}</div><!-- 2.引入开发版本的包 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 3.创建实例const app = new Vue({// 4.添加配置项el: '#app',// el => 挂载data: {msg: 'hello',age: 18}})

插值表达式

用{{}}包裹变量名，将表达式插值，如上面{{msg}}和{{age-1}}，浏览器会分别渲染值hello和 17
响应式特性

响应式：数据变化，视图自动更新，当我们修改数据后，vue会监听到数据修改，从而改变视图

data里的数据会添加到实例身上，以上面实例为例子，我们可以通过app访问属性msg和age
)

1.2.vue基础指令

一些基础指令：

    <!-- 1.v-html  =>  innerHtml   --><div v-html="msg2"></div><!-- 2.v-show  =>  通过display来显示和隐藏  =>  一般用于交互频繁  --><div v-show="flag3">333</div><!-- 3.v-if  =>   条件渲染                 =>  用于交互不频繁    --><div v-if="flag3">444</div><!-- 4.v-if、 v-else-if   v-else          =>   条件渲染  --><!-- 5.v-on 注册事件  每点击一下，count -1 -->v-on:click="count--"   =>   @click="count--"

methods属性（用于存放事件方法）

<!-- 点击按钮，调用methods方法，弹出提示框 -->
<button @click="methods">methods</button><!-- js -->
methods: {methods() {alert('methods')}
}

7.v-for（基于数组循环，多次渲染整个元素，v-for="(item,index) in arr）
```

<li v-for="(item, index) in list">{{index+1}}.{{item}}</li>
```
v-for中的key：给元素添加唯一标识，用于列表项的正确排序（key值必须具有唯一性，不推荐以index作为key值）

1.2.1.v-bind

可省略成: ，用于实现熟悉的响应式

  <!-- imgUrl为配置项中data中的数据 --><img v-bind:src="imgUrl"><!-- 等价为 --><img :src="imgUrl" alt="">

v-bind可以操作class

传对象

应用场景：一个类名，来回切换（tab栏）

<!-- size、pink、green都为类名 -->
<div class="box" :class="{size:true,pink:false,green:true}">123</div>

传数组

应用场景：批量添加或者删除类

<div class="box" :class="['pink','size']">223</div>

style行内样式

应用场景：非常方便地控制某个样式属性的变化（进度条），数值拼接单位
```
<div class="box" :style="{'background-color':'green'}"></div>
```

1.2.2.v-model

v-modal 可以让数据和视图双向绑定，快速获取或者设置表单元素内容

<!-- input框值变化，data中对应的数据也会变化 -->
<input type="text" v-model="username"><br>

对于不同的表单元素， v-modal 的绑定也有所不同

表单元素	绑定	备注
输入框	value	text
文本域	value	textarea
复选框	checked	checkbox
单选框	checked	radio，name将单选框关联
下拉菜单	selected元素中，option选项的value值	selected、option

1.2.3.常用事件

事件	触发
`@click`	单击触发
`v-model`	常用于绑定input事件
`@submit`	表单提交触发
`@mouseover`	鼠标悬停触发
`@mouseout`	鼠标移开触发

焦点事件

事件触发
@focus 元素获得焦点
@blur 元素失去焦点
表单事件

事件触发
@reset 点击重置按钮时
@submit 点击提交按钮
键盘事件

事件触发
@keydown 按下任意按键。
@keypress 除 Shift、Fn、CapsLock 外的任意键被按住。
@keyup 按键弹起

事件	触发
`@focus`	元素获得焦点
`@blur`	元素失去焦点

事件	触发
`@reset`	点击重置按钮时
`@submit`	点击提交按钮

事件	触发
`@keydown`	按下任意按键。
`@keypress`	除 Shift、Fn、CapsLock 外的任意键被按住。
`@keyup`	按键弹起

1.2.4.指令修饰符

按键修饰符
- @keyup.enter：键盘回车监听
v-model修饰符
- v-model.trim：去首尾空格
- v-model.number：转数字
事件修饰符
- 事件名.stop：阻止冒泡
- 事件名.prevent：阻止默认行为
其他
- once：事件只触发一次

1.3.计算属性

计算属性会对计算结果缓存，依赖项变了，会自动重新计算，并再次缓存，缓存可以被直接读取（性能高）

1.methods属性

<p>礼物总数：{{ total() }} 个</p>
<p>礼物总数：{{ total() }} 个</p>
<p>礼物总数：{{ total() }} 个</p><!-- js中 -->
data: {list: [{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]
},
methods: {total() {console.log("执行了一次。");return this.list.reduce((sum, item) => sum + item.num, 0)}
}

控制台会打印三次"执行了一次。"

computed属性

 <!-- 计算属性依旧是属性,不用加（） -->
<p>礼物总数：{{ total }} 个</p>
<p>礼物总数：{{ total }} 个</p>
<p>礼物总数：{{ total }} 个</p><!-- js中 -->
computed: {封装一段对于数据的处理，求得一个结果total() {console.log("执行了一次。");return this.list.reduce((sum, item) => sum + item.num, 0)}
}

控制台会打印一次"执行了一次。"

1.3.1.计算属性的完整写法

计算属性默认只能访问，不能修改，如果要修改，需要计算属性的完整写法

computed:{fullName（）{return this.firstName + this.lastName}
}

以上写法等价于

computed:{fullName:{get(){return this.firstName + this.lastName}}
}

上面写法只能通过监听firstName和lastName，来动态改变fullName的值
现在假设fullName会变化，我们fullName变化时，有对firstName和lastName进行拆分的需求，就需要计算属性的完整写法

computed:{fullName:{// 监听firstName和lastName，动态改变fullName的值get(){return this.firstName + this.lastName},// 监听fullName，动态改变firstName和lastName的值set(value){this.firstName = value.slice(0,1))this.lastName = value.slice(1)}}
}

从上面可以看出，set方法的形参value为fullName的值

当然除了改变firstName和lastName的值，还可以做出其他的一些操作，这里就不一一例举了

1.3.2.【案例】成绩

成品图

<!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>{{item.id}}</td><td>{{item.subject}}</td><td :class="{red:item.score<60}">{{item.score}}</td><td><a href="#" @click="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>总分:{{total}}</span><span style="margin-left: 50px">平均分:{{average}}</span></td></tr></tfoot></table></div><div class="form"><div class="form-item"><div class="label">科目：</div><div class="input"><input type="text" placeholder="请输入科目" v-model="subject" /></div></div><div class="form-item"><div class="label">分数：</div><div class="input"><input type="text" placeholder="请输入分数" v-model="score" /></div></div><div class="form-item"><div class="label"></div><div class="input"><button class="submit" @click="add">添加</button></div></div></div></div><script src="../../vue/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, subject: '语文', score: 20 },{ id: 2, subject: '数学', score: 99 },{ id: 3, subject: '英语', score: 70 },],subject: '',score: ''},methods: {del(id) {this.list = this.list.filter(item => item.id !== id)},add() {if (!this.subject || !this.score) {alert('没有输入科目或者分数！！！')} else {// 往数组前面加this.list.unshift({// 以时间戳作为id,来设置keyid: +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} else {return this.total / (this.list.length)}}}})</script>
</body></html>

重要知识点

删除逻辑
```
 del(id) {this.list = this.list.filter(item => item.id !== id)},
```
- 通过点击触发del方法，传入id
- 通过filter，从list过滤出和被点击项的id不同的id项，重新赋值给list（即从list删除点击项）

求和逻辑

  total() {return this.list.reduce((sum, item) => sum + item.score, 0)},

reduce累加器的运用

加入数组
- 往数组前面加：unshift(）方法
- 往数组后面加：push(）方法

1.4.watch

1.4.1.watch属性

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

watch:{//  该方法会在数据变化时调用执行// newValue新值, oldValue老值（一般不用） words(newValue, oldValue) {console.log('变化了', newValue,, oldValue)}
}

以上代码监听了data里的数据words，如果我们要监听data里obj对象属性words，则应该写为 'obj.words'

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

1.4.2.翻译业务实现

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

知识点

防抖处理

1.4.3.watch属性的完整写法

额外配置项

配置项效果
deep:true 深度监视，对象的子元素变化也会触发
immediate:true 初始化立即执行一次

配置项	效果
`deep:true`	深度监视，对象的子元素变化也会触发
`immediate:true`	初始化立即执行一次

上面的翻译业务实现还可以升级为，通过改变翻译语言也会触发watch监听

对象obj有属性words和属性language
对象进行深度监视，对象的任何一个属性（words和language）发生变化，都会触发重新翻译

watch: {obj: {deep: true,         // 深度监视immediate: true,    // 立即执行handler(newValue) {clearTimeout(this.timerId)this.timerId = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: newValue})this.result = res.data.data}, 300)}},
}

1.4.4.【案例】水果购物车

成品图：
js代码

const dedaultArr = [{id: 1,icon: 'img/火龙果.png',isChecked: true,num: 1,price: 6,},{id: 2,icon: 'img/荔枝.png',isChecked: false,num: 1,price: 20,},{id: 3,icon: 'img/榴莲.png',isChecked: false,num: 1,price: 40,},{id: 4,icon: 'img/鸭梨.png',isChecked: true,num: 1,price: 3,},{id: 5,icon: 'img/樱桃.png',isChecked: false,num: 1,price: 32,},
]
const app = new Vue({el: '#app',data: {// 水果列表bannerSrc: 'img/fruit.jpg',fruitList: JSON.parse(localStorage.getItem('list')) || dedaultArr},methods: {del(id) {return this.fruitList = this.fruitList.filter(item => item.id != id)}},computed: {// 计算选中个数totalCount() {return this.fruitList.reduce((sum, item) => {if (item.isChecked) {return sum + item.num} else {return sum}}, 0)},// 计算总价totalPrice() {return this.fruitList.reduce((sum, item) => {if (item.isChecked) {return sum + item.num * item.price} else {return sum}}, 0)},all: {get() {// return的值决定全选框是否勾选// 必须所有框都选中，全选按钮才选中（every）return this.fruitList.every(item => item.isChecked)},set(value) {// 全选按钮的value影响其他框this.fruitList.forEach(item => item.isChecked = value);}}},watch: {fruitList: {deep: true,handler(newValue) {localStorage.setItem('list', JSON.stringify(newValue))}}}
})

部分html代码展示

<div class="tbody"><div class="tr active" v-for="(item,index) in fruitList"><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="item.num--"> - </button><span class="my-input__inner">{{item.num}}</span><button class="increase" @click="item.num++"> + </button></div></div><div class="td">{{item.num*item.price}}</div><div class="td"><button @click="del(item.id)">删除</button></div></div>
</div><!-- 底部 -->
<div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" v-model="all" />全选</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>

知识点：

全选框逻辑
1. fruitList里添加属性isChecked来标记item项是否勾选
2. 再通过v-model="item.isChecked”将isChecked和每个子checkbox绑定，即checkbox和勾选状态关联
3. 如果子checkbox发生变化，调用get()
4. 再通过every检查fruitList里的item.isChecked是否全为true，即检查是否全勾选
5. 如果全勾选，返回true，通过v-model="all"反作用于全选的checkbox，使其勾选
6. 如果全选的checkbox发生变化，调用set()，并通过形参value传入all的值
7. 通过forEach，将所有子checkbox的isChecked设置为和all一样的值

1.5.生命周期

在不同的生命周期，会自动运行一些函数，被称为生命周期钩子，让开发者可以在特定阶段运行代码

生命周期四个阶段

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例
生命周期钩子

1.5.1.【应用】初始化渲染

在created生命周期，发送获取数据的请求

const app = new Vue({el: '#app',data: {list: []},async created() {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')// 2.将获取的数据写入数据列表this.list = res.data.data}
})
</script>

1.5.2.【应用】获取焦点

在mounted生命周期，获取焦点(操作dom)

const app = new Vue({el: '#app',data: {words: ''},mounted() {document.querySelector('#inp').focus()}
})

【Vue-vue基础知识】学习笔记

目录 <<回到导览vue基础知识1.1.创建一个vue实例1.2.vue基础指令1.2.1.v-bind1.2.2.v-model1.2.3.常用事件1.2.4.指令修饰符 1.3.计算属性1.3.1.计算属性的完整写法1.3.2.【案例】成绩 1.4.watch1.4.1.watch属性1.4.2.翻译业务实现1.4.3.watch属性的完整写法1.4.4.【案例…...

编程日记 2026/1/25 20:57:42

Oracle 数据库查询表广播

在 Oracle 数据库中，查询表广播（Broadcast Table）是一种优化分布式查询性能的机制，尤其在并行处理（Parallel Execution）或分布式架构（如 Oracle RAC、Sharding）中。其核心原理是通过…...

编程日记 2025/12/29 13:49:00

JavaScript学习教程，从入门到精通，JavaScript 快速入门指南（4）

JavaScript 快速入门指南在HTML中引入JavaScript 语法知识点： 内部JavaScript：使用<script>标签直接嵌入HTML中外部JavaScript：通过<script src"file.js">引入外部文件推荐将脚本放在<body>末尾或使用defer属…...

编程日记 2026/1/14 15:18:21

网络安全应急响应-文件痕迹排查

在Windows系统的网络安全应急响应中，文件痕迹排查是识别攻击行为的关键步骤。以下是针对敏感目录的详细排查指南及扩展建议： 1. 临时目录排查（Temp/Tmp） 路径示例： C:\Windows\TempC:\Users\<用户名>\AppData\L…...

编程日记 2026/1/30 17:09:47

C++ 提高编程下

C提高编程 set/multiset 容器set 基本概念set 构造和赋值set 大小和交换set 插入和删除set 查找和统计set 和 multiset 的区别pair 对组创建set 容器排序 map/multimap 容器map 基本概念map 构造和赋值map 大小和交换map 插入和删除map 查找和统计map 容器排序案例——员工分组…...

编程日记 2026/1/13 9:31:35

【Linux网络】网络套接字socket

🌈个人主页：秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343 🔥 系列专栏：https://blog.csdn.net/qinjh_/category_12891150.html 目录 Socket 编程预备理解源 IP 地址和目的 IP 地址认识端口号端口号范围划分…...

编程日记 2026/1/25 19:29:14

tomcat的负载均衡和会话保持

写你的想写的东西，写在tomcat的默认发布目录中这里写了一个jsp的文件访问成功可以用nginx实现反向代理 tomcat负载均衡实现： 这里使用的算法是根据cookie值进行哈希，根据ip地址哈希会有问题.如果是同一台主机再怎么访问都是同一个ip。 t…...

编程日记 2026/1/31 0:18:06

ffmpeg基础知识入门

文章目录 📦 1. **容器（Container）**✅ 定义：✅ 举例：✅ 功能： 📶 2. **媒体流（Stream）**✅ 定义：✅ 举例：✅ 流和容器关系： &#x1…...

编程日记 2026/1/26 21:17:47

c++项目网络聊天服务器实现；QPS测试

源码 https://github.com/DBWGLX/SZU_system_programming 文章目录技术设计编码JSON的替换Protobuf 网络线程池更高效率网络字节序的考虑send可能无法一次性发送全部数据！EPOLLHUP , EPOLLERR 的正确处理 IO数据库操作的更高性能开发日志2025.3a.粘包问题 2025.4b…...

编程日记 2026/1/31 18:29:16

rnn的音频降噪背后技术原理

rnniose: 这个演示展示了 RNNoise 项目，说明了如何将深度学习应用于噪声抑制。其核心理念是将经典的信号处理方法与深度学习结合，打造一个小巧、快速的实时噪声抑制算法。它不需要昂贵的 GPU —— 在树莓派上就能轻松运行。相比传统的噪声抑制系统&…...

编程日记 2026/2/1 19:23:13

Python项目打包指南：PyInstaller与SeleniumWire的兼容性挑战及解决方案

前言前段时间做一个内网开发的需求，要求将selenium程序打包成.exe放在内网的win7上运行，在掘金搜了一圈也没有发现相关文章，因此将过程中踩到的坑记录分享一下。本文涵盖了具体打包操作、不同模块和依赖项的兼容性解决方案，以…...

编程日记 2025/11/1 20:56:05

【题解】AtCoder AT_abc400_c 2^a b^2

题目大意我们定义满足下面条件的整数 X X X 为“好整数”： 存在一个正整数对 ( a , b ) (a,b) (a,b) 使得 X 2 a ⋅ b 2 X2^a\cdot b^2 X2a⋅b2。给定一个正整数 N N N（ 1 ≤ N ≤ 1 0 18 1\le N\le 10^{18} 1≤N≤1018）&#xff…...

编程日记 2025/11/1 1:07:28

ubuntu 配置固定ip

在装服务器系统的时候，DHCP自动获取ip时，路由可能会重新分配ip，为避免产生影响，可以关闭DHCP将主机设置为静态ip。系统环境 Ubuntu 22.04-Desktop 配置方式一、如果是装的Ubuntu图形化（就是可以用鼠标操作点击应用…...

编程日记 2026/1/25 2:20:03

基于Coze平台实现工程项目管理SaaS软件的在线化客户服务

一、引言在数字化转型浪潮下，SaaS（软件即服务）模式已成为企业级软件的主流交付方式。然而，随着用户规模的增长，传统人工客服模式面临响应速度慢、人力成本高、知识库更新滞后等痛点。如何利用AI技术实现客户服务的智…...

编程日记 2026/1/26 0:20:39

vue3实现markdown工具栏的点击事件监听

这里以监听全屏事件为例监听 Vditor 编辑器的全屏事件要监听 Vditor 编辑器的全屏事件，你可以使用 Vditor 提供的 API 和事件系统。以下是几种实现方法： 方法一：使用 Vditor 的 after 钩子函数 const vditor new Vditor(editor, {afte…...

编程日记 2025/8/24 2:19:31

QT ARM开发板调试

QT 应用程序在 ARM 开发板上完全可以进行调试。以下是完整的调试方案和配置方法： 1. 调试方式概览调试方式适用场景所需工具特点GDB 远程调试代码级调试gdbserver gdb-multiarch最强大的调试方式QT Creator 远程调试集成开发环境调试QT Creator gdbserver开发体…...

编程日记 2025/8/24 19:00:44

OpenCV 图形API（21）逐像素操作

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述在OpenCV的G-API模块中，逐像素操作指的是对图像中的每个像素单独进行处理的操作。这些操作可以通过G-API的计算图（Graph …...

编程日记 2025/5/31 18:01:07

报错信息如下 com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failureThe last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.at com.mysql.cj.jdbc.exceptions.SQ…...

编程日记 2025/7/10 22:58:49

目录