- 博客(48)
- 收藏
- 关注
RSS订阅原创 消费平台遇到的问题及一些小收获
有那种前几个样式和后面几个样式不一样时，可以使用if，else-if来进行判断显示：<li v-for="(item,i) in WindowsVal" :key="i"> <img v-if="i == 0" src="@/assets/image/top.png" /> <img v-else-if="i == 1" src="@/assets/image/two.png" /> <img v-else-if="i == 2" src="@/.
2020-05-28 17:59:08
360
原创 vue如何使用防抖
首先先将以下代码复制粘贴至自己的代码中const debounce = function(handle, delay) { var timer = null; return function() { var _self = this, arg = arguments; clearTimeout(timer); timer = setTimeout(function() { handle.ap.
2020-05-12 10:44:24
905
原创 vue实现父组件获取子组件的方法或者属性值
vue的本质就是每一块只负责自己这一块的工作，这样更容易维护。这里主要使用了vue的$ref：当用在一般的标签上时，主要功能是获取dom节点，进行一些dom的操作。当使用在子组件上，可以用来获取子组件的属性。那么下面我们要实现的就是如何在父组件上使用子组件的方法目标：我需要实现一个在父组件上控制子组件的弹窗显示，并且通过参数判断显示哪一个内容。首先我们很容易想到就是绑定一个点击事件，并且携带一个参数，并且获取子组件的属性，这样在这个父组件中我并没有控制子组件的开关，只是我获取了子组件的方法
2020-05-12 10:20:08
4450
原创 如何创建angular项目
准备工作1.下载安装mode.js2.打开cmd执行命令npm install -g @angular/cli安装angular/cli（只需要安装一次）创建angular项目1.创建一个文件目录，并且在cmd中进入这个目录，然后执行代码ng new angulardemo01（angulardemo01为项目名称）2.安装好之后cd进入angulardemo01目录，然后执行ng se...
2020-05-05 20:32:05
406
原创 如何为vue项目添加进度条
使用到的插件为NProgress下载NProgress插件（在elementui中直接找到依赖，点击下载依赖）在main.js中引入// 导入NProgress包对应的JS和CSSimport NProgress from 'nprogress'import 'nprogress/nprogress.css'并且注册// 在request拦截器中，展示进度条 NProgre...
2020-04-30 15:23:27
656
原创 vue如何做到搜索列表中相应的值
在input上双向绑定data中input框的值<el-input placeholder="请输入内容" v-model="queryInfo.query">在input上绑定点击事件，获取页面的数据，并且输出相应的值<el-button slot="append" icon="el-icon-search" @click="getGoodList">&l...
2020-04-25 17:29:00
1245
原创 如何使用element-ui完成分页
首先在获取所有数据的时候，获取到总页数，并且赋值，便于后面调用 // 获取商品数据 async getGoodList () { const { data: res } = await this.$http.get('goods', { params: this.queryInfo }) if (res.meta.status !== 200) { ...
2020-04-25 17:09:46
426
原创 如何使用vue定义一个过滤器
首先在main.js中将过滤器写好，放在main.js中是方便所有组件都可以调用// 定义全局过滤器Vue.filter('dateFormat', function (originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').p...
2020-04-25 16:39:10
380
原创 vue如何点击确定像后台添加相应的内容
分配角色：（使用了elementui，上下衔接可能不那么清晰，主要是想告诉大家这件事的思路）获取点击一二三级id，使用，分割，传入后台使用到elementui中tree的两个api：获取半选中的节点id：getCheckedKeys获取全选中的节点id：getHalfCheckedKeys最终打到的目的：代码部分详解：给点击确定时绑定点击事件获取全选和半选的id将获取的id使...
2020-04-23 11:24:23
342
原创 如何点击二级菜单切换地址并且转到相应的页面
给二级菜单绑定点击事件，并且将地址的参数传送给函数 <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="SaveNavState('/' + subItem.path)"></el-menu-item>在方法中定义...
2020-04-17 17:32:03
1313
原创 码云的一些小知识（持续更新中）
1.创建分支git check -b login2.查看分支，*代表当前分支git branch3.查看vue uivue ui4.添加到暂存区git add5.提交代码git commit -m "完成了登录功能"6.合并分支切换到master（需要合并到那个分支就切换到那个分支）git checkout master合并git merge7.将本地代码推送至码云git pus...
2020-04-16 17:16:25
187
原创 vue如何使用路由导航守卫
在router/index.js中定义路由导航守卫// 挂载路由导航守卫router.beforeEach((to, from, next) => { // to 将要访问的路径 // from 从哪个路径跳转来的 // next 是一个函数，表示放行 // 判断是否存在token，如果不存在强制跳转到login页面 if (to.path === '/login')...
2020-04-16 16:42:47
274
原创 vue如何使用axios查询上传数据是否存在数据库表中
需要在main.js中配置// 引入axiosimport axios from 'axios'// 配置请求的根路径axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'// 挂载到vue的原型对象上Vue.prototype.$http = axios点击获取到传过去的值之后，匹配数据库中是否含有这个数据...
2020-04-16 15:42:12
852
原创 如何使用elementui
elementui地址：https://element.eleme.cn/#/zh-CN/component/form需要使用的时候，在main.js中引入在element.js中引入复制需要的代码在data中定义在这里我们演示一下input/button的用法在main.js中引入// 引入elementui的jsimport './plugins/element.js'...
2020-04-16 11:48:03
532
原创 Element-UI的使用
概述Element-UI：一套为开发者，设计师和产品经理准备的基于Vue2.0的左面端组件库。官网地址：https://element.eleme.cn/#/zh-CN基本使用1.基于命令行的方式手动安装（不推荐）安装依赖包 npm i element-ui -s导入Element-UI相关资源(在main.js中)import ElementUI from 'element-u...
2020-04-14 16:12:34
268
原创 webpack知识点
模块化概述传统开发模式存在命名冲突，文件依赖的问题，通过模块化可以解决这些问题。模块化就是把单独的一个功能封装到一个模块中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以以来别的模块。...
2020-04-12 16:43:29
169
原创 Promise的认识
Promise的概述Promise是异步编程的一种解决方式，从语法上讲，Promise是一个对象，它可以获取异步操作的消息。由于异步操作存在返回的顺序不确定，如果想要返回顺序确定的话就需要嵌套（回调地狱），Promise就可以解决这一个问题，并且Promise对象提供了简洁的API，使异步操作更加简单Promise的用法<script type="text/javascript"&g...
2020-04-10 16:43:12
107
原创 vue如何完成一个轮播
首先先下载npm install vue-awesome-swiper@2.6.7 --save然后再mian.js中全局引用（因为可能全局都需要使用，所以就需要在main.js中引入）3.然后在swiper组件中使用（我这里直接使用了for循环数据）4.配置swiper的配置项5.最后在需要引入的地方引入即可如何使用递归完成数据的循环？...
2020-04-10 11:42:16
159
原创 vue如何使用iconfont？vue如何使用全局样式？如何自定义路径呢？
如何使用iconfont首先在iconfont中添加自己的项目，然后加入自己需要的小图标，然后下载到桌面将iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff和iconfont.css下载到自己的文件中（一般放在assets目录下的styles下的iconfont文件中，iconfont.css可直接放在styles的文件中）然后修改ic...
2020-04-09 17:25:49
672
原创 vue的路由，页面跳转以及创建组件
vue路由创建一个router的文件夹，然后里面有一个index.js的文件，在顶部引入组件的路径，然后在routes中定义路径。import Vue from 'vue'import Router from 'vue-router'import Home from '@/pages/home/Home'Vue.use(Router)export default new Rout...
2020-04-09 17:19:22
503
原创 vue如何下载使用stylus
在控制台下载npm install stylus --save以及npm install stylus-losder --save然后在style上加上lang="stylus"<style lang="stylus" scoped></style>其中scoped的意思是这些样式只对这个组件有影响。...
2020-04-09 16:40:43
607
原创 vue非父子组件的传值
1.总线程/发布订阅模式/观察者模式/bus<div id="app"> <child content='dell'></child> <child content='lee'></child></div><script type="text/javascript"> //当我们在prototype...
2020-04-08 15:54:16
87
原创 vue中如何完成动画效果（css以及js的方法）
首先需要使用<transition name="fade"></transition>包裹<transition name="fade"> <div v-if="show">1212121</div></transition>然后<style></style>中写他的样式<style ...
2020-04-08 15:34:20
1227
原创 vue组件中的一些小细节
1.在ul li这种类似的标签中，如果要定义组件，需要使用is来绑定，而不是直接挂载2.在子组建中使用data必须是一个函数（因为子组件不止被调用一次）3.如果将ref写在一个div上，使用this.$ref.名字，获取到的是dom元素如果在子组件上写ref，使用this.$ref.名字获取的是子组件的引用注意：父组件可以随意向子组件传值，但是子组件不可以修改父组件的值，如果需要更改...
2020-04-08 11:54:04
98
原创 如何获取节点的值，并且将它推入到input的value中
使用innerText就可以获取到节点的值将获取到的值放入val()的括号中就可以传递值给input下面我的例子比较复杂，并且在这里卡了很久就是因为传递值的时候出现了问题我的例子是：当我点击一个按钮时，去获取一个dom节点的值，然后点击另外一个按钮时获取到这个值，实际上，当我点击第一个按钮的时候，就已经将这个值获取到了并且添加到input的val上了，所以这里无关乎第二个按钮var obj...
2020-04-08 11:47:38
674
原创 如何使用vue完成todolist页面
当学习完react再回过头来看vue，就会发现，vue操作起来比react简单多了，下面让我们看看使用vue如何完成todolist吧。思路：首先我们还是一样，首先我们创建一个input框，一个button，一个ul li的list列表，这时我们先在input上使用v-model双向绑定一个inputValue，当我input框中的内容改变时，inputValue就会跟着改变，那么我们创建一个l...
2020-04-06 14:10:45
371
原创 js如何实现点击更换已有img标签的图片
思路：首先获取到这些img这个标签，然后循环出所有的img节点，然后准备几张照片，进行循环，最后在for循环中，放入循环图片的下标<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
2020-04-02 11:41:28
3091
原创 react如何点击更改数据。
准备工作首先创建一个login的文件夹，其中含有入口文件和store的文件这里正式开始啦！思路：首先先要写一个三元判断，判断当reducer中数据是false或者true的时候应该显示的内容，并且获取reducer中的默认数据，然后绑定一个点击事件，当点击时去派发action然后通过reducer更改数据，这样就可以啦！！！那么首先我们写一个判断{ this.props.login...
2020-03-31 16:41:59
1668
转载 react的一些报错（后续将持续更新）
TypeError: Cannot read property ‘get’ of undefined，或者报错 ‘item.get’ of undefined这种问题一般都是immutable报错，这时候去检查你是否正确下载immutable或者是否正确使用immutable在react中的使用戳这里...
2020-03-31 16:12:32
116
原创 如何使用react完成点击返回顶部操作
首先我们先写返回顶部的样式然后绑定一个点击事件，滚动到顶部BackTop onClick={this.props.toTop}>返回</BackTop>toTop(){ console.log(111) window.scrollTo(0,0) }这样就可以实现点击返回到顶部了。接下来我们要写滚动到一定距离出现，那么我们就需...
2020-03-28 13:46:01
3399
1
原创 react中如何使用axios传数据
思路：首先在actionCreator.js中将axios请求写好，并且获取数据之后派发action，然后再组建中的mapDispatchToProps中去dispatch这个方法，然后将这个方法放到componentDidMount这个周期函数中，最后在reducer.js中去判断type，并且将数据返回出来，这样就实现啦！具体代码：//首先在actionCreator.js中，我需要使用a...
2020-03-23 11:59:46
1251
原创 如何在react中使用路由功能
首先需要下载react-router-domnpm install react-router-dom --save在App.js中引入import { BrowserRouter,Route} from 'react-router-dom'用<BrowserRouter></BrowserRouter>包裹起来，表示这里面我要使用路由了。（里面需要用一个标签包起来，不...
2020-03-20 11:49:32
239
原创 react如何处理只显示10条数据，点击换一批更换下一批数据
首先在reducer.js的defaultState中放入page和totalPage的默认数据const defaultState =fromJS({ page:1, totalPage:1})然后通过dispatch将totaolPage（总页数）传递过来export const getList = () => { //返回一个对象 return...
2020-03-20 11:34:47
1616
原创 如何使用react中axios获取数据
准备工作下载axiosnpm install axios --save然后在需要调用数据的地方引入import axios from 'axios';正式开始我需要让dispatch派发action给store，告诉store我需要干什么！（这里我通过getList()方法）const mapDispatchToProps = (dispatch) =>{ retu...
2020-03-19 15:43:13
1085
原创 如何正确安装使用redux-thunk
首先下载redux-thunknpm install redux-thunk --save然后在创建store的地方使用import { createStore, applyMiddleware, compose } from 'redux';import thunk from 'redux-thunk';import reducer from './reducer';const co...
2020-03-19 11:55:38
529
原创 在react的小项目中点击显示隐藏内容的写法
首先写一个方法：const getListArea = (show) => { if(show) { return( <SearchInfo> <SearchInfoTittle> 热门搜索 <Sear...
2020-03-19 11:23:29
883
原创 react如何拆分actionCreate和actionType
在store文件夹下创建actionCreate.js（用于放type类型）和actionTypes.js（用于将type的值变为常量）的文件。在actionTypes.js中创建需要使用的常量，并且export出去。//这里需要加header是因为这个store在header这个文件夹下，所以要加上这个路径export const SEARCHER_FOCUS = './header/...
2020-03-19 10:26:22
728
原创 如何使用combineReducer
如何使用combineReducer拆分reducer呢？首先在组建中创建一个store的文件夹，其中reducer.js放该组件的数据代码然后在最外层的store文件夹中的reducer.js文件中使用combineReducer整合小组件的reducer代码import { combineReducers } from "redux";import headerReducer f...
2020-03-18 15:08:50
265
原创 如何使用iconfont图标
首先点击进入官网iconfont登录账号选择自己需要的iconfont，点击添加入库点击右上角的购物车点击添加至项目最后点击下载至本地然后只需要留下字体文件，其余的可以删除最后放到项目的目录之下由于iconfont整个项目可能都会需要，所以我会将它放到全局下面，那么iconfont.css就需要更改，首先将css后缀更改成js，然后引入import { createGlo...
2020-03-11 15:54:09
499
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人