青阳的博客

原创 每周算法题---逆波兰表示法，求该后缀表达式的计算结果

采用栈结构，如果不是运算符就入栈，如果是运算符就弹出栈中前两个值进行运算，需要注意用出栈的顺序，除法是除数在前，eval方法用（）包起来,最后运算结果也要入栈。给定逆波兰表达式总是有效的。换句话说，表达式总会得出有效数值且不存在除数为 0 的情况。有效的算符包括 +、-、*、/。每个运算对象可以是整数，也可以是另一个逆波兰表达式。根据 逆波兰表示法，求该后缀表达式的计算结果。整数除法只保留整数部分。

原创 移动App开发环境配置

安装最新版本的java jdk修改环境变量，新增JAVA_HOME的系统环境变量，值为C:\Program Files (x86)\Java\jdk1.8.0_112，也就是安装JDK的根目录 修改系统环境变量Path，在Path之后新增%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 新建系统环境变量CLASSPATH，值为.;%JAVA_HOME%\lib\dt...

原创 new vue 主要干了啥？

Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm ，挂载的目标 就是把模板渲染成最终的 DOM，那么接下来我们来分析 Vue 的挂载过程Vue 不能挂载在 body 、 html 这样的根节点上。接下来的是很关键的 逻辑 —— 如果没有定义 render 方法，则会把 el 或者 tem.

原创 vue兼容ie9-11

vue项目兼容ie,采用core-js的方式，安装core-js：3.0以上版本采用vue-cli脚手架，vue-cli3.0开始默认会安装core-js3.0的版本

原创 vite,elementuiPlus重置表单无效

当我门在table中里面操作编辑详情，添加时针对同一个表单的时候，而这个表单时作为一个弹出框弹出的时候，希望点了编辑，再点添加的时候，需要重置表单的校验，这个重置表单的校验，是可以要放在弹出框显示的位置，否则不起作用，打印表单的值会看到undefined

原创 vite vue3项目打包,跳过ts检查

vite vue3项目打包,跳过vue-tsc检查

原创 css3画.5个像素的边框

css border实现，单边.5个像素，整个.5个像素

原创 vite +elementPlus vue3自定义主题色

vite自定义主题色，elementPlus按需加载先安装sass，elementPlus样式是scss写的，

原创 vite配置 vue3中怎么使用svg图标

vite vue3中怎么使用svg图标svg图片在项目中使用的非常广泛，如何在vue3 + vite 中使用svg图标。vite-plugin-svg-icons预加载在项目运行时就生成所有图标,只需操作一次 dom高性能内置缓存,仅当文件被修改时才会重新生成

原创 vite为vue3配置@路径，vite路径配置

vite为vue3配置@路径，vite路径配置

原创 vue mixin混入，生命周期执行阶段简易实现

vue源码实现，vue.mixin

原创 js时间格式化

js时间格式化

原创 自己实现一个vue插件第一步

通过rollup打包vue.js插件,上一篇文章讲解了怎么通过rollup打包一个js库vue是mvvm结构，M (model)：模型对象：指的是构成界面内容的相关数据 V(view): view: 视图对象：指的是给用户或者开发者展示数据的界面 VM(viewmodel): 视图模型对象：是view与model之间的桥梁Vue.js的核心ViewModelViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body

原创 rollup打包项目

选择rollup打包纯js插件。rollup只是把我们的代码转成目标js并没有其他的像webpack的可以打包图片等 新建项目文件 通过cmd进入文件，使用npm初始化项目 npm init -y 3. 安装包我们需要安装，rollup来打包我们的插件，我们在编写js插件的时候会需要用到es6语法，我们还需要安装将es6转成es5的babel， 所以需要安装，@babel/core，@babel/preset-env我们还需要安装插件rollup...

原创 为什么this.key可以访问data,prop,methed里的值

