- 博客(29)
- 收藏
- 关注
原创 vue3的ref源码解析
ref本身是个函数,该函数返回一个createRef函数,createRef函数又返回一个“经过类RefImpl实例化”的对象。
2023-11-01 16:12:59
266
原创 object-fit 图片自适应css属性介绍
object-fit 属性是一个 CSS 属性,用于定义替换元素(如 img、video、iframe 标签等)内部内容的尺寸调整方式。它可以控制替换元素内部内容(例如图像或视频)在其容器中的尺寸适应方式,以保持原有的宽高比或填充满容器。
2023-08-07 17:07:48
1313
原创 利用vue-element-admin中的pdf功能导出博客(倔金)文章
利用vue-element-admin中的导出pdf功能导出博客文章(以pdf的格式),例如倔金、csdn的博客文章等等,保留文章原有的格式。
2022-11-24 06:37:51
492
原创 左边定宽,右边自适应布局的五种方法
需求:左右布局,左边定100px,右边自适应,中间20px间隙下面为核心代码1. float + margin效果如下:这布局结构简单易写,缺点是支持 ie7及以上的浏览器,ie6下会出现3px的问题,解决此问题请看第2中布局 。2.float + margin + (fix)效果如下:此布局支持所有的浏览器,缺点是html结构多了点。3. float + overf...
2019-06-10 23:38:38
2207
原创 browsersync工具的简单使用
browsersync工具可以自动刷新浏览器,就不用自己F5刷新了,还可以多设备进行调试。1.当然先安装(node.js的安装)(推荐使用cnpm 快)npm i -g browser-sync2.后再命令行进入的项目的文件夹 输入命令:browser-sync start --server --files="*" 下面介绍一个简单的用命令行进入文件夹: &nb...
2019-05-24 17:59:16
1140
原创 终端检测(检测用户浏览你网页时用电脑还是手机)
终端检测:检测你浏览该网页时用电脑还是手机实则是利用window中的navigator中的userAgent属性来检测我们来打印看看:结果我们来试试移动端换个ipad试试换个android试试这样思路就出来了:我们可以利用正则判断是否含有字符串:Android iphone ipad ipod 来判断用户用的是什么设备(电脑还是手机)。 看下面完整代码这是个简单的检测...
2019-05-24 16:39:58
1404
原创 css,js文件内联还是外部文件引入?
先说说内联与外部文件引入的优缺点:内联: 优点:减少http的请求 缺点:代码不可复用,和后期代码维护不利外联: 优点:代码可复用和有利代码后期维护。 缺点:增加http的请求。建议:对首次需要加载的文件使用内联,eg:首页对非首页加载可以使用外联。...
2019-05-21 01:53:10
394
原创 web移动端rem的适配
**需求: 随着移动端设备的变化,内容也跟着变化。**先来说说rem单位,以rem为单位,其大小是根据根元素(html标签)的字体大小来判断的, 如 html的font-size:100px; 子元素div 的width:2em; 等同于width:200px;(100 * 2),这就来思路了: 先以一个固定适配的htm...
2019-05-20 17:06:07
1583
4
原创 vuex的简单描述
你可以把vuex当作是一种公共仓库,用来存放一些需要共享的数据,需要那数据的自己去仓库拿就是。这样可以实现非父子或者非私有组件之间的传值。一. (面试题)data,prop,vuex 之间的区别: data是用来存放私有数据的,props是接收父组件传过来的值的,而vuex是用来存放一些公共数据的。二.来说说vuex的简单使用 &nb...
2019-03-27 14:23:28
513
原创 vue-router的编程式导航
编程式导航跟router-link(这叫声明式)一样,都能实现组件之间的跳转,router-link是根据a 标签进行跳转,而导航式,通过绑定click事件,调用this.$router.push(vue内部)来进行跳转。一.this.$router.push官方中四种方式,我这里只说前面三种,用第四种不如直接一 二 种,以下都在vue内部this.$router.push({ path:’...
2019-03-26 09:38:32
1048
原创 php单双引号的区别与foreach 遍历
eg:(核心代码)$age = 123;echo ‘$age’ 输出结果是 $ageecho “$age” 输出结果的是 123总结*echo 输出的内容必须要用单双引号包裹起来。当包裹的内容是变量时。php单引号会把被包裹起来的内容解析为字符串。php双引号会把被包裹起来的内容解析为变量。...
2019-03-01 10:46:53
294
原创 vue零散总结
1. 标签上写v-for ,该标签也会被遍历出来。2. 承载vue 实例的script 标签上的src 属性没值 会报错3.v-enter 是进来之前的动画,v-leave-to 是出去之后的动画。eg: 轮播图的切换, 第一张图出去的动画是由 v-leave-to 来决定的,第二张图进来的 动画是由 v-enter 来决定的4.touch事件其中的一种方法(e为...
2019-02-28 10:55:05
148
原创 vue 子组件向父组件传值
个人笔记 看不懂勿喷核心代码子组中写:this.$emit(‘自定函数名’, 子组要传数据)父组中写:引子组标签中上写: @自定函数名 = ‘父组自定函数名’父组自定函数名(子组传数据形参){this.父属 = 子组传数据形参}...
2019-02-27 17:57:20
257
1
原创 手机上调试 webpack如何设置与操作
1.先要电脑和手机同在一个局域网(如同连一个wifi)2.后在电脑上打开cmd 输入 ipconfig 指令按确定,会出现如下情况:3.找到你的“无线局域网适配器…” 中的IPv4 的地址的(我的是:192.168.0.121)4.后在package.json 文件中的 ‘dev’ 中 添加 –host 你的IPv4地址 我的如下(前面是我的webpack配置):5.后在电脑上重新打开...
2019-02-22 10:42:12
1207
原创 黑马vue.js学习第四天笔记
Vue.js - Day4父组件向子组件传值组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据<script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '这是父组件中的消息' }, ...
2019-02-21 09:41:41
116
1
原创 黑马vue.js学习第三天笔记
Vue.js - Day3定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同:模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;全...
2019-02-21 09:40:13
114
1
原创 黑马vue.js 学习第二天笔记
Vue.js - Day2品牌管理案例添加新品牌删除品牌根据条件筛选品牌1.x 版本中的filterBy指令,在2.x中已经被废除:filterBy - 指令<tr v-for="item in list | filterBy searchName in 'name'"> <td>{{item.id}}</td&a
2019-02-21 09:23:33
112
1
原创 黑马学习vue.js第一天笔记
Vue.js - Day1课程介绍前5天: 都在学习Vue基本的语法和概念;打包工具 Webpack , Gulp后5天: 以项目驱动教学;什么是Vue.jsVue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)Vue.js 是前端的主流框...
2019-02-21 09:16:31
136
1
原创 黑马学习vue.js第六天
Vue.js - day6注意:有时候使用npm i node-sass -D装不上,这时候,就必须使用 cnpm i node-sass -D在普通页面中使用render函数渲染组件在webpack中配置.vue组件页面的解析运行cnpm i vue -S将vue安装为运行依赖;运行cnpm i vue-loader vue-template-compiler -D将解析转换...
2019-02-15 18:44:36
129
1
原创 黑马学习vue.js 第五天笔记
Vue.js - Day5 - Webpack在网页中会引用哪些常见的静态资源?JS.js .jsx .coffee .ts(TypeScript 类 C# 语言)CSS.css .less .sass .scssImages.jpg .png .gif .bmp .svg字体文件(Fonts).svg .ttf ...
2019-02-15 18:41:13
121
1
原创 js滑轮滚动监听
offsetHeight 返回元素的高offsetWidth 返回元素的宽onscroll事件,滚动条滚动是触发获取当滚动条向下滚动时,被滚下的高度: document.body.scrollTop当滚轮滚动是就会触发window的onscroll事件下面是实例var banner = document.querySelector(’.jd_banner’);var height =...
2019-01-18 13:35:21
1635
原创 垂直水平居中的3种方法
垂直水平居中这篇文章结合了 垂直居中和水平居中来进行设置 垂直水平居中,单独垂直居中和水平居中可以看我之前的文章1.display:inline-block text-align:center (水平居中) + display:table-cell vertical-align:middle(垂直居中)2.absolute + transform3.display:flex + ...
2019-01-05 16:47:35
371
原创 不定高垂直居中的三种方法
不定高垂直居中(核心代码)1.display:table-cell + vertical-align:middle父元素(.parent)设置display:table-cell 变成单元格,再设置vertical-align:middle (改属性可以作用于inline inline-block table何table-cell 元素)该布局的优缺点:优点:兼容性比较好(虽然tabl...
2019-01-05 16:09:22
2427
原创 页面水平居中布局
个人的学习笔记一.水平居中布局(核心代码,四种方式)1.display:flex + justify-content:center || margin:0 auto.parent宽是不固定的类名为.child的div是display:block 默认与父元素同宽,父元素设置了display:flex后,子元素(.child)就变成了flex-item默认的宽是会根据内容的宽,父级元素再...
2019-01-05 12:00:15
495
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人