- 博客(33)
- 收藏
- 关注
RSS订阅原创 坑-state ,localStorage
1.如果在vue中computed一个变量，不要在computed中使用localStorage。例如computed: { image() { // bad computed中无法监听localStorage return localStorage.getItem('imgUrl') }, pic() { // good return this.$store.state.picUrl }2.关于state，如果打开了新标签页，state会重载，如果你将登录的信息保存到sta
2020-07-18 23:49:40
749
原创 webpack4利用html-loader实现HTML代码复用同时解决图片失效问题。
webpack处理多页面应用的时候，可以利用html-loader处理每个页面相同的HTML代码，例如header/footer.现在我有一个header，想复用这个header。<header> <div class="intro"> <div class="logo"></div> <div cl...
2020-04-03 22:03:09
944
1
原创 input输入框如何处理中英文输入
input可以监听keydown,keyup,input,change等事件keydown: 键盘按下keyupp: 键盘回弹input: 输入change: 失去焦点触发如果你要通过监听input的value值改变然后发送ajax请求来获取数据，input可以处理，每输入一个字符就触发一次，失去焦点之后也可以触发change发送ajax。但是这是面对英文输入，当遇到中文输入的时候，按...
2020-04-03 16:43:54
1683
原创 webpack4多页面应用--多个页面需要同一份代码，如何处理
问题：多页面应用中每一个HTML页面需要引入同一份js文件，如何利用webpack处理这一份js文件。解决：1.首先将这份代码放到一个js文件中，然后将这份文件单独配置一个出口文件。import $ from 'jquery';import './../style/header.scss';function createHeader() { return `<header&...
2020-04-03 14:25:24
230
原创 webpack4中多页面应用引入jq
引入jquery需要expose-loadernpm i expose-loadr -Dwebpack.config.jsmodule: { rules: [ { text: require.resolve('jquery'), use: [{ loader: 'expose-loader', //暴...
2020-04-03 14:12:28
254
原创 a标签点击之后颜色不变
a:link{ color: #fff;}a:visited{ color: #fff;}a:hover{ color: #fff;}a:active{ color: #fff;}顺序不能改变
2020-03-28 15:51:26
5075
原创 子元素position为fixed时，宽度如何保持与父元素一致。
position: fixed是生成绝对定位的元素，相对于浏览器窗口进行定位。如果设置宽度100%，宽度会超过父元素如果设置宽度width: inherit，会继承父元素宽度
2020-03-28 11:22:01
8860
6
原创 flex布局，占满余下宽度或余下高度
.father{ display: flex; flex-flow: row nowrap; .son1{ width: 20px; } .son2{ flex-grow: 1; }}占满宽度，flex-direction: row占满高度，flex-direction: column最后一个元素flex-f...
2020-03-26 22:04:10
28673
原创 webpack将CSS文件打包到指定文件夹
插件mini-css-extract-pluginconst MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { module: { rules: [ { test: /\.css$/, // use: ['style...
2020-03-26 13:48:43
2946
原创 webpack如何将js文件单独打包到指定文件夹
module.exports = { entry: { main: './src/main.js', index: './src/index.js' }, output: { //前面添加路径，最后js生成在dist/js文件夹下 filename: 'js/[name].js', path: path.resolve(__dirname, 'dist') }}...
2020-03-26 13:30:14
4262
原创 webpack如何将HTML文件单独打包到指定文件夹
html文件的打包js文件的打包css文件的打包字体文件的打包html文件的打包：html-webpack-pluginconst path = require('path')const HTMLWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: { main: './src/m...
2020-03-26 13:27:38
1381
原创 关于webpack的output和devServer的配置
最近利用webpack搭建一个开发环境，实现本地服务器的开启。webpack的本地服务器用的是express，但下面遇到的问题跟express应该没什么关系。这里有几个问题，现在通过文章来一一解决。1.我写一个html文件，webpack只认识js文件，那我如何处理html文件。答：通过插件html-webpack-plugin来处理html文件。他能够单独生成HTML文件const p...
2020-03-26 13:24:59
549
原创 搭建前端服务器和后端服务器实现通讯
前端：如果是使用webpack或者vue-cli的，直接运行本地服务器就可以了。后端：node app.js启动服务在前端发送ajax，后端设置跨域即可实现通讯。res.setHeader(“Access-Control-Allow-Origin”,"*");...
2020-03-25 11:05:21
1561
原创 关于搭建服务器
想搭建一个服务器，来展示网页。百度一下服务器，有apache,tomcat各种各样的，但是用哪种服务器呢？服务器分两种，一种是web服务器，一种是应用服务器。（我自己了解就这样种，因为我要用到，其他服务器类型就不清楚了）web服务器一般是用来处理HTTP请求，然后返回静态资源（例如html文件）。应用服务器就是用来处理动态请求的，然后返回动态资源（例如php）。静态资源或者说静态网页，就...
2020-03-23 22:15:45
130
原创 Vue双向数据绑定
原理是通过数据劫持结合发布-订阅模式实现的。数据劫持：Object.definedPropety()重新定义get/set方法来劫持数据。发布者Observer：监听所有的属性。订阅者watcher编译器compile:初始化watcherDep：收集watcher过程：数据更新，触发setter方法，setter方法里面调用了Dep.notify()方法，Dep开始遍历watcher...
2020-03-23 10:55:48
70
原创 URL的hash模式和history模式的区别
hash模式例子：http://www.example.com/index.html#location1#是一个位置标识符，利用a标签的herf属性可以进行页面内位置的跳转。http请求不会发送#后面的字符串到服务器，如果要发送，要将#转码为%23。改变#不会触发网页的重载，但是会增加浏览器的历史访问记录，但ie6/7不存在这个规则。可以通过window.location.hash读取...
2020-03-20 17:14:02
1336
原创 页面内位置跳转
1.利用a标签的herf属性，等同于window.location.hash<a herf='location1'></a><a herf='location2'></a><div id='location1'></div><div id='location2'></div>2.利用Ele...
2020-03-20 16:34:50
186
1
原创 浏览器兼容性汇总
1.事件对象let event = event || window.event2.DOM.addEventListener/removeEventListenerDOM.attachEvent/detachEvent
2020-03-18 18:08:27
121
原创 javascript中的事件
事件javascript与HTML的交互是通过事件实现的。有一个概念，就是事件流。事件流的意思是从页面中接收事件的顺序。IE的事件流是事件冒泡，netscape的事件流是事件捕获。事件冒泡：事件开始时由最具体的元素（target）接收，然后逐级向上传播到较为不具体的节点。事件捕获：由不太具体的节点更早地接收到实事件，然后逐级向下传播到最具体的节点。DOM事件流：DOM2级事件规定的事...
2020-03-18 17:24:43
83
原创 关于轮播图
1.事件绑定<li onclick="move()"></li>左边是事件，右边是处理函数，需要加括号，如果要获取事件对象，就把event传进去，如果要获取this，就把this传进去。2.HTML自定义属性要获取标签的自定义属性，要用getAttribute()，修改要用setAttribute()。3.给DOM元素增加或者删除class用DOM.classL...
2020-02-13 00:07:54
131
原创 Vue通过import引入本地json文件
import detail from '@/json/learn.json'import detail from '../json/learn.json'// 这里detail不用{}包裹mounted(){ console.log(detail)}
2020-01-30 16:34:01
9435
2
原创 Vue实现v-for生成标签后默认展示第一个
<template> <div> <ul> <li v-for="(item, index) in list1" @mouseenter="handleMouseEnter" :id="index"></li> </ul> <div> <div v-for="(item, index...
2020-01-29 14:36:06
4819
原创 关于Vue组件库Css样式的总结
1.在@mixin内部定义变量，使用@content占位符来占据后续内容位置。2.使用@include来嵌套使用，形成BEM命名策略的css样式3.$block是指input组件, $element是指input里面的元素，例如input框, $modifier是指元素的不同状态。4.@mixin B(){} ==> .zou-input5.@mixin e(){} ==>...
2019-11-13 11:06:22
638
原创 Vue-slot
Vue中插槽的目录如下：插槽内容编译作用域后备内容具名插槽作用域插槽独占默认插槽的缩写语法5.2解构插槽Prop动态插槽名具名插槽的缩写插槽内容编译作用域后备内容具名插槽作用域插槽独占默认插槽的缩写语法解构插槽Prop动态插槽名具名插槽的缩写...
2019-10-28 16:06:50
160
原创 Git工作流程
1.初始化本地仓库git init 2.添加文件到trackgit add .3.添加文件到本地仓库git commit -m "message"4.将本地仓库和远程仓库关联，demo为远程仓库名字，以后提交会使用这个名字git remote add demo url5.提交到远程仓库，默认主分支为mastergit push name master6.创建本地分支d...
2019-10-26 20:21:59
71
原创 关于vee-validate3.0用法
网上关于vee-validate3.0的文章并不多，但是很幸运有详细的官方文档。由于没有用过vee-validate2.x版本，加上技术没那么牛逼，所以阅读起来有些障碍。花了比较多的时间去阅读文档和采坑，终于有了点心得。先把遇到的情况写下来，以后再详细补充。vee-validate3.0有什么方法提供我们使用，暴露出多少接口？可以查看vee-validate3.0的源码export { Va...
2019-09-10 15:49:19
4747
原创 踩过的坑：Vue引入Sass文件
问题：在使用vue cli 3.0开发自己网页的过程中，想把CSS样式单独抽离出来，因为Sass的嵌套写法显得层次十分清晰，所以我个人是十分喜欢的。但是在CSS样式单独抽离形成文件之后再引入，发现只有第一层样式作用上了。问题来了，为什么呢？CSS.section{ /* 只有这层作用上了 */ width: 500px; height: 500px; background-color...
2019-08-23 21:45:13
1483
1
原创 Vue基本指令
v-if：true渲染元素，false删除元素HTML<div id="vm"> <div v-if="flag">flag=true显示，flag=false移除dom</div></div>JavaScriptconst vm = new Vue({ el: "#vm", data: { fla...
2019-08-20 15:01:11
128
原创 函数的节流和防抖
一个DOM元素绑定了事件，如果不断地触发事件，函数会频发地执行，这样会消耗大量的性能。这时候，节流和防抖就是很好的解决方案。const myDiv = document.getElementById("click");const mySpan = document.getElementById("show");let num = 0;function count () { num+...
2019-08-08 18:13:11
107
原创 VUE：JavaScript模拟DOM
DOM结构 <div id="container"> <h1 class="title"> JS模拟DOM <span>哈哈</span> </h1> <p class="content">模拟模拟</p> ...
2019-08-07 17:27:51
138
2
原创 重排和重绘
重绘(repaint)——当页面中的元素只是外观或风格被改变不影响布局，这个过程就是重绘。重排(relayout)——当RenderTree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变，浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构的过程，也就是重新构造渲染树 ,这个过程叫做重排（relayout）。回流(reflow)——Gecko中布局的称谓，同时也是重排的别...
2019-08-07 17:11:12
123
2
翻译 浏览器渲染过程
浏览器下载页面中所有的组件：HTML、JavaScript、CSS、图片后：解析HTML代码，构建DOM树。解析CSS，生成CSS规则树。合并DOM树和CSS规则树，生成Render树。布局Render树，负责各元素尺寸、位置的计算。绘制Render树，绘制页面像素信息。浏览器将各层的信息发送给GPU，GPU将各层合成。...
2019-08-07 16:50:44
89
3
翻译 从输入网址，按下回车键，到网页展示内容，发生了什么。
域名解析。（先查找本地DNS缓存列表，没有的话再向默认的DNS服务器发送查询请求并缓存）发起TCP的3次握手。建立TCP连接后发起http请求。服务器端响应http请求，浏览器得到html代码。浏览器解析html代码，并请求html代码中的资源。浏览器对页面进行渲染呈现给用。...
2019-08-07 16:46:42
539
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人