自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(18)
  • 收藏
  • 关注

原创 macbook修改vs code主题配置文件)

Mac配置vscode

2024-01-11 14:13:55 386

原创 React 报错 Uncaught TypeError: changeOpen is not a function

React 子组件向父组件传值遇到问题 Uncaught TypeError: ××××××××(函数名) is not a function

2022-12-05 10:01:00 285 1

原创 树状结构与CSS定位

同级节点必须得有相同父级定位 position坐标属性(即只有开起定位后才起作用): top、left、bottom、right、z-index(z轴)绝对定位 absolute脱离文档流参照浏览器视窗左上角相对定位 relative不脱离文档流参照此元素元位置(即这个元素原来的位置)固定定位 fixed脱离文档流参照浏览器视窗与整体文档流无关,只相对于当前视窗固定定位设置参照物给父级设置relative...

2022-02-19 19:13:42 245

原创 盒子模型和浮动布局(清除浮动)

元素实际大小width/height+border+padding设置box-size:border-box元素实际大小: width/heighthtml元素的分类块元素:可设置宽高,常见有ul、li、h1行内元素:不可,常见有a、span行内块元素:可,常见有img、input、button清除浮动利用一个空div设置clear:both属性伪元素清除浮动// 给浮动元素前后均加一个空盒子,并设置clear: both.clear::before,.clear::after{

2022-02-17 10:02:24 194

原创 第二常用选择器

层级+组合选择器.box1 h1,.box1 h2{}<style> .box1 h1,.box1 h2{ color: aquamarine; } </style></head><body> <div class="box1"> <h1>hello world</h1> <h2>hello</h2> </div> &l

2022-02-09 10:24:30 166

原创 Vue父子组件传值

父向子传通过属性先于父组件引进子组件:给孩子组件(child) 自定义属性(Trmsg) 从父亲传值给儿子儿子通过Props接收:props: ["Trmsg"],//属性的属性子向父传通过自定义事件在父组件中自定义事件<child @myevent='changeData' :Trmsg="Trmsg"></child> //changeData加()没拿到数据methods: { // 父组件中的子标签中监听该自定义事件并添加一个响应该

2021-12-04 13:55:48 468

原创 RESTful风格简化路由文件

restful接口的url定义通过一行 router.resources 实现增删改查涉及到的全部请求List item

2021-11-14 21:00:39 352

原创 egg新建一个控制器

Controller// 1.引入egg的controller类const Controller = require('egg').Controller// 2.自己定义的controller继承egg的controllerclass FruitsController extends Controller{ // 处理用户请求 // egg要求async函数 async index(){ // 获取上下文对象 .body给响应 this.ctx.body = '此为水

2021-11-14 13:14:40 616

原创 新建一个egg项目

Egg项目初始化创建egg:npm init egg --type=simple安装依赖:npm install启动egg项目:npm run dev试运行,Egg项目启动后,默认端口是7001,可以直接通过浏览器访问http://127.0.0.1:7001。主要文件夹介绍:app/router.js 用于配置 URL 路由规则app/controller/ 用于解析用户的输入,处理后返回相应的结果 config/config.default.js 用于编写配置文件config/plu

2021-10-25 11:03:39 321

原创 关于移动WEB开发

分辨率作为开发者我们暂时无需关注分辨率,因为我们常用的尺寸单位是 px (为什么?)视口视口(viewport): 就是浏览器显示页面内容的屏幕区域。 在pc端严格等于浏览器窗口的高度和宽度,在手机端,由于 viewport 太窄,所以手机端有两个 viewport。总体来说视口可以分为布局视口、视觉视口和理想视口:layout viewport:布局窗口 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置

2021-10-20 11:25:36 50

原创 js for...in for...of forEach

for…in const arr = [1, 2, 3, [4, 5, [6, [1]]], 7] let flatten = function (arr) { for(let i in arr){ //console.log(arr[i]); console.log(i); } } console.log(flatten(arr));数组下标: const arr = [1, 2, 3, [4, 5, [6,

2021-10-06 11:30:20 60

原创 关于Vuex的使用(createApp引入)

vuex是一个插件,调用时要用Vue.use安装我的cli没指定版本,这里已经不能用原来的:新的:原来的

2021-09-25 22:16:53 231

原创 解决Vue/cli安装时 ERROR command failed: npm install --loglevel error --legacy-peer-deps 问题

安装完Vue/Cli后创建vue项目报错搜了一下,多数解决方法都是改.vuerc代码,管理员打开cmd之类的,在我这不起作用然后我想会不会是因为我Vue/Cli的版本,这是解决问题的关键!因为之前记得有个老师讲过指定Vue/Cli的版本进行安装,于是我就去找了那个视频,一看发现是Vue/Cli依赖node和webpack,所以我装了webpack就好了...

2021-09-25 06:57:30 4617 3

原创 为什么要学习vue

渐进式框架可以把原有项目一部分一部分的变为使用vue框架进行开发,即vue可以作为原有项目的其中一部分(就是不用一次性全部改掉原来项目,分批次改进)。那为什么要改呢?因为vue的交互体验很好,这仅仅是他的优点之一。Web开发中的高级功能解耦视图和数据可复用组件前端路由技术状态管理虚拟DOMMVVM关于vue的mvvmView即DOMModel即抽离出来的数据对象ViewModel即vue对象实例首先,ViewModel会通过Data Binding 让数据实时显示于DOM;

2021-09-24 14:10:49 100

原创 vue列表渲染(学习记录)

v-for 块可以访问所有父作用域的 property在 v-for 块中,我们 可以访问所有父作用域的 property。 v-for 还支持一个可选的第二个参数,即当前项的索引。<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li></ul>var exam

2021-09-22 14:27:25 95

原创 vue条件渲染学习记录

用 key 管理可复用的元素Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换:<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"></template>

2021-09-20 20:55:41 54

原创 Class 与 Style 绑定学习记录

绑定HTML Class绑定的数据对象不必内联定义在模板里,即可以把数据对象写在data里,只需在内联引用即可:<div v-bind:class="classObject"></div>data: { classObject: { active: true, 'text-danger': false }}渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:<div v-bind:class="cl

2021-09-20 20:21:28 66

原创 vue生命周期函数

生命周期钩子本质:函数在vue创建实例时运行,旨在给用户在不同阶段添加自己的代码的机会create钩子在实例创建后执行写于其中代码const vm = new Vue(){ data:{ a:1 }}

2021-09-20 11:21:49 58

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除