- 博客(45)
- 收藏
- 关注
RSS订阅原创 vue 自定义富文本
1. 下载 vue 插件npm install vue-quill-editor --save2. 引用到 main.js 里面// 富文本样式.cssimport 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'// 引入 富文本插件import VueQuillEditor from 'vue-quill-editor'Vue.u
2022-02-25 10:00:06
867
转载 vue项目上线
如果我们还没有打包:https://blog.csdn.net/qwerwjs/article/details/118165613可以去这个网站看具体步骤1.通过node创建服务器在vue_shop同级创建一个文件夹vue_shop_server存放node服务器使用终端打开vue_shop_server文件夹，输入命令npm init -y初始化包之后，输入命令npm i express -S打开vue_shop目录，复制dist文件夹，粘贴到vue_shop_server中在vue_s
2021-06-24 00:51:36
163
原创 打包报告+进度条+第三方CDN引入+路由懒加载
1.添加进度条首先我们先打开项目控制台,打开依赖(vue ui),安装nprogress,打开我们配置的相应拦截和请求拦截的页面,,我们在这里配置进度条//导入进度条插件importNProgressfrom'nprogress'//导入进度条样式import'nprogress/nprogress.css'////当进入request拦截器，表示发送了请求，我们就开启进度条,,,我们放到请求拦截的header头中 NProgress.start()//当进...
2021-06-24 00:44:22
292
2
原创 vue双向绑定原理
我们先说面试题答案:答:vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图他的具体实现步骤:1: 需要observer的数据对象进行递归遍历 ,包括子属性对象的属性,都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化2:compile解析模板指令，将模...
2021-06-17 08:48:35
230
1
原创 表单校验
什么是表单校验呢?表单校验就是判断用户在 input 里面输入的东西合格不合格,我们看下面的图不正确的表单 (就是当用户输入的不合法后的效果):当我们的input 失去焦点后,会判断input框里面的内容合不合法,如果不合法就给提示正确的(当用户输入正确的内容):我们来实现这个效果吧:我们用的是element-ui会简便很多的 具体网址(https://element.eleme.cn/#/zh-CN/component/button)<el-form :ru..
2021-06-07 21:22:41
964
原创 下载安装Nginx
前言:Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器Nginx是由伊戈尔· 赛索耶夫为俄罗斯访问量第二的Rambler.ru站 点 (俄问:Рамблер) 开发的它也是一种轻量级的web服务器,可以作为独立服务器的部署网站,它高性能和低消耗内存的结构受到了和很多大公司的青睐,比如淘宝网站假设....安装步骤1 . 下载下载地址 :http://nginx.org/en/download.html(Nginx官网)2 ...
2021-06-07 11:39:32
161
转载 webpack打包优化
项目开始时webpack的配置vue-cli3以后,我们修改webpack配置,需要自己在项目根路径下创建vue.config.js文件配置proxy跨域使用vue-cli开发项目,在本地开发环境中,如果遇到跨域问题,跨域通过配置proxy的方法,来解决跨域的问题module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060,...
2021-06-04 15:27:58
353
转载 vue-router 鉴权 守卫
文章目录permission.js router.js store/index.js store/getters store/modules/permissionpermission.js//路由配置文件import router from './router'import store from './store'//需要安装nprogressimport NProgress from 'nprogress'import 'nprogress/nprogress.css'//
2021-06-03 23:51:41
98
原创 axios拦截,api统一管理
axios说明Axios是一个基于 promise的http库,可以用在浏览器和node.js中,axios的封装和api接口的统一管理,其实主要的目的就是帮助我们简化代码和有利于后期的更新维护,在vue项目中,和后台获取数据这块,我们通常使用的是axios库,他是基于promise的http库,可运行在浏览器和node.js中,他有很多的特性,比如拦截请求和相应请求等等.......axios封装安装cnpm install axios --save //安装axi...
2021-06-03 23:30:50
119
转载 多环境变量配置
1 . vuecli3.0搭建的vue项目,配置多个环境变量 新建两个或多个文件,和package.json同级的:比如 .env.dev和env.prod通过 npm run serve 启动本地的项目,执行development 通过 npm run stage 打包测试 ,执行staging 通过 npm run build 打包正式,执行production "scripts": { "serve": "vue-cli-service serve --open",...
2021-06-02 23:02:05
139
原创 去哪儿的项目开发流程
确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant +rem + rem + sass + webpack搭建项目yarn ,npm(cnpm) // 包管理工具yarn add axios -Scnpm install axios -S-S // --save-dev 生产环境的依赖 (dependencies)-D // --dev 开发环境的依赖 (devDependencies)从0...
2021-06-02 22:48:24
75
原创 创建vue项目空框架
Vue3.x脚手架的安装 我们先检测有没有安装node和npm node -v //检测是否安装了node npm -v //检测是否安装了npm cnpm -v // 检测是否安装了cnpm cnpm 是国内的工具,方便以后我们下载其他的依赖,用cnpm比较快检测是否安装了vue3.x版本 vue -V //检测vue是否安装 // 如果没有安装的情况下,我们全局安装 cnpm install -g @vue/cli@3....
2021-06-01 21:46:17
716
原创 vue的transition
transition介绍keep-alive和transition相似(https://blog.csdn.net/qwerwjs/article/details/117449446?spm=1001.2014.3001.5501),只是一个抽象组件,他不会在DOM树中渲染(真实或虚拟的都不会)过渡的类名在进入或离开的过渡中,会有6个class切换 1 . v-enter : 定义过渡的开始状态 在元素被插入之前生效,在元素被插入之后的下一帧移除...
2021-06-01 21:13:49
67
原创 vue中的keep-alive
keep-alive的概念 keep-alive是Vue的内置组件,当他包裹;它自身不会渲染成一个DOM元素,也不会出现在父组件链中.作用 在组件切换过程中将状态保留在内存中,防止重新渲染DOM,减少加载时间以及性能消耗,提高用户体验原理 在createdh函数调用时将需要缓存的 VNode 节点保存在this.cache中 / 在render(页面渲染)时,如果在VNode的name符合缓存条件,则会从this.ca...
2021-06-01 20:18:51
83
转载 js事件委托
事件委托事件冒泡：JS中当出发某些具有冒泡性质的事件是，首先在触发元素寻找是否有相应的注册事件，如果没有再继续向上级父元素寻找是否有相应的注册事件作出相应，这就是事件冒泡。事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有：1.减少DOM操作，提高性能。2.随时可以添加子元素，添加的子元素会自动有相应的处理事件。为什么要用事件委托：一般来说，dom需要有事件处理程序，我们都会直接给它设事
2021-05-30 23:47:28
91
转载 事件委托
事件委托事件冒泡:js中当出发某些具有冒泡性质的事件是,首先在触发元素寻找是否有相应的注册事件,如果没有在继续向上一级父元素是否有相应的注册事件作出相应的,这就是事件冒泡.事件委托利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应的,这样做的优点:1.减少DOM操作,提高性能 2.随时可以添加子元素,添加的子元素会有自动有相应的事件.事件委托的原理事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事
2021-05-30 23:43:24
67
原创 闭包
理解js中的闭包1.概念闭包函数:声明在一个函数中的函数,叫做闭包闭包:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回2.特点让外部访问函数内部变量成为可能;局部变量会常驻扎在内存中;可以避免使用全局变量,防止全局变量污染;会造成内存泄露3.闭包的创建闭包就是可以创建一个独立的环境,每个闭包里面的环境都是独立的,互不干扰.闭包会发生内存泄露,每次外部函数执行的时候,外部函数的引用地址不同,都会创建一个新的地址,但凡是当前活动对象中有被内
2021-05-30 21:25:58
77
1
原创 var,let和const的区别
一,在es6出现之前,JavaScript中声明变量的时候只有通过var 关键字,函数声明是通过function关键字,而在es6后,声明变量的方式多了2中(let,const,function,class,var,现在我们要讨论的是var,let和const的区别二,var之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量，也可以省略var，而且在非严格模式下不会报错，但是实际上在严格模式下，两者的使用有没有区别，可能很多人不清楚。varx=1;y=2;...
2021-05-30 01:58:02
169
1
转载 Javascript作用域,作用域链,变量提升
Javascript作用域,作用域链,变量提升作用域(定义)变量作用域:就是一个变量可以使用的范围作用域(种类)js中首先有一个最外层的作用域,全局作用域js中可以通过函数来创建一个独立作用域被称为函数作用域,函数可以嵌套,所以作用域也可以嵌套es6中新增了块级作用域,(大括号,比如if{},for{),while{},)如图所示:es6作用域,适用于const和let自由变量自由变量的概念:当前作用域没有定义的变量作用域链自由变量的.
2021-05-30 01:43:43
103
1
原创 new 的实现原理 和this指向问题
1.new的四个步骤 创建一个空对象->这个新对象继承函数的原型->更改this的指向,为对象设置属性->返回新对象let a = new Foo('张三',20)(1) 我们先创建一个空对象var obj = {}(2) 这个新对象继承原型构造函数的原型obj.__proto__ = Foo.prototype(3) Foo 函数执行,this指向obj对象let result = Foo.call(obj,'张三',20)(4) 返回ob..
2021-05-27 21:24:22
448
原创 call/apply/bind 三者的用法和区别
apply,call和bind的区别this与call/apply/bind的关系普通函数中调用，this指向window 对象方法中调用，this指向当前对象 call apply bind中调用， this指向被传入的对象 class中的方法中调用， this指向实例对象 箭头函数，this就是父级上下文中的thisapply、call、bind都是js给函数内置的一些API，调用他们可以为函数指定this的执行,同时也可以传参。相同点:1.都是用来改变函数的this对象的指向 2.第
2021-05-26 21:03:24
168
原创 JavaScript 的原型和原型链
1: prototype每个函数都有一个prototype属性,被称为显示原型在javascript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象(ps:函数其实也是一个对象,所以与上述一,中的例子不冲突)var obj = new Object();所谓的prototype其实就是对象与对象的原型关联的属性:如图例如: function Animal(weight) { this.weight = weight }如图表示对象与原型...
2021-05-26 19:14:48
132
1
原创 数组常用的方法(es4,es5,es6)
1.什么是数组存储一组关联数据2.数组定义方式 1.数组直接变量(常用)var arr = [] ;var arr2 = [10,20,30]; 2.也可以通过new来创建var arr3 = new Array()；var arr4 = new Array(10,20,30)console.log(arr4) // [ 10, 20, 30 ]3.数组访问数组名[下标(索引)] 索引0 1 2 3....数组的长度可以通过数组名.length访问...
2021-05-25 20:57:13
116
原创 Js中arguments
简介:在Javascript中,arguments是对象的一个特殊属性,arguments对象就像是数组,但是它却不是数组,arguments对象包含了函数调用的参数数组,通过这种方式可以找到最后一个参数的值1.arguments是收到的实参副本 在词法分析中,首先按形参成AO的属性值,值为undefined 当实参传来时,在修改AO的相应属性2. 并把收到参数收集起来,放到一个arguments对象里面 t (a,b,c){} ...
2021-05-25 19:37:22
231
原创 js中数据类型判断
console.log(1 + "1") // 11console.log(2 * "2") // 4console.log([1, 2] + [2, 1]) // 1,22,1console.log("a" + + "b") // aNaNjavascript中检测对象的类型的运算符有:typeof,constructor和instanceoftypeof:typeof是一个一元运算符,返回结构是一个说明算数类型的字符串.但是typeof的能力有限,对于Data,RegExp,.
2021-05-24 21:10:36
145
1
原创 JavaScript的数据类型
js数据类型有哪些:基本数据类型(值类型):Number,String,Boolean,Undefined,Null,Symbol(es6新增第一五二的值)和Biglnt(es10新增的)引用数据类型:Object.包含Object,Array,function,Data,RegExp.备注： 基本数据类型，又称值类型栈堆存储值类型栈存储:主要针对(Number,String,Boolean)三种数据.直接存储在栈(stack)中,占据空间小,大小固定,属于被频繁使用数据,所以放在栈.
2021-05-24 19:52:25
199
原创 深拷贝
什么是深拷贝:首先我们要明白一点,js中数据类型分为基本数据类型(Number, String, Boolean, Null, Undefined, Symbol)对象数据类型(Object)引用数据类型的值时保存在栈内存和堆内存中的对象.栈区内存保存变量标识符和指向堆内存中该对象的指针。当寻找引用值时，解释器会先寻找栈中的地址。然后根据地址找到堆内存的实体。为什么要进行深拷贝首先我们先看代码:let a = b = 2a = 3console.log(a)con..
2021-05-23 21:45:13
66
原创 vue-route 的使用
我们先来说vue-route的两种模式以及区别为什么要有hash和history?对于Vue这类渐进式前端开发框架,为了构建spA(单页面应用),需要引入前端路由系统,这也就是vue-route存在的意义,前端路由的核心,就在于------改变视图的时不会向后端发出请求.为了达到这个目的,浏览器当前提供了以下两种支持: 1:hash----即地址栏URL中的#符号比如这个 URL：http://www.abc.com/#/hello，hash 的值为#/hello。它的特点在于：h...
2021-05-23 21:26:05
585
原创 Vuex概念
Vuex是什么?Vuex是一个专门为vue.js应用设计的 (状态管理架构) , 统一管理和维护各个vue组件的可变化状态 (可以理解成vue组件李某些data).Vue有五个核心概念,分别是"state,getters,mutations,actions,modules".文本将对这个五个狠心概念进行梳理.总结:state是基本数据类型getters是从基本数据派发的数据mutations是提交更改数据的方法,同步actions他像是一个装饰器,包裹mutatuons,是之可以
2021-05-23 19:38:55
110
转载 vue的生命周期
vue的生命周期分为8个阶段简记:##创建前/后##：在beforeCreated阶段，vue实例的挂载元素el和数据对象 data 都为undefined，还未初始化。在 created阶段，vue实例的数据对象data有了，el还没有。##载入前/后##：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染##更新前/后##：
2021-05-21 07:56:18
777
原创 Vuex组件通信
我们先了解Vuex 的五大核心Vuex是一个专门为Vue.js应用设计的状态管理架构,统一管理和维护哥哥vue组件的可变化状态Vuex有五大核心,state,getters,mutations,actions,modulse.文本将对这个五大核心概念进行梳理.五大核心的意思:state => 基本数据getters => 从基本数据派生的数据mutations => 提交更改数据的方法，同步！actions => 像一个装饰器，包裹mutations，使之可..
2021-05-20 07:53:15
318
原创 uniapp(uni.request Promise简单封装)
uniapp(uni.request Promise简单封装)1.首先我们先在原有的基础目录上创建一个文件夹,在文件夹里面创建一个index.js文件2.接下来我们进行封装3.然后我们在全局里面在引用 在mian.js文件中引用4.如何使用...
2021-05-19 08:08:48
210
原创 优选商城
优选商城1.当我们想把微信小程序的优选商城这个项目做出来的时候,我们先配置好所有的路由,(个人习惯),我们也可以一边写一边配置需要的路由,我们在app.json里面配置2.谁的路由在最上面,系统会默认先加载谁 ,我们也需要先配置好tabBar底部,路由跳转, 下面是代码和效果 "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath.
2021-05-17 23:39:42
1113
原创 小程序发布流程
小程序发布流程我们的发布流程大致分为三大步骤 1.上传代码 2.提交审核 3.发布版本在我们发布之前,配置服务器域名的白名单,我们直接点开发配置点开之后我们配置合法域名我们把这里配置好了之后,我们在去我们写好的微信小程序里面,右上角点上传上传成功后的提示到这里我们开发代买这一块就完事了,接下来我们就是去微信小程序平台发布了2.提交审核进入微信小程序的官网https://mp.weixin.qq.com/wxamp/dev...
2021-05-17 10:45:02
494
原创 小程序支付流程
小程序支付流程当我们把自己喜欢的商品添加到购物车,想要去支付的时候,我们点击去结账,没有收货地址也是不可以的这时候我们点去结账的时候,我们判断是否有地址,是否有商品 我们给去结账绑定一个事件<viewclass="jz"bindtap="js">去结账</view>下面是js代码,逻辑代码 data() { address: {} // 数量 totalNum: 0 },// 结算 js(e) { // ...
2021-05-16 21:35:48
123
原创 小程序登录授权的流程
小程序登录授权的流程首先我先在页面上完成一个登录的和未登录的布局样,这是未登录的样子2.登录的样子首先我们先在js文件中的data里面写一个方法userinfo:{}然后我们使用<!-- 以登录--><viewclass="box_yes"wx:if="{{userInfo.avatarUrl}}">未登录的布局样式</view><!-- 未登录 --><viewclass="box_no"...
2021-05-16 21:03:04
429
原创 小程序获取收货地址的流程
小程序获取收货地址的流程 当我们把自己喜欢的商品加入购物车,想要付款的时候,如果没有收货地址系统会提示我们,而且也不能完成支付 1.当我们没有收货地址的时候,是不能完成支付的,系统会提示我们,这是没有地址的效果 现在我们来完成收货地址的操作 1.首先我们先给页面上写一个button按钮<button>添加收货地址</button> 2.然后我在给<button>按钮绑定一个事件<b...
2021-05-16 20:40:16
611
1
原创 小程序的收藏、分享、客服功能
收藏需要我们插入一个图表按钮,点击收藏让他有明显的效果视图,让用户有更好的体验我们可以去https://www.iconfont.cn/这个网站来找到我们需要的图表 简单的使用图表 <text class="iconfont icon-shoucang"></text>具体实现的代码,来完成我们上面的收藏,和未收藏 <text class="iconfont {{isCollect?'icon-shoucang1':'icon-s...
2021-05-14 20:01:40
319
原创 下拉刷新,上拉加载
微信小程序下拉刷新我们可以利用<scroll-view></scroll-view>组件属性有::当我们想要做下拉刷新的时候,需要在.json文件里面配置 "enablePullDownRefresh":true, "backgroundTextStyle":"dark"当我们把.json里面的代配置好了,在上.js文件夹里面写下拉刷新 下拉刷新的事件onPullDownRefresh(){} // 接口要的参数 QueryP...
2021-05-14 18:57:01
88
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人