guokanglun-CSDN博客

原创 vscode 快捷方式

2. 设置vue模板[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k4TEEJzR-1657763465075)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/202e96b33b654f6b93f1161415174a8e~tplv-k3u1fbpfcp-watermark.image?)]vue.json 内容示例：...

2022-07-14 09:51:24 1057 1

原创 css 动画、滤镜

只需要规定起始帧和结束帧（1）参数过渡动画时间：transition-duration过渡动画延迟：transition-delay动画帧速率： transition-timing-function复合样式：属性名过渡时间过度动画时间函数动画延迟时间;display：none --> display: block 没有动画效果opacity: 1 --> opacity: 0 有动画效果轮播淡入淡出效果2. 主动式动画创建动画帧：语法：参数：animation-

2022-07-08 16:23:11 339

原创数组骚操作

作用：将对象展开1.2 复制数组（浅拷贝）1.3 合并数组1.4 字符串转数组2. 数组循环2.1 forEach2.2 map重新整理数据结构2.3 filter过滤数组2.4 some every返回布尔值2.5 reduce统计，求和3 . Array.from()作用: 把类数组对象转成数组3.2 类数组转数组3.3 数组过滤3.4 接收第二个参数（函数），处理每一个对象，类似map3.5 假值用 0 替换4. arr.find()

2022-07-07 17:31:56 263

原创 vue图书馆demo

2022-01-20 16:34:24 277

原创 vue 任意组件消息传递

一个组件传递消息给另一个组件（任意组件传递）全局配置/** 添加事件总线$bus，用以组件之间通信 */Vue.prototype.$bus = new Vue()组件一：async onOK(){ this.$bus.$emit('updateSjzbTree')}组件二：created(){ this.init() this.$bus.$on('updateSjzbTree', this.init)},使用场景：一个页面数据变动，需要另一个页面也相应

2021-07-20 15:58:30 208

原创 ts 编译

