- 博客(45)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 vue3中使用lulu-UI和源码解析
本文分析的是`LuLu UI`的Edge主题，这是[张鑫旭](https://www.zhangxinxu.com/)开发的一套UI组件，使用原生JavaScript编写，使用了JavaScript和CSS前沿的新语法和新特性，React和Vue项目均适用。其核心主旨为面向设计、面向项目的半封装web组件开发。
2021-12-29 15:41:42
912
原创 AMD+CMD+CommonJS+ESM的不同之处
AMD (RequireJS)AMD 规范在这里：https://github.com/amdjs/amdjs-api/wiki/AMDAMD = Asynchronous Module Definition，即 异步模块定义。AMD 规范加载模块是异步的，并允许函数回调，不必等到所有模块都加载完成，后续操作可以正常执行（依赖前置，提前执行）。// AMD 默认推荐的是define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
2021-11-30 14:02:03
711
原创 花了半天时间，缕清了vuex的源码实现
vuex的初始化vuex通过export default一个object{}，里面包含了许多的对象，其中就包含了Store,这是是一个构造函数，用于接收配置的state，mutation之类的参数,使用createStore都会重新new一个store对象，所以不能重复new。// 这里必定暴露一个install的方法，因为vuex本身是一个对象，并不是一个function--构造函数内部有一个install方法，并且还在定义了$store为全局用法。import { createApp } fr
2021-11-25 15:50:06
865
原创 使用vue-cli3+rollup+plop搭建npm插件
安装vue框架运行以下命令来创建一个新项目：vue create zys-npm-rollup-plop-programcd zys-npm-rollup-plop-programyarn run serve安装rollup.js和依赖项rollup.js是一个JavaScript的模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。这里开始安装相关的依赖项。yarn add rollup rollup-plugin-vue rollup-plugin-cs
2021-10-11 13:16:44
668
原创 vite引入element-plus修改主题色报错
使用vite搭建vue3.0项目全局安装vite# yarn yarn global add create-vite-app# npm npm global install create-vite-app初始化vite项目# 创建vitecreate-vite-app vue-vite# 进入vue-vite项目cd vue-vite# 安装依赖包yarn install# 安装element-plusyarn add element-plus -D# 运行
2021-01-11 09:33:28
9613
13
原创 关于vue在ie浏览器打不开，页面显示空白，es6转es5失败
由于vue项目使用的js是es6或者是更高的版本，ie11仅支持部分es6新语法，因此需要向下兼容，需要将es6+转换成es5语法cnpm i babel-polify -D-S在main.js 引入 import babel-polifybug: ie浏览器中的babel-polify在本地项目中可以完美运行，但是在打包之后就无法运行旧的babel-polify的core-js包是2.5的@babel/polify里面的core-js包是2.6的然后我们现在虽然都在说es6，.
2020-10-21 11:04:35
1139
原创 手把手撸出apply，call，bind的原理实现
1. apply的原理的实现 Function.prototype.myapply = function (context) { context = context || window; // 当前上下文指向函数或者window context.fn = this; // 给当前添加属性fn，并且该属性为调用的函数，那么this就是指向当前的调用函数 let resurlt; // 判断存储是否有第二个参数，如果有第二个参数就将其展开 if (argum
2020-06-05 16:06:38
223
原创 手写模拟实现find，findIndex，some，every，map，filter，reduce
1. 模拟实现find let arrFind = [12,15,19] Array.prototype.myFind = function(fn) { //必须使用function不能使用箭头函数，this指向调用的数组 if(typeof fn != 'function'){ throw TypeError('err function') } for(let i = 0; i < this.length; i++){ if
2020-05-25 17:42:06
898
1
原创 使用es6新语法(Set,reduce,filter)进行数组去重
使用Set进行数组去重function unrepeaty(param){ let set = new Set(param) // 这里输出的是set数据类型 console.log(set) // Set { 1, 2, 3, 33, 'ys' } // 可以通过展开运算符来转换会数组 console.log([...set]) // [ 1, 2, 3, 33, 'ys' ] // Array.from将可迭代对象转换成数组 let arr = Array.from(
2020-05-20 11:22:06
405
原创 vue-router源码实现
1. 目录结构2.实现vue-router源码// kvue-router.js/* eslint-disable */ // 禁止eslintlet Vue;class VueRouter { constructor(options){ // router传入参数 this.$options = options; this.routeMap = {}; // 所有...
2020-04-10 16:19:49
186
原创 vue单页面动态设置title
下面介绍三种动态设置vue项目中的title方式方法一通过document.title来设置// 业务代码beforeCreate () { document.title = this.$route.query.title // 获取url中title属性}方法二在 router.js文件中设置router.afterEach((to, from) => {...
2020-03-24 11:30:45
588
1
原创 关于传参对象属性修改，源对象保持不变
案例let obj = { // 对象 name: 'father', person: { name: 'son', age: 18 }}function change(param) { param.person.name = 'didi'}console.log(obj) // { name: 'father', person: { name: 'son...
2020-03-09 11:33:18
553
原创 关于部分机型在微信公众号H5无法获取code问题
微信公众号H5无法获取code值公众号内嵌的h5页面都是通过获取code来向后台发送ajax请求以获取openId// 通过url中微信自带的query中的code参数，截取其中的code值let code = this.GetURLParameter("code")GetURLParameter(name) { var reg = new RegExp("(^|&...
2020-01-10 16:20:27
2143
原创 原生js与vue对时间戳进行转格式
时间格式转格式使用原生js调用转格式<!-- TODO -->、/**time: 传入的时间戳dateString：日期的格式（1970-01-19 ）timeString：时间的格式（13:04:13）*/function timeFormat(time, dateString, timeString) { if (!time) { return...
2019-11-11 14:48:12
216
原创 整理一波关于Vue的核心面试题
一、对于MVVM模型的理解？MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。 在MVVM...
2019-11-06 17:10:24
1519
2
原创 关于Vue中组件之间传值
组件之间的通信的问题，组件之间的通信可以分为以下几种：父子组件传递，父向子传递采用 props，子向父采用事件 emit。 非父子组件的传递，全局 event bus, 创建一个新的 vue 的实例，采用事件的方式通信，再者采用 vuex 全局状态管理。父子组件相互通信方法详情子组件通过 $emit 调用父组件的 method// 父组件中定义 @updateInfo 调用的方法...
2019-09-26 15:40:14
228
原创 使用vue开发移动端页面，IOS端图片无法显示
问题：在使用Vue开发移动端项目的时间，发觉Android下的图片显示正常，但是在IOS页面下没有显示图片 <img src="../../assets/img/mall/back.png" alt="返回" class="back" @click="goBack()">解决方案：在img标签下不能给class属性，只能在其父级嵌套一个标签<div class="b...
2019-08-09 09:22:20
6086
转载 深入理解javascript原型链
在javascript中原型和原型链是一个很神奇的东西，对于大多数人也是最难理解的一部分，掌握原型和原型链的本质是javascript进阶的重要一环。今天我分享一下我对javascript原型和原型链的理解。 一、对象等级划分 我们认为在javascript任何值或变量都是对象，但是我还需要将javascript中的对象分为一下几个等级。 首先Object是顶级公民，这...
2019-07-02 09:42:10
149
原创 angular组件封装
1.这个公共组件的封装2.c-dropdown.component.tsimport { Component, OnInit, Input, EventEmitter, Output, ViewChild } from '@angular/core';@Component({ selector: 'c-dropdown', templateUrl: './c-dropd...
2019-06-20 09:40:40
2536
转载 JavaScript随机打乱数组
var arr = [4,1,67,12,45,121,3];arr.sort(function() { return (0.5-Math.random());})代码arr.sort(function(){ return 0.5 - Math.random() })//sort 是对数组进行排序//他的是这样工作的。每次从数组里面挑选两个数 进行运算。//如果...
2019-06-03 15:35:26
182
原创 安装webstom与破解注册码和安装汉化包
webstom软件下载与汉化包下载地址链接：https://pan.baidu.com/s/1ed8XHjxfLrYRxC9LJPNlMQ 提取码：yvrz 安装完毕之后打开webstom软件，导航栏help选项有输入注册码，注册码地址：http://idea.lanyus.com/ 这个是我的webstom安装目录D:\Program Files\JetBrains\WebStorm ...
2019-05-31 15:02:07
961
转载 Vue项目代码规范
一、UI框架及css预处理器选择1、PC端Vue项目UI框架：ElementUI（优先）、iView2、移动端Vue项目UI框架：mint-ui（优先）、vant3、sass/scss、less、stylus ?????推荐less：less相对比sass更简洁，而stylus的语法灵活性开放性过大，不利于团队协作开发。二、脚手架、插件选择2.1、脚手架vue-cli2.0 OR...
2019-03-16 12:38:14
1321
原创 浅谈JavaScript中的深拷贝与浅拷贝
对于js基本数据类型是不存在深拷贝与浅拷贝的问题。因为基本数据类型只会在栈中开辟地址，每声明一个基本数据类型，就会在栈中开辟一个新的栈地址，每个地址之间互不干预，所以只有引用类型才有深浅拷贝。 对于js中的对象(object)和数组(array)才会出现深拷贝与浅拷贝的问题。说说浅拷贝的原理：有两个变量，变量obj1在栈中开辟了一个obj1的地址，同时变量obj2变量也在栈中开辟了一个o...
2019-03-13 22:06:59
195
原创 swiper在vue项目中loop循环轮播失效
我在使用vue-awesome-swiper进行列表轮播，但是是滑到最低端无法实现无限循环。具体解决方案：这是设置swiper的参数，其中最为重要的是要设置 v-if="parentData.length"就可以了...
2019-01-04 13:58:36
1371
3
原创 使用Chrome进行js中的debug调试
1.首先在Chrome上面打开一个程序2.按热键F12可以进入开发者 工具3. 点击红圈4.进入项目的源码区域并且设置断点5.点击你需要点击的事件（第 4 的③可以不用单击也会监听断点）6.进入了console页面，可以调试当前执行到js的变量 ...
2018-12-24 10:50:58
1287
原创 vue一些常用的知识点
1.$route的用法 $route为当前router跳转对象里面可以获取name、path、query、params等2.$router的用法 $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法返回上一个history也是使用$router.go方法3.slot(插槽)的用法 slot的作用是用于父组件向子组件传值，简单...
2018-11-20 17:00:30
178
原创 用vue-cli引入element-ui报错
1.main.js按需引入引入element-uiimport { Button } from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(Button)2.首先，安装 babel-plugin-component：npm install babel-plugin-component -D...
2018-11-14 09:13:06
1306
原创 关于用vue-cli打包dist文件无法在页面中访问
在尝试用了vue-cli开发项目之后，在项目的最终用npm run build 打包完之后，使用了wamp工具访问打包的文件，但是在页面中显示所有的链接都没有都是404.因此我就查看了index文件中的所有的外部链接。之后我就发现了在index文件里面<!DOCTYPE html><html><head> <meta chars...
2018-11-13 17:29:59
3299
1
原创 vue-loader@15.x VueLoaderPlugin无法loader
在安装了Vue插件之后，发觉编译不了.vue文件，但是已经把vue-loader vue-template-compiler 都下载完毕，并且还在webpack.config.js里面配置了 {test:/\.vue$/,use:'vue-loader'}但是还是不行，一直提示：client:162 ./src/login.vueModule Error (from ./node_...
2018-10-01 10:39:29
3717
原创 vuejs的生命周期演示
vuejs的生命周期之代码演示演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascrip
2018-09-10 14:14:09
322
转载 浅谈json数据与json字面量的区别
1.首先明确JSON是什么？json是一种数据交换格式，是纯文本的字符串，是作为一种替代XML数据格式角色出现，json简单易读方便转换跨平台,有很多json api提供了json字符串与对象互转的方法，如下面JavaScript中json字符串互转的方法。JSON.stringify()//将对象转化为json字符串JSON.parse()//将json字符串转化了对象2.JSO...
2018-09-04 09:41:56
503
原创 js中对拥有多个对象的数组进行sort排序
对于数组的的排序可以有多种方法，其中的sort方法是数组自带的方法但是对于拥有多个对象的数组来说，需要根据数组对象的不同属性键给予数组排序，那么可以用到下面的方法： var student = [{"name":"lisi","age":18,"sex":"male"},{"name":"zhangsan","age":17,
2018-08-08 15:03:14
2935
原创 如何解决html5标签对于ie低版本不被兼容问题。
目前有两种方法可以使得低版本的ie可以兼容h5新标签：第一种方法：通过document.createElement()的方式创建新的标签，并且新建的标签默认是inline样式，所以需要修改为 block样式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
2018-08-08 11:51:49
3509
原创 如何将修改过后的文件通过git上传文件到GitHub
1.在你所在的文件目录，右键选择git bush here进入了git命令行 ，但是还是处于文件的根目录，需要进入你的项目目录cd test //这里的test是我在git上面部署的项目文件名然后 输入 git commit 输入 git commit -a 提交所有的修改，进入修改页面按 i 可以进行修改，添加描述文件，必须添加描述文件修改完毕之后 按...
2018-08-06 10:13:22
3484
转载 HTML5新增的主体元素article、section、nav、aside的区别
div：本身没有任何语义，用作布局以及样式化。 section：与 div 的无语义相对，简单地说 section 就是带有语义的 div 了，但是千万不要觉得真得这么简单。section 表示一段专题性的内容，一般会带有标题。section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。sectio...
2018-07-30 10:46:33
1883
原创 如何为sublime添加JsFormat工具
javascript格式化插件JsFormat下载这插件包 https://github.com/jdavisclark/JsFormat首先打开sublime软件：然后点击首选项：点击浏览器插件：这里进入了packages文件夹，把之前下载的JsFormat解压到这个文件就可以使用了。可以点击右键，显示JsFormat，单击就会格式化js文件：可以使...
2018-07-27 16:41:26
3557
1
转载 jquerydiv随着滚动条的滚动而滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ..
2018-07-27 15:16:20
2936
原创 css3常用属性
1. p标签不只是简单的换行，它的属性为{display:block}，这是为块元素，可以设置高度，边距span标签也是换行，它的属性为{display:inline}，这是为行内元素，不可以设置高度，边距font-family:"microsoft yahei"|''宋体"|"黑体"；这是字体选择，默认 微软雅黑文字加粗 有b和strong标签 在css里面的加粗就有font-we...
2018-07-27 15:15:44
533
原创 学习前端遇到的问题与难点
1.代码兼容的问题. $(":checkbox[name=checkboxBtn][checked=true]")，这里的checked=true，在1.6以上是不接受的$(":checkbox[name=checkboxBtn]").attr("checked");在1.6以上，显示checked和undifine， 2.页面坐标的问题：英文字母和中文汉字在不同字符集编码...
2018-07-27 15:15:19
2431
原创 android考试内容
安卓四大组件：activity content Provider service broadcase Receiverhandler 和 broadcase 都是实现不同线程之间的通信fileter：过滤 intent：意图，目的resume：继续四大布局 relativeLayout lilnearLayout absoluteLayout FrameLayout TableL...
2018-07-27 15:14:57
446
传智播客网上书城毕业设计资料和代码
2018-07-01
2018操作系统复习资料
2018-07-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人