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

前端入门之VUE--基础与核心

news 文章来源：https://blog.csdn.net/weixin_74085818/article/details/144014606 2025/5/5 9:42:04

前言

VUE是前端用的最多的框架；
这篇文章是本人大一上学习前端的笔记；
欢迎点赞 + 收藏 + 关注，本人将会持续更新。

Vue学习笔记

用于构建用户界面的渐进式框架

构建用户界面：基于数据动态渲染页面
渐进式：循序渐近的学习
框架：一套完整项目解决方案

1、Vue核心

1.1、vue实例配置对象

选项	说明
data	Vue实例数据对象
methods	定义Vue实例中的方法
components	定义子组件
computed	计算属性
filter	过滤器
el	唯一跟标签
watch	监听数据变化

1.2、初始Vue

想让Vue工作，就必须创建一个Vue实例，并且要传入一个配置对象
root容器里的代码依然符合html规范
Vue模板：root容器中的代码
{{xxxx}}中的xxx表达式要写js表达式
实际开发中只有一个Vue实例

<-->引入Vue</-->
<script src=""></script><body><-->准备好一个容器</--><div id="root"><h2>hello! {{name}}</h2></div><script>var vm = new Vue({el: '#root',           //唯一标签data: {name: 'wy'         //data储存数据}})</script>
</body>

1.3、模板语法

<script src="vue.js文件地址"></script><body><div id="root"><h1>插值语法</h1><h3>hello {{name}}</h3><h1>指令语法</h1><a v-bind:href="ur1">邓紫棋</a><-->b-vind：  的简写形式  :href</--></div>
</body>

总结：

插值语法：
- 用于解析标签内容
指令语法：
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）
- :href是v-bind:href的简写形式
- 备注：Vue中的很多指令都是v-???形式

1.4、数据绑定

<script src=""></script><body><div id="root">单项数据绑定：<input type="text" v-bind:value="name">双向数据绑定：<input type="text" v-bind:value="name"></div><script>const vm = new Vue({el: '#root',data: {name: 'wqy'}})</script>
</body>

总结：

Vue的2种数据绑定
1. 单项数据绑定(v-bind): 数据只能从data流向页面
2. 双向数据绑定(v-model)：数据既可以从data流向页面，还可以从页面流向data
技巧：
1. 双向绑定都应用在表单类元素上，(如： \ 等)
2. v-model:value简写成v-model

1.5、el和data的两种写法

<script>const vm = new Vue({//1.el: '#root',data: {}//data的第二种写法data() {}})//el的第二种写法vm.$mount('#root')
</script>

总结；

data有两种写法：
1. 对象式
2. 函数式

注意：Vue管理的函数，一定不要写出箭头函数，否则this就不再是Vue实例了

1.6、MVVM模型

在这里插入图片描述

总结：

data中所有属性，最后都出现在vm上

1.8、事件处理

1.8.1、事件的基本用法

<script src=""></script><body><div id="root"><h2>hello , {{name}}</h2><boutton v-on:click="showIndo1">点我提升信息一               </boutton><button @click='showIno2(66)'>点我提示信息二</button></div><script>const vm = new Vue({el: '#root',data: {name: 'wy'}methods: {showIno1(event) {console.log(event);}showIno2(num) {console.log(num);}}})</script>
</body>

总结：

使用v-on:xxx或者**@xxx**绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最总会出现在vm上
methods中配置函数，不要使用箭头函数
methods中配置的函数，都是被Vue所管理的函数，this指向是vm或者实例化对象
@click="demo和@click="demo($event)"效果一致，但后者可以传参

1.8.2、事件修饰符

prevent:阻止默认事件（常用）
stop:阻止事件冒泡（常用）
once:事件只触发一次(常用)
capture:使用事件捕获(执行顺序是有外部到内部 P31页)
self: 只有event.target是当前操作的元素时才触发事件，简单理解：只触发自己本身的元素
passive: 事件的默认行为为立即执行函数

技巧：修饰符可以连续写： @click.prevent.stop=“show”

1.8.3、键盘事件

<script  src=""></script><body><div id="root"><input type="text" @keydow.enter="show"></div><body>const vm = new Vue({el: '#root',methods: {show(e) {console.log(e.target.value)}}})</body>
</body>

总结：

键盘上的每个按键都有自己的名称和编码，例如：Enter（13）。而Vue还对一些常用按键起了别名方便使用

Vue中常用的按键名：

回车：enter
删除：delete
退出：src
换行： tab（必须结合keydown使用）
上：up
下：down
左：left
右：right

注意：

系统修饰符：ctrl shifr alt
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
- 配合keydown使用：正常触发事件
Vue.config.keyCodes.自定义键名 = 键码，可以自定义键别名

1.9、计算属性

<script src=""></script><body><div id="root">姓：<input type="text" v-model="firstName"><br>名： <input tyep="text" v-model="lastName"><br>姓名：<span>{{fullName}}</span></div><script>const vm = new Vue({el: '#root',data: {firstName: '张'，lastName: '三'},computed: {fullName: {get() {return this.firstName + '-' +lastName}set(vaule) {const arr = value.split('-'),this.firstName = arr[0];this.lastName = arr[1]}}}})</script>
</body>

总结：

计算属性：
- 定义：要用的属性不存在，需要计算的来
- 原理：Object.defineProperty()
- get函数(重要)：
  1. 当初读取时会执行一次
  2. 依赖数据改变时会再次调用
备注：
- 计算属性最后会出现在vm上
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发送改变
- 如果计算属性不发生修改，简写形式为：

<script>new Vue({el: '#root',data: {firstName: '张'，lastName: '三'},computed: {fullName() [return this.firstName + '-' + this.lastName]}})
</script>

1.10、监视属性

1.10.1、监视属性的基本用法

<body><div id="root"><h2>今天天气好{{info}}</h2><button @click="changeWeather">点击切换天气</button></div><script>new Vue({el: '#root',data: {isHot: true,},computed: {info() {return this.isHot ? '炎热' ： '凉爽'}}，methods: {changeWeather() {this.isHot = !this.isHot}},watch: {isHot: {immdiate: true,  //初始化时让handler调用一下//当isHot改变时会调用handler(newVaule,oldValue) {console.log(newValue,oldValue)}} }})</script>
</body>

总结：

当监视的属性被变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视
两种写法：
1. 同上
2. 同下：

vm.$watch('isHot',{immediate:true,handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}
})

1.10.2、深度监视

深度监视：
1. Vue中的watch默认不监视对象内部的值
2. 改变：deep: true

<body><div id="root"><h3>a的值为:{{number.a}}</h3><-->简单的代码可以这样操作</--><button @click="number.a++">点我a加 1 </button<h3>b的值为：{{number.b}}</h3><button @click="number.b++">点我b加 1</button></div><script>const vm = new Vue({el: '#root',data: {number: {a:1,b:2,}},watch: {number: {deep: true,handler() {console.log('number改变了')}}}})</script>
</body>

1.10.4、监听属性 vs 计算属性

computed和watch之间的区别：
- computed可以完成的东西，watch都可以完成
- 但是watch可以完成的东西，computed不一定能完成，如：watch可以进行异步操作
两个重要原则：
1. 所有被Vue管理的函数，最好写出普通函数
2. 不被Vue管理的函数，最好写出箭头函数，如：计算器

使用计算属性：

<body><div id="root">姓：<input type='text' v-model='firstName'>名：<input type='text' v-model='lastName' >姓名：{{fullname}}</div><script>const vm = new Vue({el: '#root',data: {firstName = '张',lastName = '三'},conputed: {fullName: {get() {return this.firstName + this.lastName;}set(value) {let arr = fullName.split('-');this.firstName = arr[0];this.lastName = arr[1];}}},})</script>
</body>

使用监视属性：

<script>new Vue({el: '#root',data: {firstName: '张',lastName: '三'，fullName: '张-三'},watch: {firstName: {handler(val) {setTimeout(()=>{this.fullName = val + '-' + lastName;},1000)},lastName: {handler(val) {this.fullName = this.firstName + '-' + val;}}}}})
</script>

1.11、绑定样式

写法：

<body><div id="root">绑定class样式--字符串写法，通用于类名不确定，需要动态指定<div class="basic" :class="mood"' @click="changeMood"></div><br>绑定class样式--数组写法，适用于：要绑定的样式个数不确定，<div class="basic" :class="classArr"></div><br>绑定class样式---对象写法，适用于：要绑定的样式个数不确定、名字确定<div class="basic" :class="classObj"></div><br>绑定style样式--对象写法 <div class="basic" :style="styleObj"></div><br>绑定style样式--数组写法 <div class="basic" :style="styleArr"></div><br></div>
</body>

总结：

class样式：
- 写法：class="xxx"，xxx可以是字符串、对象、数组
- 字符串写法适用于：类名不确定，要动态获取
- 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
- 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
style样式：
- :style="{fontSize: xxx}"其中xxx是动态值
- :style="[a,b]"其中a、b是样式对象

1.12、条件渲染

v-if：
- 写法：
  1. v-if
  2. v-else-if
  3. v-else
v-show:
- 写法：
  - v-show=“表达式”

<body><div id="root"><h2 v-show="true">hello</h2><div v-if="2===1"></div> <br><div v-else-if="3===1"></div> <br><div v-else></div> </div>
</body>

1.13、列表渲染

1.13.1、基本列表

v-for

<body><div id="root"><h2>人员列表（遍历数组）</h2><ul><li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}</li></ul><h2>汽车信息（遍历对象）</h2><ul><li v-for="(value,k) in car" :key="k">{{k}}-{{value}}</li></ul><h2>遍历字符串</h2><ul><li v-for="(char,index) in str" :key="index">{{char}}-{{index}}</li></ul><h2>遍历指定次数</h2><ul><li v-for="(number,index) in 5" :key="index">{{index}}-{{number}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{persons:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}],car:{name:'奥迪A8',price:'70万',color:'黑色'},str:'hello'}})</script></body>
</html>

总结:

v-for指令：

用于展示列表数据
语法：
，key既可以是index，也可以是遍历数组的唯一标识
可遍历：数组、对象、字符串、指定次数

1.13.2、key的作用与原理

在这里插入图片描述

<body><div id="root"><h2>人员列表</h2><button @click.once="add">添加老刘</button><ul><li v-for="(p,index) in persons" :key="index">{{p.name}} - {{p.age}}<input type="text"></li></ul></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{persons:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}]},methods: {add(){const p = {id:'004',name:'老刘',age:40}this.persons.unshift(p)}},})</script>
</html>

