- 博客(37)
- 收藏
- 关注
RSS订阅原创 在vue中使用this注意
在vue组件中通过this.$root来访问根实例，帮助在子组件中获取全局状态或者调用实例的方法。3.在模板内的this是隐式的，可以直接引用数据和方法，无需手动绑定this。4.在组件通信中，this的指向需要注意是父组件或者子组件。2.在生命周期钩子函数中，this指向vue实例。1.this的上下文绑定问题，特别是箭头函数。子——>父：events。父——>子：props。vue中组件之间通信。
2025-02-18 14:27:31
105
原创 vue中的过滤器
2.单文件组件：使用vue文件，同时包含<template>,<script>,<style>日期格式化，文本格式化，数值格式化（vue3中未见使用计算属性或methods方法来替代）3.渲染函数：在vue组件的render方法中使用javascript函数来生成虚拟DOM。1.字符串模版：在vue组件对行啊的template属性中直接一字符串的形式定义模版。
2025-02-18 14:17:26
105
原创 不建议在vue中同时使用v-if和v-for
在外层包裹条件判断。理解指令的优先级（使用v-on时间判定）1.在vue3版本中v-if优先级高于v-for（vue2中相反）可以会导致高性能开销和复杂的代码维护。3.可能出现不必要的渲染。
2025-02-18 14:10:31
412
原创 vue中v-show和v-if
v-show是通过控制元素的css中的display属性来显示或隐藏元素，无论条件是否为真，元素都会渲染到DOM中，知识通过设置css样式来控制它的可见性，适用于频繁切换显隐状态的场景。v-if是通过条件判断来决定是否渲染元素，如果条件为假，元素根本不会渲染DOM中，适用于条件变化不太频繁的场景。性能，初始渲染，可以搭配使用，css的过渡效果（v-show直接触发）
2025-02-18 14:02:56
116
原创 vue Router中如何获取路由传递参数
2.查询参数：在URL中使用查询字符串的形式传递参数，例如/user？id=123.此时，可以通过this.$router.query来获取查询的参数。1.动态路由匹配：类似/user/：id这样的路径定义一个动态路由参数，通过this.$route.params来获取传递的参数。
2025-02-18 13:47:03
246
原创 vue中data属性与methods方法不可以同名
初始化时会将data属性和methods方法同时挂载到vue实例上，会导致命名冲突，无法区分调用的是方法或者属性。this.methodName调用methods方法。this.proprtyName访问data属性。
2025-02-18 13:40:34
100
原创 VUE路由管理的作用
用于构建单页面（SPA），在不同的URL下渲染不同的组件，无需刷新页面。router-link：创建导航链接，可以触发URL变化改变视图。router-view：用于显示与当前路由对应的组件。this.$router.params获取传递的参数。<router>：用于嵌套子路由实现复杂页面结构。:param来定义动态路由。
2025-02-18 13:33:55
762
原创 前端常用的编辑器、框架以及一些常用工具，帮助前端开发者更快成长。
使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信 / 京东 / 百度 / 支付宝 / 字节跳动 小程序、快应用、H5、React-Native 等）运行的代码。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。我们认为这是思考数据的最自然的方式，并且比传统的行/列模型更有表现力和更强大的功能。
2024-10-26 16:53:29
1196
原创 vue从零开始搭建项目
先安装包管理器node.js，确定要用到的版本（nvm转换版本），接着安装npm或者国内镜像cnpm，终端中全局安装vue、vue-cli（脚手架）、vue-router、webpack（模块打包器），用代码编译器VS code进入文件夹，下载vue脚手架选择指定的插件，选完之后就先运行一次代码是否正常执行，最后开始编写代码。
2024-10-16 22:38:30
149
原创 前端开发的未来展望
近期展望：技术技能的提升，深入掌握现有的技术（框架和组件库、构建工具的使用），学习新的技术（现在发展迅速，新的技术迭代也快）长远展望：发展期、稳定期、提升期。
2024-10-15 17:53:38
184
原创 前端项目的介绍
商品列表页：根据分类、品牌、价格条件筛选商品、支持关键字搜索（网络请求axios、搜索框的设计定位展示）首页（导航栏，轮播图、侧边栏）：展示推荐的商品、促销活动等信息。订单管理：创建订单、查看订单的状态、取消订单等增删改查的功能。用户中心：用户可以查看个人信息、修改密码、管理收获地址等。商品详情：利用弹出框介绍商品的信息。
2024-10-15 17:37:01
128
原创 前端项目中遇到的技术问题
解决方案：使用css的媒体查询（media queries）针对不同屏幕下应用特定的样式、采用弹性盒布局flexbox布局实现更灵活的响应式布局。采用bootstrap之类的前端框架提供的响应式工具类。协议、域名、端口任意一个任意一个不同的时候，就会产生跨域问题。cors是后台解决方案，proxy是我常用的，get请求target输入服务器地址，changeOrigin设置为true。页面加载过长、图像加载慢。解决方案：代码分割，按照需求加载模块，减少初始的加载量或者使用懒加载、资源压缩、cdn加速。
2024-10-15 17:11:11
429
原创 ES6有哪些新特性
1.let和const：具有块级作用域，let用来声明变量科重新赋值，const用来声明常量不可再次赋值。4.解构赋值：一种javascript表达式，它允许从数组或对象中提取属性或值，并将这些值赋给其他变量。7.类与模块：通过class关键字定义类，使用import和export来导入和导出模块。11.其他：对象属性简写，属性和方法简写，提升了Javascript的编码效率和可读性。9.Symbol和迭代器：提供了一种新的原始数据类型和自定义迭代行为的方式。2.箭头函数：新的函数声明方式，语法简洁。
2024-10-15 10:45:12
833
原创 css用到哪些
3.1过渡：transition：设置属性变化时的过渡效果。浮动Float、清除浮动Clearfix、伪类和伪元素。3.2动画：animation：设置动画效果。盒模型、定位、弹性布局、网格布局。文字样式、背景和边框、媒体查询@media。
2024-10-14 20:45:36
257
原创 从输入网址到浏览器显示经历了那些过程
请求中包含了请求的方法(如GET)、请求的资源路径、协议版本以及一些请求头信息(如接受的内容类型、语言偏好等)。6.加载外部资源:在解析HTML的过程中，如果遇到外部资源(如CSS文件、JavaScript文件、图片等)，浏览0器会发起额外的HTTP请求来加载这些资源。页面加载完成后，用户可以与页面进行交互(如点击链接、填写表单等)。Web服务器接收到请求后，会进行相应的处理(如查询数据库、执行脚本等)，然后生成一个HTTP响应，包含状态码、响应头以及响应体(通常是HTML文档)。5.解析HTML内容:。
2024-10-10 22:14:00
544
原创 设置css样式不显示
4.使用position：absolutr；结合left：-9999px；或者top：-9999px；将元素定位到屏幕外，用户无法看见，同时也不影响其他元素的布局。3.使用opacity：0；元素的透明度为0，使得元素不可见，但它依然会影响页面布局，可以接收鼠标事件等交互。1.使用display：none；完全移除元素，使其在页面布局中不再占用任何空间。2.使用visibility：hidden；元素被隐藏，但它仍然占据页面上的空间。
2024-10-10 21:53:48
463
原创 前端怎么生成一个列表
直接在HTML文件中写入列表标签。HTML支持两种类型的列表：无序列表<ul>、有序列表<ol>。每个列表项都用<li>标签表示。
2024-09-19 21:16:50
216
原创 Bootstrap的组件
1、栅格系统：用于创建灵活且响应式的布局。2、导航：创建顶部菜单、标签页等。3、按钮：提供各种样式的按钮。4、表单：包括基本表单控件的样式。5、图片：图片的样式调整。6、表格：增强表格的视觉效果。7、辅助类：提供简单的类来修改颜色、显示/隐藏元素等。
2024-09-18 22:28:42
642
原创 HTML5新增的标签
summary>：用于元素内的摘要或标题，点击时可以展开或收起详情信息。：代表文档或页面中的独立内容，如博客文章、论坛帖子等。：定义一个页面或节的底部，通常包含版权信息、联系方式等。：定义一个页面或节的头部，通常包含导航链接、logo等。：定义元素的标题或说明文字。：代表文档中的一个独立部分，如章节、页眉或导航栏。：代表文档或文档区域的主要内容，直接与文档的主题相关。
2024-09-18 21:50:35
227
原创 标签之间的区别
head>：包含关于文档的信息，如标题、样式表、脚本等，不显示在页面上。DOCTYPE>：定义文档类型，告诉浏览器应该按照那种标准解析文档。：包含所有的其他元素的根元素，定义了整个HTML文档。：定义文档的标题，在浏览器的标签页上显示。定义了网页的内容结构和语义，不同的标签有不同的用途。：包含文档的所有可见内容。
2024-09-16 21:22:45
293
原创 前端底层原理
前端开发的底层原理涉及多个方面，包括但不限于HTML/CSSjavaScript的基础知识、浏览器渲染机制、网络通信协议、前端框架的实现原理等。HTML5 是 HTML 的最新版本，引入了许多新特性，如<video>、<audio>、<canvas>等标签以支持多媒体内容和绘图功能。前端框架如 React、Vue.js 和 Angular，提供了声明式的编程模型，使得开发者可以更容易地构建复杂的用户界面。HTML是用来描述网页结构的语言，它由一系列元素组成，这些元素可以添加文本、图片、链接等内容到网页中。
2024-09-16 17:34:04
1059
原创 vue组件生命周期
每个组件在被创建时都要经过一系列的初始过程，例如，需要设置数据监听，编译模版，将实例挂载到DOM并在数据变化时更新DOM等，同时在这个过程中也会运行一些叫做生命周期钩子的函数，卸载前后：beforeUnmount、Unmounted。创建前后：beforeCreate、Created。更新前后：beforeUpdate、Updated。渲染前后：beforeMount、Mounted。代码执行顺序固定，与编写顺序无关。
2024-09-09 20:44:00
162
原创 vue状态管理核心（vuex）
mutation（更改）常用事件配合使用。action（异步操作）为异步做准备。state（存储状态）getter（过滤）
2024-09-08 22:57:41
202
原创 vue3的新特性
4.“碎片”，Teleport即Protal传送门，“悬念”；2.可以将无用模块“剪辑”，仅打包需要；1.性能要比vue2.0强；6.暴露了自定义渲染API。5.更优秀的TS支持；
2024-09-08 22:18:14
98
原创 节流的含义
如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直到过了这段时间才重新生效。如果在限定的时间段内，不断触发滚动事件只要停止就不会输出。：支持输入实时数据可以用节流。
2024-09-06 17:52:06
106
原创 防抖的含义
实现：在于定时器SetTimeout()函数，用一个变量保存计时，考虑到维护全局纯净，可以借助闭包来实现。防抖的定义：对于短时间内连续触发事件，防抖就是让某个时间期限内事件处理函数只执行一次。防抖节流应该算属性优化的知识，处理不当或者放任不管就容易引起浏览器卡死。2.resize事件（页面适配）
2024-09-06 17:43:16
175
原创 路由嵌套配置
4.添加子路由跳转链接. <rouer-link to=""></>2.在路由配置文件中添加子路由配置. childreb:[ ]3.指定子路由显示位置. <router-view></>5.重定向配置. redirect:"全路径"1.创建子路由要加载显示的页面。
2024-09-04 21:23:29
130
原创 promise的理解
通过new promise构造函数来创建一个promise对象，构造函数接受一个执行器函数，该函数带有resolve和reject两个参数，执行器内部的代码是同步执行的，但可以调用resolve或reject来改变promise的状态。概念：promise是javascript中用来处理异步操作的对象，有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）.then：接收两个参数，一个fulfilled状态的回调函数，一个rejected状态的回调函数。
2024-09-04 17:27:47
262
1
原创 路由传递参数
component: () => import(" ../ / /组件路径")<router-list to="/list/名字>. </>1️⃣.在路由配置中指定参数的key。3️⃣.在详情页读取路由携带的参数。页面跳转过程，是可以携带参数的。2️⃣.在跳转过程中携带参数。
2024-09-03 21:43:56
120
原创 弹性布局flexbox
flexbox是css3新引入的一种布局，用来创建灵活可伸缩的布局；平均：justify-content:space-between;在flexbox模型中，容器中的子元素可以自动调整其尺寸和顺序。按比例分配空间：flex:1;垂直：flex-direction:colum;按顺序：order:1;水平：flex-direction:row;基本：display: flex;
2024-09-03 18:44:25
218
原创 箭头函数为啥不能做构建函数
3️⃣.和关键字new一起使用时会抛出错误。2️⃣.没有prototype属性。1️⃣.没有单独的.this绑定。4️⃣.不绑定arguments。
2024-09-03 10:15:33
373
原创 Vue路由配置
5.指定路由跳转：app.vue组件里 ---4.指定路由显示入口：app.vue组件里 1.安装路由：npm install --save vue-router。2.配置文件：src --> router --> index.js。注：圈红的组件：src --> views -->3.引入路由显示入口：main.js。
2024-09-02 21:25:58
495
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人