王美的个人博客

一个解决B站文章不可复制插件配置文件 manifest.json1234567891011121314151617181920212223{ "name": "allow copy", "description": "解锁bi站复制限制", "version": "1.0", "manifest_version": 2, "browser_action": { "default_icon": "icons/copy.jpg" }, "content_scripts": [ { "matches": [ "https://www.bilibili.com/read/*" ...

websocket前端 示例代码1234567891011121314151617181920212223242526272829303132333435<script> var input =document.querySelector('input') var button =document.querySelector('button') var div =document.querySelector('div') // 1.创建websocket var socket =new WebSocket('ws://echo.websocket.org') // 2.open: 当和websocket服务连接成功的时候触发 socket.addEventListener('open',function(){ div.innerHTML='连接服务成功了' }) // 3.主动给websocket服务器发送 ...

css 变量$ $Primary-color : #333; Modules 模块@use 12345678// _base.scss$font-stack :Helvetica,sans-serif;$primary-color:#333;body{ font: 100% $font-stack; color: $primary-color;} 123456@use 'base';.inverse{ background-color: base.$primary-color; color: #fff;} Mixins & Functions@mixin Sass12345678@mixin transform ($property) { -webkit-transform: $property; -ms-transform: $property; transform: $property;}.box { @include transfo ...

The ReactiveX library fro JavaScript Reactive-Extensions (RX) RxJS 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。 RXJS 介绍一组可用来处理 非同步 或事件 的JavaScript 函数库。 非同步 AJAX / XHR (XMLHttpRequest) / fetch API Service Worker / Node Stream setTimeout / setInterval Promise 事件各式 DOM 事件 (click ,dbclick ,keyup ,mousemove … )css 动画事件 (css3 transitionEnd event)HTML5 Geolocation (地理地位)/ WebSockets (在单个 TCP 连接上进行全双工通讯的协议) / server Send Event(SSE) RXJS 的核心概念Observable 可观察的物件 代表一组未来即将发生的事件资料（被观察的物件） Observer 观察者 ...

如果有说错了，请见谅。此文章链接在知乎上： 前端学习路线（很长，建议收藏） - 有一天wm的文章 - 知乎https://zhuanlan.zhihu.com/p/164701269 一、编辑器：VSCode (推荐使用)​ WebStorm Atom Sublime 二、HTML 常用标签 表单 HTML 三、CSS基本语法布局（浮动float、定位position、盒模型、flex、grid/layout)响应式布局 viewport（用户网页的可视区域） 1<meta name="viewport" content="width=device-width, initial-scale=1.0"> 流动布局（fluid grid） 媒体监听@media 12345@media only screen and (max-width: 500px) { .gridmenu { width:100%; } } ...

实例vue(3步)：1.创建根实例:let app =new Vue({}) 2.挂载根实例：let app = new Vue({ el:’#app’}) 3.绑定数据：let app =new Vue({ el:’#app’, data: {age:24}}) vue核心数据的双向绑定、组件化 $el表示在vue实例上挂载的DOM对象属性app.$el ===document.getElementById(“app”) $data表示在vue实例上挂载的数据属性app.$data.apge === app.age //true 基本指令v-html: 原始htmlv-once:单项绑定v-pre:跳跃编译，显示原始标签v-bind:属性绑定 （ ：）绑定 class12345<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> 和如下 ...

ES6 常用新特性let && constlet 命令也用于变量声明，但是作用域为局部 123456{ let a =10; var b =1;} 在函数外部可以获取到 b，获取不到 a,因此例如for循环计数器就适合使用 let。 const 用于声明一个常量，设定后值不会再改变 12345const PI =3.1415;PI //3.1415PI=3; //TypeError: Assignment to constant variable. iterable 类型为了统一集合类型，ES6 标准引入了新的iterable类型，Array、Map 和 Set 都属于iterable类型，具有iterable类型的集合可以通过新的 for ...of 循环来遍历 12345678910111213141516var a=['A','B','C'];var s=new Set(['A','B','C']);va ...

项目地址在 https://github.com/Hard-workingrookie/todoList_vuex 组件之间共享数据的方式父向子传值： v-bind 属性绑定子向父传值： v-on 属性绑定兄弟组件之间共享数据 ：EventBus $on 接收数据的那个组件 $emit 发送数据的那个组件 Vuex 是什么Vuex是实现正在组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。 Vuex 的基本使用安装 Vuex 依赖包1npm install vuex --save 导入 Vuex 包12import Vuex from 'vuex'Vue.use(Vuex) 创建 store 对象123const store =new Vuex.Store({ state:{count：0}}) 将 store 对象挂载到 vue 实例中123456new Vue({ el:'#app', render:h=>h(app), router ...

Next.js简介Next.js 是一个轻量级的 React 服务端渲染应用框架。 目前Next.js是React服务端渲染的最佳解决方案，所以如果想使用React来开发需要SEO的应用，基本上就要使用Next.js。 创建next.js项目1npm install -g create-next-app 目前可以支持三种方式的创建，分别是用npx,yarn和create-next-app命令来进行安装，安装的结构都是完全一样的，以npx为例。 npx 是Node自带的npm模块，所以你只要安装了Node都是可以直接使用npx命令的。 1npx create-next-app next-create 安装完成之后进入项目目录 1yarn dev 在浏览器中输入http://localhost:3000/看运行效果。 Next.js的Page和Component的使用新建页面和访问路径直接在根目录下的pages文件夹下，新建一个litterWang.js页面。然后写入下面的代码： 12345function litterWang(){ return (<b ...

babel-plugin-importwebpack 就不会默认把整个的包都进行打包到生产环境了，而是我们使用那个组件就打包那个组件,同样 CSS 也是按需打包的。 配置举例： 12345678910111213{ "presets":["next/babel"], //Next.js的总配置文件，相当于继承了它本身的所有配置 "plugins":[ //增加新的插件，这个插件就是让antd可以按需引入，包括CSS [ "import", { "libraryName":"antd", "style":"css" } ] ]} next.js 引入 css先用 yarn 命令来安装@zeit/next-css ...