前端学习记录
关注
分享
扫一扫
前端学习记录
Gjanuary
心在山东身在吴，飘蓬江海谩嗟吁。 他时若遂凌云志，敢笑黄巢不丈夫
展开
-
vue-cli安装记录：
1.检测版本vue-X （4.5以上）2.安装环境：npm install -g @vue/cli3.执行命令：vue create 项目的名字最终完成效果：启动：运行效果原创 2022-04-13 13:16:15 · 359 阅读 · 0 评论 -
利用before伪元素给视频加遮罩层，鼠标触碰时候显示遮罩层
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...原创 2022-03-18 14:24:56 · 451 阅读 · 0 评论 -
nth:child以及nth-of-type的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> .原创 2022-03-18 13:43:55 · 231 阅读 · 0 评论 -
css3中属性选择器测试
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> .原创 2022-03-18 11:21:26 · 406 阅读 · 0 评论 -
flex弹性容器的基本使用
<!DOCTYPE html><html><head> <meta charset="utf-8"> <!-- 移动端必设置 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /> <title>弹性容器使用&.原创 2022-02-26 09:11:58 · 165 阅读 · 0 评论 -
less基础了解
// 这种注释less文件生成css文件中是不可见的/* 这种注释是css可见的*/div{ width: 200px; height: 200px; background-color: aqua; #child{ width: 100px; height: 100px; background-color: red; }}// less中声明变量@wh:200px;.demo{ width.原创 2022-02-22 11:48:41 · 136 阅读 · 0 评论 -
浮动引起的高度塌陷最好的解决方案
<!DOCTYPE html><html><head> <meta charset="utf-8"> <!-- 移动端必设置 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /> <title>浮动引起的高度.原创 2022-02-14 16:51:49 · 314 阅读 · 0 评论 -
vue中嵌套路由注意事项：
其实原理和之前做的正常的路由是一样的，但是需要注意的点：路由器index.js中配置：，在组件中调用：效果：原创 2022-01-20 13:58:41 · 586 阅读 · 0 评论 -
vue-router路由器的基础原理案例，实现页面无刷新切换
安装命令 cnpm i vue-router安装完毕后：进行配置路由，在src目录下创建router/index.js文件，在index.js文件中进行配置处理：// 该文件专门用于创建整个应用路由器import VueRouter from 'vue-router'// 引入组件import st from '../components/HelloWorld'import stc from '../components/Student'// 创建一个路由器并且需要暴露ex...原创 2022-01-13 18:58:21 · 851 阅读 · 0 评论 -
vuex的使用流程
vuex的使用流程1.调用 this.$store.dispatch('addnumber',需要传送的值)2.action中进行流程分发const actions = { addnumber(minVue,val){ minVue.commit('ADDNUMBER',val) }}3.mutations用于逻辑操作处理const mutations = { ADDNUMBER(state,val){ // 比如加法进行简单的逻辑处理 .原创 2022-01-12 18:23:37 · 325 阅读 · 0 评论 -
使用vue脚手架解决跨域问题
先用nodejs创建两个服务器端口自己随便设置// 服务器1var http = require('http')// 创建一个web服务器var server = http.createServer()// 接收到客户端发过来的请求server.on('request',function(request,response){ reData = [ {'name':'刘德华','age':31,'gender':'男'}, {'name':'杨幂','age':27,'gende..原创 2022-01-07 15:54:50 · 878 阅读 · 0 评论 -
vue全局事件总线写法
// main.js中进行省声明公共总线new Vue({ // 将app组件放到容器中 render: h => h(App), beforeCreate(){ Vue.prototype.$bus = this }}).$mount('#app')// 在需要设置监听的位置给一个监听 mounted(){ this.$bus.$on('xxx',(data)=>{ console.log('B组件已经接收到数据，数据内容是：',.原创 2021-12-29 15:24:15 · 592 阅读 · 0 评论 -
vue中三种方式：子传父数据
App.vue中代码-------------------<template> <div id="app"> <HelloWorld :getson="getson" @getsondata="getson2" ref="Univer"/> <!--this.$ref.helloworld--> </div></template><script>import HelloWorld f.原创 2021-12-22 16:12:11 · 1533 阅读 · 0 评论 -
浏览器的本地存储webStorage
webStorage:(1)localStorage(2)sessionStorage localStorage sessionStorage 存储在浏览器中，浏览器关闭再次打开数据还在 浏览器关闭在打开就不存在了 手动清楚或者调用api可以清楚 手动清楚或者调用api或者关闭浏览器清楚 方法写法都是一样的 <!DOCTYPE html><html><head> <meta charset="utf-...原创 2021-12-22 13:41:13 · 275 阅读 · 0 评论 -
vue中的ref属性（相当于正常dom结构中id）
<template> <div class="hello"> <h1 v-text="showmsg" ref='s1'></h1> <button ref='btn1' @click="cshow">click me</button> <Ceshi ref='ceshi1'/> <h1>{{ msg }}</h1> ...原创 2021-12-15 14:16:19 · 1203 阅读 · 0 评论 -
vue组件的嵌套
vue组件嵌套原创 2021-12-09 17:08:10 · 123 阅读 · 0 评论 -
简单的非单文件组件创建，注册，和使用
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="./vuebasic/vue.js"></script></head><body> <div id="root"> <!--第三部引入组件标...原创 2021-12-08 18:57:15 · 662 阅读 · 0 评论 -
vue生命周期详细
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue生命周期</title> <script type="text/javascript" src="./vuebasic/vue.js"></script> <style> </style></head>&l.原创 2021-12-08 17:17:29 · 184 阅读 · 0 评论 -
vue内置指令
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue的内置指令</title> <script type="text/javascript" src="./vuebasic/vue.js"></script> <style> [v-cloak]{ dis.原创 2021-12-02 19:29:38 · 410 阅读 · 0 评论 -
vue中过滤器的使用
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>时间格式化处理</title> <script type="text/javascript" src="./vuebasic/vue.js"></script> <!--引入日期格式化js=>dayjs--> <script type="text/.原创 2021-12-02 17:59:43 · 386 阅读 · 0 评论 -
vue收集表单学习记录
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>收集表单数据</title> <script type="text/javascript" src="./vuebasic/vue.js"></script> <style> #root{ width:242px; .原创 2021-12-02 17:09:44 · 472 阅读 · 0 评论 -
css需要特别注意点
（1）CSS Display/Visibility 属性属性 描述 display display属性设置为none可以隐藏元素。该元素将被隐藏， 并且页面将显示为好像该元素不在其中 visibility 可以隐藏元素。但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局： （2）position属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。...原创 2021-12-02 15:22:24 · 207 阅读 · 0 评论 -
css中filter的功能测试
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css中filter属性的使用</title> <style> img{ width: 100px; } div{ float: left; text-align: center; margin-left: 15px; padding: 4px; ...原创 2021-12-02 13:56:42 · 448 阅读 · 0 评论 -
vue中升序和降序操作
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>列表排序</title> <script type="text/javascript" src="./vuebasic/vue.js"></script></head><body> <div id="root" > <h.原创 2021-12-01 19:33:01 · 1870 阅读 · 0 评论 -
vue中列表过滤
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>列表过滤</title> <script type="text/javascript" src="./vuebasic/vue.js"></script></head><body> <div id="root" > <h.原创 2021-12-01 19:07:38 · 134 阅读 · 0 评论 -
key 的使用和原理注意的点
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>key的原理</title> <script type="text/javascript" src="./vuebasic/vue.js"></script></head><body> <div id="root"> <.原创 2021-12-01 18:00:51 · 727 阅读 · 0 评论 -
vue列表渲染
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="./vuebasic/vue.js"></script></head><body> <div id="root"> <ul>.原创 2021-12-01 16:28:13 · 207 阅读 · 0 评论 -
vue条件渲染
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="./vue.js"></script></head><body> <div id="root"> <!--（v-show当为false的时候.原创 2021-11-29 21:55:27 · 181 阅读 · 0 评论 -
vue的v-bind和v-model区别，以及绑定节点2种方法
<!--指令命令:--><!--单项数据绑定--><input type="text" v-bind:value="name"/><!--双项数据绑定--><input type="text" v-model:value="name"/><!--v-model数据双向绑定只能作用在表单类元素上--><!--<v-model>默认收集的就是value的值，所以上面的代码可以简写成v-model="nam.原创 2021-11-17 16:59:23 · 135 阅读 · 0 评论 -
websocket聊天室的基础原理（html5，nodejs搭建服务器）
（1）：搭建nodejs服务器以后，cnpm install nodejs-websocket 进行安装这个模块，会生成一个node_modules文件夹（2）创建websocket服务器app.js：// 导入nodejs-websocket包const ws = require('nodejs-websocket')// 创建一个服务// 每次只要有用户链接下面的代码就会执行一次，会给当前链接用户创建对象var server = ws.createServer((conn)=>{原创 2021-11-10 14:59:02 · 2234 阅读 · 0 评论 -
封装promise，解决异步顺序执行问题
// 封装promise，解决异步问题let fs = require('fs')function promiseFile(filePath){ return new Promise((resolve,reject)=>{ fs.readFile(filePath,'utf8',(err,data)=>{ if(err){ reject(err) }else{ resolve(data) } }) });}promiseFile('a.txt原创 2021-11-06 20:24:40 · 163 阅读 · 0 评论 -
promise解决异步顺序问题
比如我有三个文件，分别是a.txt,b.txt,c.txt当用nodejs中的fs模块去读取的时候：let fs = require('fs')fs.readFile('a.txt','utf8',(err,data)=>{ if(err){ throw err }else{ console.log(data) }})fs.readFile('b.txt','utf8',(err,data)=>{ if(err){ throw err }else{ con.原创 2021-11-06 20:12:00 · 435 阅读 · 0 评论 -
javascript自己需要了解的点
javascript自己需要了解的点：json对象转化成字符串：json.stringify(json对象)json字符串转化成json对象：json.parse(json字符串)javascript:void(0) 含义：javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值单击此处什么也不会发生window.navigator 对象包含有关访问者浏览器的信息。txt =原创 2021-11-06 18:58:50 · 404 阅读 · 0 评论 -
mongodb简单记录
mongodb启动和关闭数据库启动：#mongodb默认使用执行mongod命令所处盘符目录下的/data/db作为自己的数据库存储目录，所以在第一次执行该命令之前先自己动手创建一个/data/db`mongod 命令进行启动`如果想要修改默认存储目录mongod --dbpath=数据库存储目录路径停止服务：在开启的服务台，直接ctrl+c进行停止，或者直接关闭开启的服务台即可连接数据库#该命令默认连接本机的mondb服务mongo退出数据库exit()表示退出基本命令sh原创 2021-11-04 18:09:20 · 118 阅读 · 0 评论 -
解决nodejs重启问题：使用nodemon工具
nodemon解决nodejs代码修改之后频重启服务器问题这个需要独立安装安装命令：cnpm install --global nodemon安装完毕后，启动命令：原始的nodejs启动命令:node index.js使用nodemon 启动:nodemon index.js原创 2021-10-28 18:37:25 · 372 阅读 · 0 评论 -
nodejs模仿Apache的分发原理
// 引入http模块const http = require('http');// 创建服务器var fs = require('fs');let server = http.createServer();// 对请求进行处理commonDir = 'C:/Users/chenf/Desktop/webpro/nodejs/resource'server.on('request',(req,res)=>{ // 默认是utf-8，但是浏览器不知道，浏览器的gbk // 解决方.原创 2021-10-04 00:23:27 · 143 阅读 · 0 评论 -
nodejs中如何通过链接把html页面或者是图片显示出来
// 引入http模块，通过文件的方式读取不同文件下的html文件或者是图片，html的设置类型是text/html.字符串的设置类型是text/plain而图片不需要设置utf-8，jpg只需要设置image/jpeg即可const http = require('http');// 创建服务器var fs = require('fs');let server = http.createServer();// 对请求进行处理server.on('request',(req,res)=&g.原创 2021-10-03 00:41:09 · 1758 阅读 · 0 评论 -
nodejs中多个js文件require，exports使用
比如两个文件a.js 和b.js 如果想让系统运行a.js文件的同时也运行b.js文件中的代码我们直接使用require按照相对路径引入即可例如：let ret = require('./b.js');这样就会直接在运行a的同时运行b文件中的代码，我们也可以省略后面的js代码段let ret = require('./b');但是在nodejs中我们是无法直接在a文件中使用b文件的属性和方法的，如果要想使用我们必须使用关键字exports暴露出a中需要给b中使用的接口，...原创 2021-10-02 08:58:19 · 1354 阅读 · 0 评论 -
es6中class的getter 和setter的用法小案例
class China{ get province(){ console.log('--已经进入了这个方法--') return '北京市'; } set province(city){ console.log('省份已经更改'); }}let country = new China();const d = country.province;console.log(d);country.province = '哈尔滨市';...原创 2021-09-17 12:50:01 · 267 阅读 · 0 评论 -
es6类的继承
class clothes{ constructor(name,price){ this.name = name; this.price = price; } show(){ console.log("价格最便宜"); }}class sonClothes extends clothes{ constructor(name,price,size){ super(name,price); this.size = size; } keepWarm(){ consol.原创 2021-09-17 12:32:52 · 98 阅读 · 0 评论