- 博客(23)
- 收藏
- 关注
RSS订阅原创 Element-UI 另类技巧
el-scrollbar 滚动条<el-scrollbar> <div class="box"> <p v-for="item in 15" :key="item">欢迎使用 el-scrollbar {{item}}</p> </div></el-scrollbar><style scoped>.el-scrollbar { border: 1px solid #ddd; height:
2021-11-09 17:49:05
206
原创 webpack是怎么打包的，babel又是什么？
把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。...
2021-11-09 15:27:54
966
原创 vue 页面跳转外部链接打开新标签页
let href = 'https://www.baidu.com/' window.open(href, '_blank');
2021-10-11 11:11:19
1097
原创 微信小程序富文本设置样式
两种方法如果富文本标签有class类名，我们可以直接通过类名修改class样式js里面： 【使用拼接和正则的方式来实现】
2021-06-16 18:58:04
1427
2
原创 css文字样式超出部分...三个点显示
/* 固定高度 */ width: 450rpx; /*超出部分隐藏*/ overflow: hidden; /*添加...*/ text-overflow: ellipsis; /* 一定要写 */ display: -webkit-box; /* 控制行数 */ -webkit-line-clamp: 2; /* 水平或垂直排排列 */ ...
2021-05-30 21:57:19
891
原创 常用不同组件之间的通信
1.props / $emit：父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。2.$children / $parent：this.$children[0].msg = "hello world" //父组件修改子组件data中的数据this.$parent.mag //子组件拿到父组件data中的数据$children的值是数组，$parent的值是个对象注意：$parent，$children它们的目的是作为访问数组的应急方法，更推荐用
2021-05-24 20:39:31
438
原创 移动端IOS适配之输入框首字母大写问题
autocapitalize 全局属性 是一个枚举属性，它控制用户输入/编辑文本输入时文本输入是否自动大写，以及如何自动大写。属性必须取下列值之一：off or none: 没有应用自动大写（所有字母都默认为小写字母）。 on or sentences: 每个句子的第一个字母默认为大写字母；所有其他字母都默认为小写字母。 words: 每个单词的第一个字母默认为大写字母；所有其他字母都默认为小写字母。 characters: 所有的字母都默认为大写。在物理键盘上输入时，autocapitaliz
2021-05-21 21:22:03
292
原创 px和em和rem的区别
1、px实际上就是像素，与物理像素有一定的区别，用px设置字体大小，比较精确，但是有缺点，当浏览器页面缩放时，px并不能跟随变大。当前网页的布局就会被打破。2、em是根据基准来缩放字体的大小。em是相对单位，一般都是以<body>的字体大小作基准的。em是相对于父元素的属性来计算的，这样就会存在一个问题，就是每一层父元素都必须有它的数值。3、而rem不同，rem是相对于根元素html,而此时我们只需要以rem为基准就可以了...
2021-05-21 21:10:12
149
原创 scoped原理及穿透方法
scoped的作用在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。scoped实现原理vue中的scoped属性的效果主要通过PostCSS转译实现，PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CS
2021-05-20 21:41:01
997
1
原创 移动设备忽略将页面中的数字识别为电话号码的方法
标准的电话号码格式是这样子的：<ahref="tel:1-408-555-555">1-408-555-555</a>但是有时候不是电话号码的数字也会被浏览器自动解析为电话号码，并把数字的颜色和样式都改了，如果忽略页面中的数字识别为电话号码，只要把这个默认行为关闭即可，只要一行代码：<meta name="format-detection" content="telephone=no">这个关闭不会影响真正电话号码的识别。补充：format-de.
2021-05-20 20:40:43
429
原创 JS原生Ajax的创建过程
Ajax主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新。1.创建new XMLHttpRequest核心对象var xhr=new XMLHttpRequest();2.调用open 准备发送参数一：请求方式参数二: 请求地址参数三：true异步，false 同步xhr.open('post','http://www.baidu.com/api/search',true)3.如果是post请求，必须设置请求头。xhr.setRequestHea...
2021-05-19 21:55:33
127
原创 Vue路由跳转传参如何传递一个对象
在路由跳转传参的时候参数可能会是一个对象，但首次跳转成功接受成功后这个参数会出现，但是一旦刷新这个参数就会编程[object,object] 。在这个是时候我们在路由跳转传递参数的时候用JSON.stringify() 将参数转换一下 如：let str = JSON.stringify(item);this.$router.push({ path: "/Ebooksclassified", query: { str } });在接受这个参数的时候用JSON.parse() 再转换一...
2021-05-18 22:03:03
11686
原创 es6新方法 对象转数组字符串和数字字符串一行代码搞定
es6新方法非常便捷一行代码搞定const a = { a: 1, b: 2, c: 3, d: 4, } console.log(Object.keys(a)) console.log(Object.values(a))
2021-05-17 20:40:45
1239
原创 GitHub指南
下载安装 git官网下载 http://www.git-scm.com/download/win 检测完成 桌面鼠标右键点击空白位置 显示两个Git命令行工具，则表示安装成功 Git基本工作流程Git的工作区域 工作区：用于添加、编辑、修改文件等暂存区：暂存已经修改的文件最后统一提交到git仓库 Git Repository (Git仓库) 最终确定的文件保存到仓库，成为一个新的版本，...
2021-05-14 21:48:08
195
原创 Vue响应式原理
当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。...
2021-05-13 21:05:55
80
原创 JavaScript 中 for in 和 for of 的区别
for in和for of的异同点 比较 for in for of 不同点 可以遍历普通对象 遍历出数组的原型对象 可以遍历出数组自身属性 遍历出来的值是key 不可以遍历map/set 不可以迭代generators IE 支持 不能遍历普通对象 不会遍历出原型对象 不会遍历自身属性 遍历出来的值是...
2021-05-12 21:54:35
133
原创 Vue实例中的数据对象
1、数据对象当一个Vue实例被创建时，它将data对象中的所有属性加入到Vue的响应式系统中。当这个属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。代码示例：// 声明数据对象var data = { msg: "hello" }// 该对象被加入到一个 Vue 实例中var vm = new Vue({ data: data})上面代码中，可以将我们声明的对象赋值到Vue实例中，使用vm.msg == data.msg比较时，结果为tru...
2021-05-11 21:36:00
1189
原创 Vue中v-text和v-html 指令运用
v-text在标签中显示文本数据，数据对象中的数据会被原样输出，例如：<span v-text="message"></span><!-- 简写方式 --><span>{{message}}</span>在模板中输出真正的HTML，如果是使用v-text输出带标签的字符串的话，仅仅是想页面中输出带标签的HTML，但是不会对HTML代码进行解析，如果要解析HTML代码，就要使用v-html指令。例如：<p v-t...
2021-05-10 21:58:08
842
原创 Let和Const的使用区别
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字:let和const。let 声明的变量只在 let 命令所在的代码块内有效，const 声明一个只读的常量，一旦声明，常量的值就不能改变。1、let命令let命令有以下特点：（1）代码块内有效ES2015(ES6) 新增加了两个重要的 JavaScript 关键字:let和const。let 声明的变量只在 let 命令所在的代码块内有效，const 声明一个只读的常量，一旦声明，常量的值就不能改变。...
2021-05-08 08:03:09
472
原创 Axios在Vue项目中全部方法实例详解
1、基本用法安装cnpm i axios --save在main.js中引入axiosimport axios from 'axios'Vue.prototype.$axios = axios在组件中使用axios<script>export default { mounted(){ this.$axios.get('/goods.json').then(res=>{ console.log(res.data); }) ...
2021-05-07 16:59:51
364
转载 HTML5实现拖放效果
效果图：HTML代码：<!-- 课程元素 --><div class="list"> <div class="item blue" id="html" draggable="true" ondragstart="start(event)">HTML</div> <div class="item pink" id="css" draggable="true" ondragstart="start(event)">CSS</div
2021-05-07 07:57:57
265
原创 设置html title标题左侧的小图标
网页title旁边的小图片设置，图片要求格式必须是.ico，可以使用在线的转换工具把jpg和png图片转换为ico图片，转换工具百度即可。在html文件中的<head></head>标签中加上： <link rel="icon" href="img/logo.ico" type="img/x-ico" />...
2021-05-06 17:49:19
1156
原创 Flex弹性盒子布局详解
Flex弹性盒子布局详解目录Flex弹性盒子布局详解1、什么是 flex 布局2、基本概念3、容器的属性4、项目的属性1、什么是 flex 布局Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。2、基本概念2.1、什么是 flex 容器（flex container）？采用 flex 布局的元素，称为 flex 容器：.box { display: flex | i.
2021-05-06 17:07:24
502
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人