首页 文章 精选 留言 我的

精选列表

搜索[数据绑定],共10030篇文章
优秀的个人博客,低调大师

Vue 3 中 v-model 绑定对象属性时为什么不会触发父组件更新?

在 Vue 3 的项目里,把 v-model 直接绑到响应式对象的某个属性上,比如 ,然后在子组件里通过 emit('update:modelValue', newVal) 去改值,结果父组件的 form.name 确实变了,但页面上依赖它的其他地方却没重新渲染。也有另一种情况:子组件里用 props.modelValue = xxx 直接改,控制台报错但对象属性还是变了。前者通常是因为父组件传入的是一个原始值(string、number),v-model 本质上展开成 :modelValue 加 @update:modelValue,而事件处理函数是 form.name = $event。这个赋值动作发生在父组件的渲染作用域里,按道理应该触发更新。但如果你在子组件内部把 props.modelValue 当作本地状态去修改,就绕过了 emit,父组件根本不知道有变化。这篇文章从 Vue 3 的 v-model 编译结果、响应式丢失、以及 defineModel 的介入方式几个角度,把这类“值变了视图没变”的问题拆开讲清楚。

优秀的个人博客,低调大师

如何用自己电脑做服务器,绑定域名建一个个人网站

使用自己的电脑,下载一个tomcat服务器,并将域名解析到本机,这样就可以发布自己的网站了。不过,关机之后网站便登不上去了。这样做只是为了我们可以更好的开发调试自己的工程,网站上线之后可以让更多的朋友帮你找bug。这里仅仅需要花十几块钱买一个域名就可以了。以下介绍都是在已买域名的基础上。 购买域名之后开始解析自己的域名到本机,以下以腾讯云购买的域名为例,其他大同小异: 1,,添加该域名的解析地址,否则别人通过该域名是无法得知实际的公网IP地址。这里使用腾讯云的云解析功能,依次选择:云产品->域名服务->云解析 2,这里需要做进一步的设置,比如,在更多选项卡中,开启CNAME加速,开启搜索引擎推送 3,接着点击解析选项,进入添加记录的控制台,可以看到已经存在两条记录,对于www服务,一般我们还需要添加一条A记录,即,记录类型为A (将域名指向一个IPv4地址)主机记录为www(就是域名的前缀)线路类型默认即可记录值填写你购买的云主机的公网IPTTL选择1小时即可 (即在DNS服务器缓存中的刷新时间) 这里的主机记录一般只填www就可以,记录类型为A,域名指向一个IPv4地址,这个地址是要填你的主机IP (查找本机IP方法) 在命令提示符环境下获取本机IP地址的方法和命令如下: a、打开命令提示符,再运行中输入”cmd“回车即可打开命令提示符界面。 b、再命令提示符界面中输入”ipconfig/all“ 4,这样子我们就完成了域名注册与解析工作,等待大约10分钟后,我们可以进行测试。在Windows下ping该域名,看看是否能够ping通。 这样,只要电脑不关机,你的服务器就一直存在。 如何把做的网站发布上去呢? 这时我们可以借助tomcat,一般tomcat端口号是8080,我们需要把他改为默认的80端口: 我们只需修改一下Tomcat的配置即可,打开Tomcat所在的目录,打开conf文件夹,打 开server.xml文件,所要修改的部分如下: [plain] view plaincopy <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" /> <Context path="" docBase="shop1" reloadable="true" /> 将port="8080"改为80,保存,这样你发布工程开启tomcat之后,通过你的域名就可以访问了。 ps:这样只是测试玩玩,一切的前提:不能关机 !不能关机 !不能关机 !

优秀的个人博客,低调大师

Vue 3 中 v-model 绑定自定义组件时,为什么输入中文会打断拼音?

如果你在 Vue 3 里用 v-model 封装过自定义输入组件,大概率碰到过这个现象:在中文输入法下,拼音还没选字,组件里的值就被更新了,导致候选词框位置错乱、拼音被截断,或者用户必须重新输入。这个问题在搜索框、表单、富文本前置输入等场景下特别常见。根本原因在于 v-model 默认监听的是 input 事件,而 input 在多数浏览器里只要输入框内容发生变化就会触发,包括输入法组合期间的临时拼音串。组合结束后浏览器还会再发一次 compositionend,如果组件没有区分这两种状态,就会把拼音中间态同步给父组件,父组件又通过 props 回流,输入框的 DOM 值被外部覆盖,输入法就会中断。要解决它,需要在组件内部维护一个组合状态,组合期间不向外提交,同时让内部值可以正常显示拼音。

优秀的个人博客,低调大师

超实用,解决img标签src绑定了正确地址后,图片有时候不显示问题

今天做项目的时候,遇到一个比较奇葩的问题,将后台返回的图片地址链接绑在img标签的scr上的时候,有时候会偶发的不显示,但是将后台返回的地址复制到浏览器,又能直接打开,我跑过去问后端,他说他知道这个问题,也说了半天,反正意思就是,这个问题以前就存在,确实后台存在问题,但是因为某些原因,他解决不了,看看我们前端能不能曲线救国,我晕,那没办法了,测试已经把bug提给我了,只能我自己想办法了;出于对公司信息安全的考虑,我就不贴我在公司写项目代码了,我下面写个小demo来说明解决这种情况的原理,具体使用请根据大家的项目自行变通: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 因为这个图片地址是没问题的 --> <!-- 如果后台出现问题, 就会走下面的img1.onerror方法--> <img id="img1" src="http://p4.so.qhimg.com/t018349127914f495ce.jpg" alt="" srcset=""> </body> </html> <script> var img1 = document.getElementById('img1') var i = 0 //初始化图片加载失败请求次数 // 图片一旦加载成功了的时候,就会调用这个函数 img1.onload = function (param) { console.log('图片加载成功') } //当每次图片加载失败了,都会调用这个函数 img1.onerror = function (err) { if(i>10){ //图片加载失败函数是否调用超10次?如果超10次,就return //避免无限制的发送请求 return } //在链接后面拼接'?'+Math.random() 是为了每次请求清除图片缓存, //避免再次请求的时候调用了上次无用的地址 err.target.src = "http://p4.so.qhimg.com/t018349127914f495ce.jpg"+'?'+Math.random(); i++ } </script>

资源下载

更多资源
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题,腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构,目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring

Spring框架(Spring Framework)是由Rod Johnson于2002年提出的开源Java企业级应用框架,旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念,提供核心容器、应用上下文、数据访问集成等模块,支持整合Hibernate、Struts等第三方框架,其适用范围不仅限于服务器端开发,绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

用户登录
用户注册