逡橙

逡橙 查看完整档案

贵阳编辑贵州师范学院  |  电子信息科学与技术 编辑贵州广电  |  研发工程师 编辑 segmentfault.com/u/cheng_5ff55fa48ee68 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

逡橙 回答了问题 · 2月25日

vue框架下的web网页占用了其他页面的样式,怎么办?

css 都会出现这种全局污染的,最好匹配规则精确,使用权限解决这种问题最好,写代码尽可能避免

关注 3 回答 3

逡橙 关注了标签 · 2月20日

mysql

MySQL是一个小型关系型数据库管理系统,开发者为瑞典MySQL AB公司。在2008年1月16号被Sun公司收购。而2009年,SUN又被Oracle收购。MySQL是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内。这样就增加了速度并提高了灵活性。MySQL的SQL“结构化查询语言”。SQL是用于访问数据库的最常用标准化语言。MySQL软件采用了GPL(GNU通用公共许可证)。由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。

关注 72744

逡橙 发布了文章 · 2月20日

Vue中解决“ ...pops value. Prop being mutated: "number"”

最近在写组件发现的,当引用组件进行传值时,如果在引用的组件中进行对传入值的修改,页面上显示并没有什么问题,但打开控制台就会发现出现以下八错: “避免直接修改道具”

*[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "number"
image.png

Vue 不建议修改props数据,如果更改传入的值,在子组件中的数据将被重新呈现。

如何解决

1、如果使用的变量没必要在父组件中传入,进行初始化,那么可以将值的初始化在子组件的data() 函数进行return 出来,或者直接使用状态管理值。
image.png

2、子组件是有默认值,如 :输入框 Input 情况,包含v-model和一个展示输入值的Card组件,使用v-model 进行数据绑定,这样我们就需要添加自定义事件去解决:
this.$emit('updata-number',myNumber)
也就是将myNUmer通过 updata-number 事件名称发送数据。由于发送自定义数据,因此父组件需要监听 updata-number 事件。
`methods: {

add() {
  var myNumber = this.number;
  myNumber++;
  this.$emit("update-number", myNumber);
}

}`

卡片
<Card :number="number" @update-number="update" />

注意 myNumber是作为参数发送,updata函数中需要一个参数来获取数据,然后将自定义事件获取的number数据在每次props更新时重新刷新,这样就可以进行数据绑定而不出现包错。

查看原文

赞 1 收藏 1 评论 0

逡橙 关注了用户 · 2月16日

小黑土 @xiaoheitu

关注 1

逡橙 赞了文章 · 2月10日

思否官方祝各位社区开发者 2021 春节快乐

伴随着气温的回升,春天和假期的脚步都近了。上周五是 SegmentFault 团队春节假期前的最后一天的工作日,不过这几天团队小伙伴依旧处于在家办公状态,同时也紧锣密鼓筹备着迎接一年一度最重要的节日。

2 月 10 日(明天)起,我们将正式进入春节假期,春节假期社区部分管理工作会稍有调整,第一次内容发布审核,审核时间可能会比平时会慢一些,但是每天都会有管理员进行一些审核。同时我们也鼓励开发者,看到不规范的社区内容及时举报。

最后值此辞旧迎新之际,感谢过去的一年,社区里热爱技术的开发者和各位合作伙伴霸霸对 SegmentFault 思否的支持。新的一年,我们将继续努力为开发者服务,也做好科技企业和开发者沟通的桥梁,帮助更多合作伙伴更好地和开发者对话。

祝大家春节快乐,牛转乾坤!

image

查看原文

赞 16 收藏 0 评论 6

逡橙 发布了文章 · 2月10日

SSR服务端渲染

SSR简介

SSR 是Server Side Render简称;就是在服务端进行渲染生成HTML文件,浏览器世界显示生成HTML文件, 补充:我们传统使用的属于CSR是Client Side Render,页面上的内容是我们加载的js文件渲染出来的,文件运行在浏览器上面。
SSR优点

  • 可以很好解决首页需要加载js和CSS导致页面加载缓慢问题(最头疼),SSR直接将HTML字符串传递给浏览器,加快了首屏加载时间。
  • 优化SEO,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容。
  • 服务端渲染不用关心浏览器兼容性问题,运算过程都在服务端完成,避免浏览器兼容同时也能减少客户端的电量消耗(省电)

SSR缺点

  • 由于运算都在服务器完成,所以就需要服务能承受的负载更高。
  • 增加开发的复杂程度,构建和部署。

React和Vue服务端渲染

Vue 可使用Unxt.js
Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。

Nuxt.js是特点(优点):

  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • ES6/ES7 语法支持
  • 打包和压缩 JS 和 CSS
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint
  • 支持各种样式预处理器: SASS、LESS、 Stylus等等
React 可使用Next.js

Next.js 具有同类框架中最佳的“开发人员体验”和许多内置功能。列举其中一些如下:
Next.js是特点(优点):

查看原文

赞 7 收藏 6 评论 0

逡橙 发布了文章 · 2月7日

JS+CSS自适应屏幕

布局适配方式

  • Media Query(媒体查询):现在比较主流的适配方案,可根据视口不同编写不同样式达到适应效果,比如框架Bootstrap,它能完成大部分项目需求,但是编写过于复杂。
  • flex布局:主流的布局方式,不仅适用于移动Web,网页上也表现良好,也是现在使用最多的布局方式。
  • 固定高度,宽度百分比:这种方法只适合简单要求不高的webApp,一般在适应要求不高,或者大屏显示没有要求时候可以使用。
rem 单位介绍
rem(font size of the root element)是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
  • 原理:将px替换成rem,在脚本中使用JS动态修改html的font-size适配,它可以根据根视口大小去改变基准元素的字体,然后进行等比缩放来进行变化,达到各种屏幕适应。
控制的JS写法
var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; //获取屏幕的宽度
//获取HTML的Dom元素
var htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体
htmlDom.style.fontSize= htmlWidth/20 + 'px';

这种方式目前常用于webapp上,主要是使用rem特性来灵活改变字体大小,达到窗口大小改变等比缩放元素。

拓展部分:

目前在自适应这块像对于互联网电视,由于开发时候对图片尺寸是有严格要求,因此,集成时候只需要设置视口大小就可以对任何屏幕进行等比缩放。
一般会在meta标签中直接设置开发时候基准的大小
<meta name="page-view-size" content="1920*1080" />
查看原文

赞 24 收藏 12 评论 5

逡橙 关注了专栏 · 1月6日

前端记录册

输出倒逼输入,终身学习。

关注 2469

逡橙 关注了专栏 · 1月6日

SegmentFault 思否观察

SegmentFault 思否对开发者行业的洞见、观察与报道

关注 27260

逡橙 关注了专栏 · 1月6日

Python数据科学

微信公众号:Python数据科学

关注 7697

认证与成就

  • 获得 33 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 1月6日
个人主页被 1.8k 人浏览