文章目录1. vscode 编译ts后报错问题2. 自动编译单个ts文件3. 自动编译所有ts文件4. tsconfig.json 部分配置1. vscode 编译ts后报错问题在项目根目录添加tsconfig.json文件（空文件也行）2. 自动编译单个ts文件tsc demo.js -w3. 自动编译所有ts文件需要有tsconfig.json 文件（空文件也行）tsc -w4. tsconfig.json 部分配置{ // 指定哪些ts文件需要编译 ** 任意目录 *任意

2021-06-14 17:38:07 641

原创 ts 函数类接口泛型

// a类型 b类型返回值类型function add(a:number, b:number):number { return a + b}add(1, 2)注意点：形参实参个数必须一样形参实参类型必须一样返回值类型必须一样

2021-06-14 11:13:58 374

原创 ts基本数据类型

文章目录1. 变量声明2. 数据类型2.1 元组Tuple2.2 枚举类型2.3 任意类型Any2.4 void, undefined, null2.5 Never 类型3. 类型断言1. 变量声明TypeScript的变量声明方式从整体语法结构来看和JavaScript类似，但是有一些细微的差别let [变量]:[类型] = 值;特点：赋值语句中等号右侧的类型和等号左侧的值类型必须完全一致，否则会报错；如果赋值的时候传入的是正确的值，后期重新赋予错误的值，同样也会报错例：下面两种情况都会报

2021-04-09 14:13:46 361

原创 vue实现滚动下拉加载更多功能

<template> <div> <ul class="box"> <li v-for="item in dataList"> {{item}} </li> </ul>  </div></temp

2021-04-09 11:33:22 1962

原创 vue mixin

1. mixin 概念混入提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项被混合进入该组件本身的选项2. 基本使用新建mixin/index.js 文件export const myMixin = { mounted () { console.log('hello mixin') }};组件里调用（例如App.vue）<script> import {myMi

2021-04-08 15:44:57 95

原创 vue + ueditor

关于在vue-cli3 里使用UEditor的一次简单记录1. 准备工作步骤1：下载UEditor文件夹： https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads选择其中一个即可（我选择的是utf8-php.zip）步骤2：将下载后的文件夹重命名为UEditor，放置在public文件夹下步骤3：安装 vue-editor-wrapnpm i vue-ueditor-wrap --save

2021-04-08 11:41:14 169

原创 js替换所有

例：将字符串里的a替换为fconst str = 'Abcabcabcabcabcabc';// g 全局匹配； m 换行匹配； i 忽略大小写const res = str.replace(new RegExp('a', 'gmi'), 'f');console.log(res); // fbcfbcfbcfbcfbcfbc

2021-03-25 16:07:20 854

原创 web 前端面试题

文章目录1. 外边框实现方法2. es6里字符串的方法3. foreach 和 map的区别4. es6新增数组对象方法5. 说说你用过的es6方法6. 扩展运算符都有哪些作用7. 深浅拷贝8. 解构赋值怎么用9. 箭头函数的特点10. 动画11. 闭包 es6 this指向加载优化12. 小程序页面跳转13. props 默认值对象14. css 选择器优先级15. 如何将vue项目部署到服务器上16. 父组件里修改子组件的样式17. css 水平居中垂直居中18. flex-shrink

2021-03-11 18:38:08 167

原创 vue-cli3 使用mint-ui 按需打包

文章目录1. 模块安装2. 修改配置babel.config.js3. 使用1. 模块安装npm i mint-ui -Snpm install babel-plugin-component -D2. 修改配置babel.config.jsmodule.exports = { presets: ["@vue/app"], plugins:[ [ "component", { "libraryName": "mint-ui",

2021-02-15 01:01:36 310

原创 mouseenter、mouseleave、mouseover和mouseout的区别

mouseenter 鼠标移入mouseover 鼠标移入mouseleave 鼠标移出mouseout 鼠标移出mouseenter 和 mouseleave 是一组mouseover和mouseout 为另一组区别：父元素绑定 mouseenter 和 mouseleave 事件，子元素不会触发；父元素绑定 mouseover 和 mouseout 事件，子元素会触发；测试代码<!doctype html><html lang="en"&gt

2021-02-12 19:31:20 301 1

原创 vue-cli3 引入bootstrap

安装包npm install bootstrap jquery popper.js --savemian.js 导入import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min'

2021-02-11 16:43:27 150

原创 vue 组件通信补充

文章目录1. 子组件访问父组件1. 子组件访问父组件父组件<template> <div> <Layout></Layout> </div></template><script> import Layout from "./components/layout/Layout"; export default { data(){

2021-02-09 14:32:02 80

原创 vue 2.6.0+ 插槽

文章目录1. 具名插槽插槽：父组件向子组件传递数据包括标签数据1. 具名插槽多个插槽，不同插槽对应不同内容子组件（layout）<template> <div> <header> <slot name="header"></slot> </header> <main> <slot name="main"

2021-02-09 13:50:54 108

原创 vue动态组件

<template> <div> <div class="btn"> <div class="item" :class="{active: currentTab === 'news'}" @click="currentTab = 'news'">news</div> <div class="item" :class="{active: currentTab === 'h.

2021-02-09 11:15:35 74

原创 vue + loadsh + axios + watch

<template> <div id="app"> <p> 输入问题(以问号结尾): <input v-model="question"> </p> <p>{{ answer }}</p> </div></template><script> import _ from 'lodash';

2021-02-08 16:28:20 136

原创 express + mysql

const express = require("express");const app = express();const mysql = require("mysql");// 创建连接const db = mysql.createConnection({ host:"localhost", user:"root", password:"qwe123", database:"exapp"});// 连接数据库db.connect( (err) =&gt

2021-02-08 11:49:20 198

原创 react基础知识总结

1. react入门1.1 介绍描述用于动态构建用户界面的 JavaScript 库(只关注于视图)由Facebook开源1.2 React的特点声明式编码区别于命令式编程,它的特点就是我告诉计算机做什么,但是没有告诉你怎么做.组件化编码React Native 编写原生应用高效（优秀的Diffing算法）1.3 React高效的原因使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。DOM Diff算法, 最小化页面重绘。

2021-01-20 14:48:36 367

原创移动端响应式 less

1. 移动端布局1. 流式布局（百分比布局）2. flex布局3. rem 适配布局配合媒体查询使用3.1 remem: 相对于父级rem: 相对于html元素的字体大小，如： html 字体大小 16px，则1rem = 16px;优点：通过html字体大小控制页面布局媒体查询/* 屏幕宽度<800时，字体大小100px */ @media screen and (max-width: 800px){ html{ font-size: 1

2021-01-06 00:35:15 313

原创微信小程序轮播图

文章目录1. 轮播图1. 轮播图 <!-- 原图的宽度和高度 1125 * 352 px swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度 swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度 height: 100vw * 352 / 1125 widthFix ：宽度指定了之后高度会自己按比例来调整 5 autoplay 自动轮播 6 interval

2020-12-30 14:08:21 342

原创微信小程序音频播放器

文章目录1. source code2. 效果图1. source code<view class='audioPalyWrap'> <view class='picWrap'> <view class='pic {{ !onoff ? "active":"" }}'> <image src='http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_a

2020-12-28 17:01:52 1149

原创微信小程序视频弹幕发送

文章目录1. 目录结构2. videoDanmu3. selectColor4. 效果图1. 目录结构2. videoDanmu<video src="{{src}}"id='video'danmu-btnenable-danmudanmu-list="{{ danmuList }}"></video><view class='sendDanmu'> &lt

2020-12-27 18:26:02 1280 4

原创微信小程序登录注册

文章目录1. source code1. source code<form bindsubmit="handleSubmit" wx:if="{{ onoff }}"> 用户名： <input type="text" name='username'/> 密码： <input type="password" name='password'/> 手机号： <input type="text" name='phone'/> <bu

2020-12-26 17:09:51 612

原创微信小程序下拉加载更多商品

文章目录1. source code2. 效果1. source code<view class='goods'> <view class='good' wx:for="{{ goodslist }}" wx:key='index'> <view class='pic'> <image src='{{ item.imgUrl }}'></image> </view> <view c

2020-12-26 16:07:44 472 2

原创微信小程序生命周期

文章目录1. 目录2. demo23. 效果显示1. 目录2. demo2<!-- <view class='newslist'> <view class="pic"> <image src="http://www.tanzhouweb.com/vueProject/image/newsList/1.jpg" alt="" width="100%" height="100%" data-src="http://www.ta

2020-12-24 22:19:58 173

原创微信小程序发表信息--页面通信

文章目录1. 文件目录2. demo页面3. edit 页面4. 效果1. 文件目录2. demo页面<view> <view wx:for="{{msg}}" wx:key='*this'> {{ item }} </view> <button type='primary' bindtap='handleTap'> 发表信息 </button></view>// pages/demo/demo.jsPage

2020-12-24 17:35:57 1478 1

原创微信小程序自定义组件tabs

文章目录1. news模板2. tabs 调用1. news模板news.wxml<template name='tpl'> <view class='news' wx:for="{{ msg }}" wx:key='id'> <view class='news-content'> <view class='content'> {{ item.title }} </view> <text class='time

2020-12-24 14:50:43 280

原创 vue 树状表格

文章目录1. 初始化配置2. 使用3. 效果1. 初始化配置安装模块：npm i vue-table-with-tree-grid -Smain.js 文件import ZkTable from 'vue-table-with-tree-grid'Vue.component(ZkTable.name, ZkTable);2. 使用<template lang="html"> <div id="example"> <zk-table

2020-12-18 12:53:42 2115 3

原创路由守卫

路由文件设置// 路由导航守卫/* to: 到某个地址 from: 从哪个地址来 next：是否放行 */router.beforeEach((to, from, next)=>{ // 访问登页直接放行,其他页面判断是否有登录凭证，如果没有直接跳转到登录页 if(to.path==='/login') return next(); const tokenStr = window.sessionStorage.getItem('token');

2020-12-15 13:01:12 183

原创 route router

文章目录1、$route对象2、$router对象1、$route对象$route对象表示当前的路由信息，包含当前的路径，参数，query对象等。1. $route.path 当前路由的路径2. $route.params 动态参数3. $route.query 查询字符串2、$router对象$router是router构造方法的实例。push1.字符串this.$router.push(’/home’)向 history 栈添加一个新

2020-12-14 16:15:21 87

原创 vue案例-购物车进阶版（组件化，vuex，mock数据）

文章目录1. 目录结构2. mock 数据3. vuex 状态管理4. 组件使用1. 目录结构2. mock 数据mock数据只能通过ajax请求获取，从而达到模拟后台接口的作用定义数据 data.json[ { "id": 1, "name": "TCL彩电", "price": 1000, "num": 1 }, { "id": 2, "name": "机顶盒", "price": 1000, "num": 1

2020-12-14 14:24:54 639 2

原创 vue案例--购物车（组件化，父子组件传值）

文章目录1. 父组件2. 子组件1. 父组件<template> <div id="app"> <div class="container"> <div class="cart"> <Header></Header>  <List :list="list" @del="del($event

2020-12-14 11:38:51 940

原创 vue 动画

文章目录1. 过渡动画1. 过渡动画v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。v-leav

2020-12-11 23:10:50 77

原创数据代理

文章目录1. 数据代理1. 数据代理通过一个对象代理另一个对象中的属性的操作（读 / 写）vue 数据代理：通过vm对象来代理data中所有属性的操作function MVVM(options) { // 将选项对象保存到vm this.$options = options; // 将data对象保存到vm和data变量中 var data = this._data = this.$options.data; //将vm保存在me变量中 var

2020-11-30 15:55:41 2150

原创 DocumentFragment

文章目录1. 描述2. 使用1. 描述DocumentFragments 是DOM节点。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。2. 使用<!doctype html><html lang="en"><head> &

2020-11-30 13:50:55 534

原创 Object.defineProperty

文章目录1.语法2. 属性描述符3. 使用4. 点运算符和 Object.defineProperty()区别5. get setObject.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。1.语法Object.defineProperty(obj, prop, descriptor)参数obj要定义属性的对象。prop要定义或修改的属性的名称或 Symbol 。descriptor要定义或修改的属性描述符。2. 属

2020-11-28 22:32:52 130

空空如也

空空如也