在vue源码中，对this.key做了代理，比如data(){retrun {message:'mess'}},我们访问this.message，其实是访问this._data.message是在instate的时候，对data进行了proxyvar sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, set: noop}function proxy(ta.

原创 instanceof原理

left instanceof right 是通过检测 right的prototype属性是否在left的原型链上function myInstanceof(left, right) { // 这里先用typeof来判断基础数据类型，如果是，直接返回false if(typeof left !== 'object' || left === null) return false; // getProtypeOf是Object对象自带的API，能够拿到参数的原型对象...

原创 js new的时候干了些啥？

创建一个空的简单JavaScript对象（即{}） 链接该对象（即设置该对象的构造函数）到另一个对象 将步骤1新创建的对象作为this的上下文 如果该函数没有返回对象，则返回this模仿newlet that = this function CutOb () { this.date = that.getNowDate() } let cutOb = new CutOb() function createObject (fn) { let

原创 vue 自定义指令防抖

directives: { throttle: { bind: (el, value) => { var falg = null el.addEventListener('click', function (event) { if (falg) { event.stopImmediatePropagation() } else { falg = setTimeo.

原创 有效的括号

给定一个只包括 '('，')'，'{'，'}'，'['，']'的字符串 s ，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。示例 1：输入：s = "()"输出：true示例2：输入：s = "()[]{}"输出：true示例3：输入：s = "(]"输出：false示例4：输入：s = "([)]"输出：false示例5：输入：s = "{[]}"输出：true提示：1 &l...

原创 vue-router源码第一步阅读

为什么必须定义一个install方法，并且把他赋予VueRouter呢？其实这跟Vue.use方法有关，大家还记得Vue是怎么使用VueRouter的吗？import VueRouter from 'vue-router'Vue.use(VueRouter) // 第一步export default new VueRouter({ // 传入的options routes // 第二步})import router from './router'new Vue({ ...

原创 js原型链

原创 vue源码为什么vue是一个方法而不是一个calss类

// 引入模块import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecycle'import { warn } from '../util/index'// 什么时候需要把代码放到u.

原创 vue源码解析之initMixin

initLifecycle(vm);// 初始化组件数据，initEvents(vm);initRender(vm);callHook(vm,'beforeCreate');initInjections(vm);//resolveinjectionsbeforedata/propsinitState(vm);initProvide(vm);//resolveprovideafterdata/...

原创 webpack编译多个html

通过webpack编译打包多个html，通过webpack-dev-server自动刷新启动服务，解决webpack-cli跟webpack-dev-server版本不兼容问题

原创 webpack之entry

entry的三种形式配置文件中entry接受三种形式的值：字符串，数组和对象对象entry对象形式如下：entry: { <key>: <value> ...}先介绍对象形式，是因为这个是最完整的entry配置，其他形式只是它的简化形式而已。对象中的每一对属性对，都代表着一个入口文件，因此多页面配置时，肯定是要用这种形式的entry配置。keykey可以是简单的字符串，比如：'app', 'main', 'entry-1'等。...

原创 webpack-初探-import，require

以前我们写的js我们把js按照功能裁分，在传统的html写法，是要在html中把所有需要的js全部在页面html中引入，而不是在各个自己需要用到其它js文件的文件中引入，这样引入必须保证引入的顺序是否正确。在最早的时候是没有模块的概念的。随着前端工程的发展，前端开发也越来越规范化，更像是软件工程了。那么随之而来的，为了解决工程化的问题，就引入了模块的概念。但是在早期，因为ecmascript原本是没有模块语法的，所以采用的都是社区的各种版本协议，其中影响最深的，就是nodejs使用的CommonJS规范

原创 js组合继承

原型链继承： //原型对象上的任何类型的值，都不会被实例所重写/覆盖， //在实例上设置语原型对象上同名属性的值，只会在实例上创建一个同名的本地属性 //但是是引用类型的就会修改//原型链继承 function Person(name){ this.name='dfdf' } Person.setName=function(name){ this.name=name } Person...

转载 js继承-原型链继承

构造函数、原型与实例之间的关系每创建一个函数，该函数就会自动带有一个prototype属性。该属性是个指针，指向了一个对象，我们称之为原型对象。什么是指针？指针就好比学生的学号，原型对象则是那个学生。我们通过学号找到唯一的那个学生。假设突然，指针设置 null, 学号重置空了，不要慌，对象还存在，学生也没消失。只是不好找了。　　原型对象上默认有一个属性constructor，该属性也是一个指针，指向其相关联的构造函数。　　通过调用构造函数产生的实例，都有一个内部属性，指向了原型对象。所以...

原创 js防抖节流

//防抖this.debounce((ff)=>{ console.log('ff'+ff) setInterval(()=>{//节流 this.throttle((kk)=>{ console.log(kk) },500)(44) },900) },200)(3)debounce(fn,delay){ var timer=null var that=this return ..

原创 uniapp分包路由跳转

分包之后还需要跳转到主包里的话，路由跳转：把url提出来就可以，如果不把url提出来就不行。是不是很魔性

原创 elementUI 样式修改

1，通过全局样式新建common.css,并在main.js中引入import "./assets/style/common.css";可以用来修改项目整体颜色风格2单个组件<style></style>中不要加scope,修改第三方样式的不加，自己的样式加<style></style><style scoped></style>3：deep将废弃：/deep/深度修改标签样式找到需要修改的 Eleme.

原创 uni-app 更改 checkbox的样式

不能再除app.vue外的.vue写样式，很可能无效，再app.vue里面也不能写scope.datiMain uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{ border-color:#404E9F; color: #DA4A37 !important; } .datiMain uni-checkbox .uni-checkbox-input { border-color: #404E9F; }

原创 elementUI-表单验证踩坑记录

简单表单验证：:model必须是对象，否则报错。 <el-form-item prop="shareTitle">中的prop必须和<el-input>这个的v-model一致否则不能验证。 <el-form :model="jcData" ref="activeInfo" :rules="rules"> <el-form-item prop="shareTitle"> <el-input

原创 vue 静默修改url地址防止刷新页面的时候页面还是创建页面的状态

在创建一个活动的时候，在保存了即创建成功了之后，页面应该属于编辑的状态，不然用户手动刷新页面，页面依然处于创建状态，qs是一个库，将地址栏参数序列化var query=that.$router.history.current.query query.isEdit=true query=JSON.parse(JSON.stringify(query)) var newUrl=qs.stringify(query) that.$mess.

原创 vue $broadcast

父组件 broadcast(componentName, eventName, params) { broadcast.call(this, componentName, eventName, params); }function broadcast(componentName, eventName, params) { this.$children.forEach(child => { var name = child.$options.compo..

原创 如何实现Vue已经弃用的$dispatch和$broadcast方法？

对于父子（含跨级）传递数据的通信方式，Vue.js 并没有提供原生的 API 来支持，而是推荐使用大型数据状态管理工具 Vuex，但 Vuex 对于小型项目来说用起来真的很麻烦。并且在大型项目中如果仅仅只是极少的两个组件需要通行，用vuex也不友好虽然vue2.0弃用了这两个方法，在很多基于 Vue 的 UI 框架中都有对其的封装，包括 element-ui、iview 。那么 $dispatch 和 $broadcast 到底是怎么工作，其底层又是怎么实现的呢？接下来，我们就详细的说一说！01

原创 ElementUI对话框（dialog）提取为子组件报错

这里涉及到弹窗el-dialog的一个属性show-close：show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误：vue.esm.js?efeb:628 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re...

转载 git删除分支

删除分支当一个分支被废弃时,我们要做的是删除分支,在彻底删除一个分支时,需要三个步骤删除本地分支 删除远程分支 删除本地追踪分支,即追踪远程master的追踪分支origin/master分支删除本地分支在删除分支的时候,我们会使用git branch --delete dev来执行.有时还会通过缩写git branch -d dev来代替,使用中我们发现还有git branch -D dev的写法,他们有什么区别呢?-d是--delete的缩写,在使用--delete删除分支

原创 Vue CLI搭建vue3.0项目

查看vue版本全局安装过旧版本的vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：1 npm uninstall vue-cli -g //或者 yarn global remove vue-cli然后在重新安装vue-cli再查看vue的版本创建项目vue create <Project Name>//文件名 不支持驼峰（含大写字母）vue create appvue3? Check the features needed for ...

原创 vite 创建vue3的项目

npm init vite-app sail-vue3