- 博客(67)
- 收藏
- 关注
RSS订阅原创 子容器margin-top作用到父容器
子容器margin-top作用到父容器的解决方法：给父容器设置display: inline-block;
2022-02-12 14:39:35
738
原创 如何使用graceui5.0
组件自动加载传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom 将其精简为一步。只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构的组件。就可以不用引用、注册，直接在页面中使用。同时打包后会自动剔除没有使用的组件。一、直接使用官网下载GraceUI5，解压缩打开HBuilder X, 把解压缩好的文件包拖到HBuilder中打开skin皮肤文件夹，复制black.css到skin文件夹，重命名为自己的名称，自己
2022-02-09 09:37:24
1802
原创 uni-app中的应用生命周期，页面生命周期，组件生命周期
一、应用生命周期（写在app.vue中）onLaunch：当整个项目启动，渲染完成时触发（全局只触发一次）onShow：小程序显示出来（从后台进入前台显示，可以触发多次）onHide：小程序隐藏起来时触发（从前台进入后台，可以触发多次）onError: 出现异常时触发二、页面生命周期onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面onReady 监听页
2022-02-08 16:44:57
6663
原创 解决uni-app中image动态绑定本地图片显示不出来的问题
首先在button的点击事件chooseImage中通过uni.chooseImage（{}）上传本地图片，把路径取出来赋值给data中的imgArr再在iamge中，通过v-for来循环imgArr数组，动态绑定src来显示图片。但图片确显示不出来。解决方法：this的指向有问题，在chooseImage事件中，先把this取出来，再进行赋值...
2022-02-08 14:27:10
6683
2
原创 uni-app中的样式
rpx即响应式px, 一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。@import语句可以导入外联样式表支持常用的选择器：class，id，元素选择器等uni-app中不能使用 * 选择器page相当于body节点定义在App.vue中的样式为全局样式，作用于每个页面。在pages目录下的vue文件中定义的样式为局部样式，只作用于对应的页面，并会覆盖App.vue中相同的选择器uni-app支持使用字体图标，.
2022-02-07 23:25:26
494
原创 微信小程序报错：Cannot read property ‘forceUpdate‘ of undefined
微信小程序报错：Cannot read property ‘forceUpdate‘ of undefined是因为HbuilderX中的uni-app项目的manifest.json文件中，没有配置DCloud AppID点击重新获取，注册一个账户，登录之后，就能得到一个AppID了
2022-02-07 13:40:22
645
原创 常用的webstore和vscode插件
Webstore插件Chinese中文语言包One dark theme主题Rainbow brackets彩虹括号Translation翻译WeChat mini program supportVscode插件小程序开发助手Atom one dark themeChineseEasy less：生成.less文件的同时，生成.wxss文件安装easy less插件，设置，搜索框输入settings.json，点击进入settings.json文件：Auto rename t
2022-02-06 16:41:55
582
原创 如何使用vue？
第一步：安装node环境（安装node后，自带了npm管理器）从node.js官网下载安装包解压缩安装包配置环境变量：右键我的电脑，属性——高级系统设置——环境变量——系统变量——点击path——新建——复制node所在的路径进去——确定在ndm中查看node和npm的版本号第二步：安装vuenpm install vue -g 全局安装vue第三步：安装vue-clinpm install -g @vue/cli 全局安装脚手架查看脚手架版本号第四步：打开
2022-02-06 13:09:18
1488
1
原创 电商后台管理系统功能分析vue+element ui
一、登录页面① 通过el-form表单绑定data中的数据：LoginFrom：{username：’’, password: ‘’}② 登录按钮功能实现：- 通过this.refs.refname来获取el−form表单对象，再通过表单的validate()方法来对整个表单进行校验−验证不通过，直接return−验证通过，发送请求。−把服务器返回的数据token保存到sessionStorage中，然后通过this.refs.refname来获取el-form表单对象，再通过表单的validate
2022-01-05 22:40:20
1006
原创 CSS中的position定位
position：absolute绝对定位，绝对定位会改变元素的性质，行内变块，块的高度被内容撑开开启绝对定位后，元素会从文档流脱离绝对定位是相对其包含块进行定位的。绝对定位会使元素提升一个层级。绝对定位的包含块：离他最近的开启了定位的祖先元素，如果所有祖先元素都没有开启定位，则HTML跟元素就是它的包含块。position：relative相对定位，相对定位不会改变元素的性质，块还是块，行内还是行内开启相对定位后，不会使元素脱离文档流相对定位是参照于元素自身在文档流中的位置进行定位
2022-01-05 13:05:40
338
原创 常用的CSS样式
border-radius： 50%border-radius： 1px 2px 3px 4px这个属性允许你为元素添加圆角边框。 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果是50% 就会变成圆形position：absolute绝对定位...
2022-01-05 12:49:49
255
原创 什么是vue.$nextTick()
nextTick()： 数据发生更新，更改的DOM渲染完毕之后，会自动调用nextTick()函数中的回调函数使用场景一：点击+new Tag按钮，按钮变成input，并且使input自动获取焦点① 在el-input标签中绑定了ref② 在el-button按钮的showInput事件中，需要通过this.refs.refname来获取input标签。点击+newTag按钮之后，虽然inputVisible=true，但input元素可能还没有渲染出来，然而ref要在dom渲染完成后才会有，此时调
2022-01-01 23:38:43
268
原创 vue的生命周期函数
生命周期函数：在某个时刻会自动执行的函数① beforeCreated()：在vue组件(实例)初始化之后，vue实例创建完成之前执行。此时vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。② created()：在vue组件(实例)创建完毕后立即调用。此时挂载阶段还没有开始，$el属性目前还不能用。this.data已经可以访问，监听器、事件、方法也配置好了，此时，可以发送网络请求，接收数据赋值到data中了。③ beforeMounted()：在挂载开始之前调用。
2022-01-01 21:19:09
623
原创 vue中子组件向父组件传递数据
子组件Child向父组件Father传递数据一、子组件中，点击按钮触发btnClick事件时，通过this.$emit传递自定义事件itemClick和item二、在父组件中，通过（@自定义事件名称）来接收子组件传递过来的自定义事件和参数三、页面显示（点击热门推荐按钮，打印出热门推荐。点击电脑办公，打印出电脑办公）...
2022-01-01 19:46:17
729
原创 vue中父组件向子组件传递数据
子组件Child要使用父组件Father中的数据：name一、在父组件中，需要在引用子组件时绑定数据二、在子组件中，通过props属性获取父组件中传过来的数据
2022-01-01 19:13:37
249
原创 插槽的使用
一、插槽的基本使用① 在子组件Child预留一个插槽slot，插槽中有一个默认的button，当父组件引用子组件时无指定，就会显示默认的button，如果父组件中引用子组件时，有指定内容，指定的内容就会替换掉整个slot标签② 在父组件引用子组件，子组件标签里的内容会替换子组件中的slot标签③ 页面显示：...
2021-12-31 13:07:46
2873
原创 vue项目上线的步骤
一、通过node创建web服务器① 创建一个文件夹vue_shop_server，通过webstore打开② 在webstore的终端运行 npm init 来初始化一个包管理工具,生成package.json文件③ 运行 npm i express -s 安装express包④ 把vue-shop项目中打包好的dist文件夹复制一份到vue_shop_server文件夹中⑤ 在vue_shop_server中创建一个app.js文件⑥ 导入express，通过 express 快速创建 w
2021-12-28 14:02:04
3158
原创 vue项目完成后如何实现项目优化？
一、为开发模式与发布模式指定不同的打包入口vue ui创建的项目，隐藏了webpack配置，可以在src根目录新建一个vue.config.js配置文件。在配置文件中向外导出配置对象。2.默认情况下，vue项目的开发模式和发布模式，共用一个打包的入口文件即（src/main.js）。可以使用configureWebpack或chainWebpack来定义webpack的打包配置把main.js文件改为main-dev.js。 复制一份main.js改为main-prod.js二、通过ext
2021-12-27 22:33:12
1014
原创 vue中的ref
一、vue中可以通过ref来获取标签1. 在要获取的标签中绑定ref2. 通过this.$refs.refname来获取标签结果如下：
2021-12-14 23:16:09
866
原创 axios的拦截器
axios的拦截器分请求拦截和响应拦截一、请求拦截作用：拦截axios的网络请求如果axios发送请求成功，进入回调函数一如果axios发送请求失败，进入回调函数二axios.interceptors.request.use(回调函数一，回调函数二)一般使用方法：以下就是打印出来的config：二、响应拦截作用：拦截axios的网络请求响应如果返回结果成功，进入回调函数一如果返回错误信息，进入回调函数二axios.interceptors.response.use(回调函数一，回
2021-12-10 22:09:37
1021
2
原创 vue-router中的导航守卫
vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.beforeEach()：前置钩子，也叫前置守卫，在路由马上跳转之前触发afterEach()：后置钩子，也叫后置守卫，在路由跳转之后触发beforeEach()和afterEach()之中传入一个回调函数，回调函数中有个三个参数beforeEach((to,from,next) => {})例子：如果用户
2021-12-10 13:28:56
487
原创 localStorage和sessionStorage的区别
定义localStorage：本地储存，它的生命周期是永久的，除非客户自己清除掉sessionStorage：会话储存，生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那通过它储存的数据也会被清空localStorage和sessionStorage都保存在客户端，只能储存字符串类型使用setItem(key, value) —— 保存数据，以键值对的方式存储信息getItem(key) ——获取数据，将键值传入，即可获取到对应的value值removeItem(key) ——
2021-12-10 11:13:02
200
原创 如何在vue项目中使用element ui
第一步：安装element ui插件第二步：打开element官网——组件第三步：例如，选择Form表单——点击显示代码第四步：复制你需要的代码到你的vue项目中第五步：打开plugins文件夹下的element.js文件，导入你需要用到的组件，再Vue.us()把它们注册成全局可用的组件...
2021-12-09 14:13:29
2715
原创 vue-router中的路由懒加载
路由中普通方式引用组件路由中通常会定义很多不同的页面。这些页面最后会被打包到一个js文件中。但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大.如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.为了避免以上情况，可以使用懒加载。最后打包出来的文件路由中懒加载方式引用组件路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.只有在这个路由被访问到的时候, 才加载对应的组件最后打包出来的文件.
2021-12-08 10:21:43
524
原创 vue-router中$router和$route的区别
$router$router：就是我们new出来的router实例对象，里面包含了所有我们配置的路由。$route$route：当前哪个路由处于活跃状态，就是哪个路由。其中一个路由
2021-12-07 23:05:47
221
原创 vue中如何实现跳转页面时传递参数过去
一、配置路由时动态绑定路由二、跳转到detail页面时，获取这个id通过$route.params.id来获取跳转时传递过来的参数$route：当前哪个路由处于活跃状态，拿到的就是哪个路由
2021-12-07 23:02:17
781
原创 vue里面的动态路由
一、配置路由路径时，通过:id来绑定动态路由二、通过router-link来绑定路由跳转之后路径就是：二、通过代码的方式来绑定路由跳转之后路径就是：
2021-12-07 22:51:13
483
原创 如何通过代码来跳转路由？
一、为button绑定click事件二、click事件的方法Vue-router插件源码里为我们所有组件都添加了一个属性$router$router属性里有两个方法：push() , replace()push()：相当于调用history.pushState，页面可以返回replace()：相当于调用history.replaceState，页面不能返回...
2021-12-07 21:45:54
250
原创 如何用history模式改变网页的路径？
网页默认是通过URL的hash来改变路径的。但通过hash来改变路径，网页的路径中会出现#，不好看如果希望使用HTML5的history模式来改变路径：可以通过以下方式：网页路径就会变成以下样子：
2021-12-07 21:10:21
392
原创 vue-router的配置方式
一、导入路由二、通过Vue.use(插件)来安装路由所有插件在npm中安装了之后，还需要通过Vue.use()来安装三、配置路由和组件之间的映射关系四、导出router对象五、在main.js文件中导入router对象六、在main.js文件中的Vue对象中进行挂载...
2021-12-06 22:03:43
605
原创 前端如何改变url,但页面不发生刷新？
方法一、hash通过直接赋值location.hash来改变href，但页面不会发生改变url: http://localhost:8080/Home/newsurl变为：http://localhost:8080/Home/news#aaa方法二、HTML5的history模式：pushState此方法的是压栈的方式把地址压进栈中，后进先出url ：http://localhost:8080/Home/newsurl变为：http://localhost:8080/Home/bbb方
2021-12-06 21:28:51
1433
原创 什么是前端渲染和后端渲染和SPA页面
前端渲染浏览器中显示的页面中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页。后端只负责提供数据。后端渲染当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿端。...
2021-12-06 11:42:57
326
原创 git分支
一、git分支中常用的指令：列出所有本地分支git branch列出所有远程分支git branch -r新建一个分支，但依然停留在当前分支git branch 分支名字新建一个分支，并切换到该分支git checkout -b [branch]合并指定分支到当前分支git merge [branch]删除分支git branch -d 分支名字删除远程分支git push origin --delete [branch-name]git bran.
2021-12-03 21:06:44
90
原创 git忽略文件的规则
忽略文件有些时候我们不想把某些文件纳入版本控制中，比如数据库文件，临时文件，设计文件等在主目录下建立".gitignore"文件，此文件有如下规则：忽略文件中的空行或以井号（#）开始的行将会被忽略。可以使用Linux通配符。例如：星号（*）代表任意多个字符，问号（？）代表一个字符，方括号（[abc]）代表可选字符范围，大括号（{string1,string2,…}）代表可选的字符串等。如果名称的最前面有一个感叹号（!），表示例外规则，将不被忽略。如果名称的最前面是一个路径分隔符（
2021-12-03 17:27:51
704
原创 git文件操作
1. 文件的四种状态Untracked: 未跟踪, 此文件在文件夹中, 但并没有加入到git库, 不参与版本控制. 通过git add 状态变为Staged.Unmodify: 文件已经入库, 未修改, 即版本库中的文件快照内容与文件夹中完全一致. 这种类型的文件有两种去处, 如果它被修改, 而变为Modified. 如果使用git rm移出版本库, 则成为Untracked文件Modified: 文件已修改, 仅仅是修改, 并没有进行其他的操作. 这个文件也有两个去处, 通过git ad
2021-12-03 17:19:39
85
原创 git项目搭建
创建本地仓库有两种方法：一是创建全新的仓库，另一种是克隆远程仓库一. 本地仓库搭建git init：创建全新的仓库运行完git init之后，wcx-gitcode文件夹中就会出现一个.git文件夹，关于版本等的所有信息都在这个目录里面。二、克隆远程仓库来到码云你要克隆的仓库中，点击克隆/下载——复制地址使用git clone 地址：来克隆远程服务器上的仓库到本地本地wcx-gitcode文件夹中就有克隆下来的项目了...
2021-12-03 13:48:18
187
原创 git的工作原理
workspace：工作区，平时存放项目代码的地方index/stage：暂存区，用于临时存放你的改动，事实上它只是一个文件。repository：仓库区（本地仓库），安全存放数据的位置。这里面有你所有提交到仓库的所有版本的数据。其中head指向最新放入仓库的版本remote：远程仓库，托管代码的服务器。例如GitHub，码云。...
2021-12-03 13:28:00
178
原创 git配置
1. git配置所有的配置文件，都是保存在本地的。git系统配置保存在-----Git\etc\gitconfig ：Git 安装目录下的 gitconfig文件git的用户配置保存在----C:\Users\Administrator\ .gitconfig。只适用于当前登录用户的配置2. 如何查看配置查看所有配置：git config -l查看系统配置：git config --system --list查看用户配置：git confit --global --list3
2021-12-03 11:23:40
332
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人