1.13.3、列表过滤

<body><div id="root"><h2>人员列表</h2><input type="text" v-model="keyWord"><ul><li v-for="(p,index) of filPersons" :key="index"></li>{{p.name}} - {{p.age}} - {{p.sex}}</ul></div><script>new Vue({el: '#root',data: {keyWord: '',persons: [{id:'001',name:'马冬梅',age:19,sex:'女'},{id:'002',name:'周冬雨',age:20,sex:'女'},{id:'003',name:'周杰伦',age:21,sex:'男'},{id:'004',name:'温兆伦',age:22,sex:'男'}]},computed: {filPersons() {return this.person.filter((p) => {return                    p.name.indexOf(this.keyWord) !== -1;}}}})</script>
</body>

注意：在Vue修改数组请用下面方法：

使用这些API：**push() \ pop() \ shift() \ splice() \ sort() \ reserse() **，这些才会更新，用[]不会，但是vue3可以

1.15、过滤器

定义：对要显示的数据进行特定格式化处理后再显示
语法：
1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2. 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

具体使用请看视频

1.16、内置指令

v-model	双向数据绑定
v-on	监听事件
v-bind	单项数据绑定
v-text	插入文本内容
v-html	插入包含html的文本内容
v-for	列表渲染
v-if	条件渲染
v-show	显示隐藏

v-text:

v-text会替换掉节点中的内容，但是{{xx}}则不会

v-html：（有安全隐患）

v-html会替换掉节点中所有的内容，但是{{xx}}则不会
v-html可以识别html结构

v-clock指令

没有值：
{{name}}
配合css解决配速慢的问题
一个特殊值，Vue实例创建完毕后，会删掉v-clock

v-once指令

v-所在节点在初次渲染后，就视为静态内容

<div id="root"><h2 v-once>n的值为{{n}}</h2><h2>n现在的值为{{n}}</h2><button @click="n++">点我n+1</button>
</div>

v-pre

可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
Vue其实很简单

1.17、自定义指令

局部指令：

<script>new Vue({directives: {指令名：配置对象}})
</script>

<script>new Vue({directives: {指令名：回调函数}})
</script>

全部指令：
1. Vue.directive(指令名,配置对象)
2. Vue.directive(指令名，回调函数)

<script>Vue.directive('find'，{//指令与元素一上来就绑定成功bind(element,binding){element.value = bind.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()}//指令所在的模板被重新加载时update(element,binding) {element.value = binding.value}})
</script>

配置对象中常用的3个回调函数
1. bind(element,binding)：指令与元素成功绑定时调用
2. inserted(element,binding)：指令所在元素被插入页面时调用
3. update(element,binding)：指令所在模板结构被重新解析时调用
注意：
- 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

1.18、生命周期

在这里插入图片描述

总结：

常用生命周期钩子：

mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾工作

前端入门之VUE--基础与核心

前言 VUE是前端用的最多的框架；这篇文章是本人大一上学习前端的笔记；欢迎点赞收藏关注，本人将会持续更新。 Vue学习笔记用于构建用户界面的渐进式框架构建用户界面：基于数据动态渲染页面渐进式：循序渐近的学…...

编程日记 2024/11/25 13:03:46

logback 初探学习

logback 三大模块记录器（Logger）、追加器（Appender）和布局（Layout） 配置文件外层最基本的标签如图示 xml中定义的就是这个三个东西下面进入学习包引入参考springboot 官方文档 Logging :: Spring Boo…...

编程日记 2024/11/25 13:02:45

在Elasticsearch中，是怎么根据一个词找到对应的倒排索引的？

大家好，我是锋哥。今天分享关于【在Elasticsearch中，是怎么根据一个词找到对应的倒排索引的？】面试题。希望对大家有帮助； 在Elasticsearch中，是怎么根据一个词找到对应的倒排索引的？ 在 Elasticsearch 中…...

编程日记 2024/11/25 13:01:43

1992-2021年各省市县经过矫正的夜间灯光数据（GNLD、VIIRS）区域汇总：省份、城市、区县面板数据

1992-2021年各省市县经过矫正的夜间灯光数据（GNLD、VIIRS）区域汇总：省份、城市、区县面板数据 .r.rar https://download.csdn.net/download/2401_84585615/90001905 从1992年至2021年，中国各省份、城市及区县的夜间灯光数据经过…...

编程日记 2024/11/25 12:59:41

linux实战-黑链——玄机靶场

黑链的特征： 隐藏链接：黑链通常隐藏在网站页面中，使用CSS、JavaScript或其他手段使其对普通用户不可见，但仍然能被搜索引擎爬虫检测到。恶意内容：这些链接指向的内容可能包含恶意软件、钓鱼页面或其他不良内容&#x…...

编程日记 2024/11/25 12:58:41

鸿蒙NEXT开发案例：字数统计

【引言】本文将通过一个具体的案例——“字数统计”组件，来探讨如何在鸿蒙NEXT框架下实现这一功能。此组件不仅能够统计用户输入文本中的汉字、中文标点、数字、以及英文字符的数量，还具有良好的用户界面设计，使用户能够直观地了解输入文本…...

编程日记 2024/11/25 12:57:40

uniapp vue2项目迁移vue3项目，必须适配的部分一、main.js 创建应用实例 // 之前 - Vue 2 import Vue from vue import App from ./App Vue.config.productionTip false // vue3 不再需要 App.mpType app // vue3 不再需要 const app new Vue({ ...App }) …...

编程日记 2024/11/25 12:49:33

16.C++STL 3(string类的模拟，深浅拷贝问题)

⭐本篇重点：string类的模拟，自己实现一个简单的string类 ⭐本篇代码：c学习/05.string类的学习橘子真甜/c-learning-of-yzc - 码云 - 开源中国 (gitee.com) 目录一. 经典string类的模拟 1.1 深浅拷贝问题 1.2 使用深拷贝完成经典string类的…...

编程日记 2024/11/25 12:48:32

神经网络10-Temporal Fusion Transformer (TFT)

Temporal Fusion Transformer (TFT) 是一种专为时序数据建模而设计的深度学习模型，它结合了Transformer架构和其他技术，旨在有效地处理和预测时序数据中的复杂模式。TFT 于 2020 年由 Google Research 提出，旨在解决传统模型在时序预测中的一…...

编程日记 2024/11/25 12:47:31

“iOS profile文件与私钥证书文件不匹配”总结打ipa包出现的问题

目录文件和证书未加载或特殊字符问题证书过期或Profile文件错误确认开发者证书和私钥是否匹配创建证书选择错误问题申请苹果 AppId时勾选服务不全问题总结在上线ios平台的时候，在Hbuilder中打包遇见了问题，生成ipa文件时候，一…...

编程日记 2024/11/25 12:46:30

《图像梯度与常见算子全解析：原理、用法及效果展示》

简介:本文深入探讨图像梯度相关知识，详细介绍图像梯度是像素灰度值在不同方向的变化速度，并以 “pig.JPG” 图像为例，通过代码展示如何选取图像部分区域并分析其像素值以论证图像梯度与边缘信息的关联。接着全面阐述了 Sobel 算子&#xff0c…...

编程日记 2024/11/25 12:44:28

【c++篇】：探索c++中的std::string类--掌握字符串处理的精髓

✨感谢您阅读本篇文章，文章内容是个人学习笔记的整理，如果哪里有误的话还请您指正噢✨ ✨ 个人主页：余辉zmh–CSDN博客 ✨文章所属专栏：c篇–CSDN博客文章目录前言一.std::string对象的创建二.std::string对象的访问三.std::str…...

编程日记 2024/11/25 12:42:26

LlamaIndex ollama 搭建本地RAG应用，建立本地知识库

目录简介安装前的准备下载ollama创建llamaindex conda环境，为后面编码作准备环境变量迁移ollama到其他盘运行ollama方式一方式二禁止ollama开机自启动运行第一个模型 Chatbox聊天下载Chatbox配置ollama地址和模型验证建立自身特定知识数据搭配大语言模型创建项目…...

编程日记 2024/11/25 12:41:24

draggable的el-dialog实现对话框标题可以选择

请看图这个对话框使用了el-dialog并且draggable属性设置成了true，所以标题栏这里就可以拖动，现在用户想选中标题栏的文本进而复制。我看到这个需求头都大了。我能想到的方案有三个：1. 取消draggable为true 2. 标题文案后面加一个复制按钮 …...

编程日记 2024/11/25 12:40:23

2024年Android面试总结

2024年Android面试总结 1.动画类型有哪些？插值器原理？ 2.StringBuffer和StringBuilder区别？ 3.jvm内存模型？ 4.线程池7大核心参数及原理？ 5.Android多进程通信方式有哪些？各自的优缺点？ 6…...

编程日记 2024/11/25 12:37:18

树莓派3:64位系统串口(UART)使用问题的解决方法

前言当我们要使用串口进行zigbee的短距离通信时,发现无法使用串口. 原因树莓派3bCPU内部有两个串口,一个硬件串口(就是我们平时使用的UART),还有一个迷你串口(mini-uart),在老版本的树莓派中把硬件串口分配在GPIO上,可以单独使用.但是在新的树莓派中官方把硬件串口给了蓝牙…...

编程日记 2024/11/25 12:35:15

SemiDrive E3 硬件设计系列---唤醒电路设计

一、前言 E3 系列芯片是芯驰半导体高功能安全的车规级 MCU，对于 MCU 的硬件设计部分，本系列将会分模块进行讲解，旨在介绍 E3 系列芯片在硬件设计方面的注意事项与经验，本文主要讲解 E3 硬件设计中唤醒电路部分的设计。二、RTC 模…...

编程日记 2024/11/25 12:32:11

淘宝接口高并发采集核心要点解读，开启电商数据智能应用新纪元

一、引言在电商蓬勃发展的今天，淘宝作为全球知名的电商巨头，其平台上的数据犹如一座蕴藏无限价值的宝藏。准确且高效地采集淘宝接口数据，并通过高并发技术实现大规模数据获取，对于电商企业的精准营销、市场趋势分析、竞品监测以及…...

编程日记 2024/11/25 12:31:10

C#里怎么样快速使用LINQ实现查询？

C#里怎么样快速使用LINQ实现查询？在C#里使用LINQ，是一个方便的功能，不过，要学会使用这部分的功能，需要比较多的学习时间，否则，使用起就比较难。因为它的表现方式，与编程语言通用的功能，还是差别比较大。当数据量比较小，没有特定的顺序时，使用LINQ访问会比较好…...

编程日记 2024/11/25 12:30:09

2024新版微软edge浏览器输入百度网址时自动补全tn=68018901……小尾巴的解决

以前一直是Windows11 21h2版本，浏览器内输入baidu不会自动补全tnxx的百度推广小尾巴。然后前几天在BIOS内开启了tpm2.0，升级Windows11到了24h2版本。发现在edge浏览器内只要输入b，就会自动补全为baidu.com?tnXXX的这么一个百度推广形式。开…...

编程日记 2024/11/25 12:28:04

uni-app打包H5自定义微信分享

1、配置分享信息修改uni-app的index.html，添加Open Graph（OG）标签来配置分享信息。 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="description" content="标题"/>…...

编程日记 2024/11/25 12:26:00

大模型专栏--大模型应用场景

紧接着第一篇，什么是大模型，这篇文章讨论一下大模型的应用场景和应用方式有哪些？ 基础使用随着 GPT 的出现，AI 大模型已经越来越多得出现在日常生活和学术研究，工作中。按照使用方向有以下几种： 自然语…...

编程日记 2024/11/25 12:24:56

骑砍2霸主MOD开发(29)-顶点动画

一.定制化顶点动画(MorphAnimation) 定制化顶点动画用于人物Agent的面部表情. 1.创建MorphAnimation对应静态资源morph_animation.tpac 2.Agent设置对应MorphAnimation [EngineMethod("set_agent_facial_animation", false)] void SetAgentFacialAnimation(UIntPtr …...

编程日记 2024/11/25 12:14:46

-Dspring.profiles.active=dev与--spring.profiles.active=dev的区别

在Spring Boot应用程序中，-Dspring.profiles.activedev和--spring.profiles.activedev都用于指定要激活的Spring配置文件（profile），但它们在不同的环境中使用，并且有不同的作用域。 -Dspring.profiles.activedev&#…...

编程日记 2024/11/25 12:13:45

面向对象高级（2）单例设计对象与代码块

面向对象高级（2） 单例设计模式、main方法与代码块引言； 设计模式：特定环境下特定问题的处理方法。可理解为一种经典的可以参照的模板。单例设计模式则是只存在单个对象实例、且只有一种方法获取对象实例的一种设计模式。单例设…...

编程日记 2024/11/25 12:12:44

47小型项目的规划与实施

每天五分钟学Linux | 第四十七课：小型项目的规划与实施大家好！欢迎再次来到我们的“每天五分钟学Linux”系列教程。在前面的课程中，我们学习了并发编程的知识，包括如何管理和使用进程与线程。今天，我们将探讨如何规划…...

编程日记 2024/11/25 12:11:41

堤防安全监测系统方案

一、背景情况堤防是开发利用水资源和防治水灾害的重要工程措施之一，对防洪、供水、生态、发电、航运等至关重要。我国现有堤防9.8万多座，其中大中型堤防4700多座、小型堤防9.4万座，80%以上修建于上世纪50至70年代。由于堤防管护力量薄弱&am…...

编程日记 2024/11/25 12:02:32

聊聊Flink：这次把Flink的window分类(滚动、滑动、会话、全局)、窗口函数讲透

一、窗口窗口（Window）是处理无界流的关键所在。窗口将流分成有限大小的“桶”，我们可以在其上应用算子计算。Flink可以使用window()和windowAll()定义一个窗口，二者都需要传入一个窗口分配器WindowAssigner，WindowAs…...

编程日记 2024/11/25 12:00:30

mysql-分析MVCC原理

一、MVCC简介 MVCC是一种用来解决读写冲读的无锁并发控制，也就是为事务分配单增长的时间戳，为每个修改保存一个版本，版本与事务时间戳关联，读操作只读该事务开始前的数据库的快照，所以MVCC可以为数据库解决一些问题。…...

编程日记 2024/11/25 11:53:23

由于答案过大，请对a取模。取模后的答案不是原问题的答案取模有何意义呢详解

在许多情况下，处理大数时会将 a 取模，即用 a m o d m a \mod m amodm的结果代替 a a a，然后继续计算。这种做法的核心问题是：取模后的值与原问题之间的关系是否保持一致。取模后的意义在于，它在不改变问题核心特性的前…...

编程日记 2024/11/25 11:52:22

Vue学习笔记

1、Vue核心

1.1、vue实例配置对象

1.2、初始Vue

1.3、模板语法

1.4、数据绑定

1.5、el和data的两种写法

1.6、MVVM模型

1.8、事件处理

1.8.1、事件的基本用法

1.8.2、事件修饰符

1.8.3、键盘事件

1.9、计算属性

1.10、监视属性

1.10.1、监视属性的基本用法

1.10.2、深度监视

1.10.4、监听属性 vs 计算属性

1.11、绑定样式

1.12、条件渲染

1.13、列表渲染

1.13.1、基本列表

1.13.2、key的作用与原理

1.13.3、列表过滤

注意：在Vue修改数组请用下面方法：

1.15、过滤器

1.16、内置指令

v-text:

v-html：（有安全隐患）

v-clock指令

{{name}}

v-once指令

v-pre

Vue其实很简单

1.17、自定义指令

1.18、生命周期

相关文章：