首页
留言
友链
壁纸
更多
直播
追番
统计
关于
Search
1
欢迎使用 Typecho
189 阅读
2
为Joe主题增加表情包
163 阅读
3
Java的一些基础知识总结
140 阅读
4
『转载』Linux文件自动备份百度网盘
138 阅读
5
Js 音频律动
125 阅读
默认分类
Java
Java基础知识
Java面向对象
JavaWeb服务
前端三剑客
HTML
JS
Typecho
前端小结
Vue
登录
/
注册
Search
标签搜索
Java
Servlet
HTML
面向对象
Web
Vue
JS
Typecho
Typora
Markdown
乐抖系统
Typecho主题
技术教程
类与对象
基础知识
Tomcat
Maven
Linux
MySQL
Mybatis
白衣少年
累计撰写
48
篇文章
累计收到
42
条评论
首页
栏目
默认分类
Java
Java基础知识
Java面向对象
JavaWeb服务
前端三剑客
HTML
JS
Typecho
前端小结
Vue
页面
留言
友链
壁纸
直播
追番
统计
关于
用户登录
登录
注册
搜索到
48
篇
白衣少年
发布的文章
2024-11-21
Vue是如何实现数据的双向绑定的
Vue实现数据的双向绑定主要依赖于其内部的一套响应式系统,该系统结合了数据劫持、发布-订阅模式以及虚拟DOM等核心技术。以下是对Vue如何实现数据双向绑定的详细解析:一、数据劫持 :$(caidao)数据劫持是Vue实现双向绑定的基础。Vue使用ES5的Object.defineProperty()方法,将数据对象的属性转换为getter和setter,从而在数据变化时进行监听和响应。初始化数据劫持:在Vue实例初始化时,会遍历data对象的所有属性,并使用Object.defineProperty()将它们转换为getter和setter。拦截属性访问:当属性被访问时,getter会被调用,从而记录下依赖该属性的组件或DOM元素(这一步骤在发布-订阅模式的依赖收集中详细说明)。拦截属性修改:当属性被修改时,setter会被调用,从而通知所有依赖该属性的组件或DOM元素进行更新(这一步骤在发布-订阅模式的通知更新中详细说明)。二、发布-订阅模式 :$(yangtuo)发布-订阅模式(也称为观察者模式)是Vue实现双向绑定的另一个重要机制。它允许一个对象(发布者)维护一个依赖列表(订阅者),当对象的状态发生变化时,会通知所有依赖列表中的订阅者进行更新。依赖收集:当Vue实例初始化时,模板中的每个响应式数据都会被添加到一个依赖列表中。具体地,当属性被访问时(即触发getter),会将当前订阅者(通常是Watcher实例,代表一个组件或DOM元素的更新函数)添加到该属性的依赖列表中。通知更新:当数据变化时(即触发setter),会调用依赖列表中的所有订阅者进行相应的更新操作。Vue内部会遍历依赖列表,对每个订阅者调用其更新函数,从而更新视图或执行其他相关操作。三、指令解析 :$(bangbangtang)Vue使用指令(如v-model、v-bind等)来实现视图与数据的绑定。指令解析器会扫描模板中的指令,并根据指令类型绑定相应的更新函数。扫描模板:在Vue实例初始化时,指令解析器会扫描模板中的所有指令。绑定指令:根据指令类型,绑定相应的更新函数到数据属性上。例如,v-model指令会绑定一个输入事件监听器和数据属性的getter/setter,以实现双向绑定。更新视图:当数据属性发生变化时,调用更新函数,从而更新视图。这通常是通过虚拟DOM的差异对比和最小化真实DOM操作来实现的。四、响应式系统 :$(dan)Vue的响应式系统将数据劫持和发布-订阅模式结合在一起,实现了数据变化时自动更新视图的功能。初始化响应式系统:在Vue实例初始化时,响应式系统会遍历data对象,并将所有属性转换为getter和setter(即数据劫持)。收集依赖:当属性被访问时(触发getter),记录依赖该属性的订阅者(发布-订阅模式的依赖收集)。通知更新:当属性被修改时(触发setter),通知所有订阅者进行更新(发布-订阅模式的通知更新)。五、v-model指令的双向绑定实现 :$(hecai)v-model指令是Vue中实现双向数据绑定的最常见和便捷的方式。它主要用于表单控件元素上,如输入框、文本域、单选按钮、复选框和选择框等。绑定输入事件:v-model指令会为表单元素绑定一个输入事件监听器(如@input)。当用户输入内容时,会触发该监听器。更新数据属性:在输入事件监听器中,会调用Vue实例的setter方法来更新对应的数据属性。这会导致数据模型发生变化。触发视图更新:由于数据模型已经变化,Vue的响应式系统会触发依赖该数据的所有订阅者进行更新。这通常会导致视图中的相关部分被重新渲染。同时,当数据模型发生变化时(例如通过编程方式修改数据属性),Vue的setter方法也会触发相应的更新逻辑,从而更新视图中的表单元素值。这样就实现了双向数据绑定。综上所述,Vue通过数据劫持、发布-订阅模式、指令解析和响应式系统等技术手段实现了数据的双向绑定。这种机制使得开发者能够更方便地管理和更新数据,提高了开发效率和代码的可读性。六、以下是一个简单的Vue.js双向数据绑定的参考代码示例 :$(qiaoda) :<!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"> <title>Vue双向绑定示例</title> </head> <body> <div id="app"> <input type="text" v-model="message" placeholder="输入一些文字"> <p>你输入的是: {{ message }}</p> <input type="checkbox" v-model="checked"> <p>复选框被选中: {{ checked }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: '', checked: false } }); </script> </body> </html>在这个示例中: :$(xigua)我们创建了一个简单的HTML页面,其中包含一个Vue实例,该实例挂载在id为app的div元素上。在Vue实例的data对象中,我们定义了两个属性:message和checked。我们使用v-model指令将输入框的值与message属性进行双向绑定,将复选框的选中状态与checked属性进行双向绑定。当用户在输入框中输入文字时,message属性的值会自动更新,并且页面上显示的文字也会相应更新。同样,当用户选中或取消选中复选框时,checked属性的值也会自动更新,并且页面上显示的复选框选中状态也会相应更新。这个示例展示了Vue.js如何通过v-model指令实现数据的双向绑定,使得数据和视图之间的同步变得非常简单和高效。
2024年11月21日
1 阅读
0 评论
1 点赞
2024-10-11
【教程】Win10 自动更新太烦?来试试我的方法吧!!
前言每隔一段时间Win10系统就会提示需要更新,就很烦,实际功能又并没有增加多少,于是便有了以下教程1.打开注册表按住键盘上的Win+R键,输入regedit,打开注册表2.找到一下路径,并在空白处右键新建 DWORD(32位)值(D),名称为【FlightSettingsMaxPauseDays】双击新建的值,将类型改为十进制,并在左边填入你需要暂停更新的天数,以我这为例是停止更新【100000】天随后打开设置,找到更新和安全,点进去随后疯狂点击暂停更新7天,你就会发现它更新的日期被不断延后啦若是觉得文章对你有用的话不妨动动你发财的小手给我点个赞支持一下呢 :$(doge)
2024年10月11日
13 阅读
0 评论
2 点赞
2024-09-14
【教程】ALT+小键盘输出字母、数字、符号、汉字_alt加小键盘
ALT+小键盘输出字母、数字、符号、汉字_alt加小键盘在上一版本的键盘输出的情况下分享特殊键位 ALT + 组合键 输出小写a~z;大写A~Z;数字0~9;特殊符号'(','[','!'等字符ALT+NUM形式数字组合字符ALT+NUM形式数字组合字符ALT+NUM形式数字组合aALT0097AALT0065(短空格)ALT0032bALT0098BALT0066!ALT0033cALT0099CALT0067"ALT0034dALT0100DALT0068#ALT0035eALT0101EALT0069$ALT0036fALT0102FALT0070%ALT0037gALT0103GALT0071&ALT0038hALT0104HALT0072'ALT0039iALT0105IALT0073(ALT0040jALT0106JALT0074)ALT0041kALT0107KALT0075*ALT0042lALT0108LALT0076+ALT0043mALT0109MALT0077,ALT0044nALT0110NALT0078-ALT0045oALT0111OALT0079.ALT0046pALT0112PALT0080/ALT0047qALT0113QALT00810ALT0048rALT0114RALT00821ALT0049sALT0115SALT00832ALT0050tALT0116TALT00843ALT0051uALT0117UALT00854ALT0052vALT0118VALT00865ALT0053wALT0119WALT00876ALT0054xALT0120XALT00887ALT0055yALT0121YALT00898ALT0056zALT0122ZALT00909ALT0057{ALT0123[ALT0091:ALT0058\ ALT0124\ALT0092;ALT0059}ALT0125]ALT0093<ALT0060~ALT0126^ALT0094\=ALT0061无ALT0127\_ALT0095>ALT0062€ALT0128\`ALT0096?ALT0063@ALT0064 如果上面表格中有位于右上角或者左上角的那种符号不太确定的话,可以用键盘自己按住左边的Alt键+后面的数字,需要注意的是先按住Alt键,不要松开,然后按顺序按下组合数字,等待数字按完再松开Alt键。字符ALT+NUM形式数字组合字符ALT+NUM形式数字组合字符ALT+NUM形式数字组合°ALT00176ÀALT00192àALT00224±ALT00177ÁALT00193áALT00225²ALT00178ÂALT00194âALT00226³ALT00179ÃALT00195ãALT00227µALT00181ÄALT00196äALT00228·ALT00183ÅALT00197åALT00229¹ALT00185ÆALT00198æALT00230»ALT00187ÇALT00199çALT00231¼ALT00188ÈALT00200èALT00232½ALT00189ÉALT00201éALT00233¾ALT00190ÊALT00202êALT00234¿ALT00191ËALT00203ëALT00235ÍALT00204ìALT00236 ÎALT00205íALT00237 ÏALT00206îALT00238 ÐALT00207ïALT00239 字符ALT+NUM形式数字组合字符ALT+NUM形式数字组合字符ALT+NUM形式数字组合ðALT00240öALT00246üALT00252ñALT00241÷ALT00247ýALT00253òALT00242øALT00248þALT00254óALT00243ùALT00249ÿALT00255ôALT00244úALT00250 õALT00245ûALT00251 字符ALT+NUM形式数字组合字符ALT+NUM形式数字组合ω(欧米茄)Alt42712ψ(普西)Alt42711υ(宇普西龙)Alt42708τ(陶)Alt42707π(派)Alt42704ο(奥米克隆)Alt42703μ(缪)Alt42700λ(兰姆达)Alt42699θ(西塔)Alt42696η(伊塔)Alt42695δ(德尔塔)Alt42692γ(伽马)Alt42691χ(奇)Alt42710φ(法爱)Alt42709σ(西格玛)Alt42706ρ(肉)Alt42705ξ(克赛)Alt42702ν(纽)Alt42701κ(卡帕)Alt42698ι(约塔)Alt42697ζ(泽塔)Alt42694ε(爱普西龙)Alt42693β(贝塔)Alt42690α(阿尔法)Alt42689ALT+小键盘输出汉字:汉字编码在计算机中扮演着至关重要的角色,它将复杂的汉字字符转化为二进制形式以便于存储和处理。主要有三种主要的汉字编码体系:1. 国标码(GB码):这是一种四位的十六进制编码,每个汉字占用两个字节,但实际有效位只有7位,剩余的高位通常用作控制或其他用途。国标码主要用于早期的中文信息系统。2. 区位码:它基于GB2312-80字符集,使用一个四位十进制数,通过94x94的区位表来表示汉字。区位码的编排方式使得查找汉字相对简单。3. 机内码(又称交换码或内码):为了解决与ASCII码冲突,机内码在国标码的基础上做了调整。通常是将国标码每个字节的最高位设为1,或者在国标码的基础上加特定的偏移量,如80H或10进制的80。这样,机内码不仅避免了与ASCII码的冲突,还便于识别汉字。输入汉字时,通过组合AIt键和小键盘输入数字,实际上是输入汉字的机内码。例如,输入“喣”字的机内码86CB4(16进制)或10进制34500,就能在操作系统中显示该汉字。
2024年09月14日
52 阅读
0 评论
1 点赞
2024-08-09
【分享】Cad2022安装包以及安装
最近在学习cad相关的东西 于是便有了该文章安装教程【安装包放在文章尾】1.首先下载安装包,并且解压,如图:2.然后打开CAD软件安装包.exe,点击解压,路径默认即可3.得到以下文件,随后继续解压图中所示压缩包,密码【666】4.解压过后得到下面的文件,下一步进行安装{callout color="#22a1ff"}Tips:有安装火绒或者360的,或者其他安全管家的记得先退出在安装,本人实测大部分时候都会卡安装进度,弹不出安装窗口...没有安装安全管家的可以去看看将系统防护关闭{/callout}5.右键安装包,以管理员身份运行6.启动后第一项默认是以下界面,如果是进度条缓慢加载请关闭重试7.后面步骤看图操作即可,基本都是下一步,然后安装就好了8.试试能否打开CAD,没问题则大功告成!文章尾:推荐几款常用插件:{card-describe title="插件推荐"}天正CAD:http://www.tangent.com.cn/ 【官网默认要收费】{cloud title="天正T20 V10.0" type="bd" url="https://pan.baidu.com/s/1tqSM5vk0VcSHkN8_uK-EAw?pwd=bysn" password="bysn"/}源泉插件:http://www.yqarch.cn/#yqarch{/card-describe}{cloud title="CAD软件安装包" type="bd" url="https://pan.baidu.com/s/1Xr8I9vc0Tsz6Iz3E6vuVCg?pwd=by66" password="by66"/}
2024年08月09日
87 阅读
0 评论
1 点赞
2024-08-02
【教程】Typora里输入上标和下标的方法
首先在偏好设置-markdown里勾选上标和下标,如图操作:设置好后重启软件,然后这是语法: ^ 上标 ^ 或 <sup> 上标 </sup> ~ 下标 ~ 或 <sub> 下标 </sub>标签是Subscript(下标) 和 Superscript(上标)的简写使用效果:
2024年08月02日
63 阅读
0 评论
0 点赞
1
2
...
10