- 博客(31)
- 收藏
- 关注
RSS订阅原创 Vue事件修饰符的使用
事件处理在原生DOM绑定事件的年代，我们经常会使用到e.preventDefault() 或 e.stopPropagation()等操作。而在vue中为了简化这种常见需求，为v-on提供了一个叫Event Modifiers (事件修饰符)的语法糖。.stop 等同于JavaScript中的event.stopPropagation()，阻止事件冒泡.prevent 等同于JavaSc...
2019-05-10 18:06:58
554
原创 vue点击当前元素添加class 删除兄弟元素的class
在vue中当我们要实现点击元素动态添加类名时，我们不能像JQ那样去用（xxx.addClass(‘class’).siblings().removeClass(‘class’)）实现，那我们应该怎样去做呢解决方案：1.在data里面申明一个属性，默认值最好为数字类型，并且不得大于当前元素+所有兄弟元素的length，可以默认为0（第一个元素选中）2.在当前元素中添加动态class： “:cl...
2019-05-10 16:53:51
11556
1
原创 Vue项目打包部署到Tomcat
废话不多说，直接进入正题一.通常在开发环境下请求后台接口会用到反向代理，而在生产环境中反向代理是不生效的，那么为了避免部署在服务器上时需要一个一个更改接口地址这种麻烦费时的操作，更改配置文件去自动切换接口地址。开发环境：在config文件夹下的dev.env.js中 添加这样一行代码'use strict'const merge = require('webpack-merge')c...
2019-05-10 16:23:55
12399
3
原创 Vue项目封装API接口及Axios请求与响应拦截，异常处理
前言：在实际的项目中，面对大量的使用axios请求数据，会使项目代码又多又乱，封装接口API与Axios的重要性不言而喻，不仅可以使代码更加的简洁优雅，而且会使修改接口，维护代码变得更加简单清晰。一.Axios的封装在vue项目中我们使用的是axios进行数据请求，还可以利用它进行请求拦截，响应拦截等操作1. 安装npm install axios; // 安装axios2. 配置在...
2019-05-10 13:51:27
4034
原创 Element-UI 上传图片到达一定数量后隐藏图片上传按钮
在项目中使用了element的el-upload上传图片组件，需求是上传一张图片而已，但是发现上传完以后一张图片后在旁边再生成一个上传图片的按钮就像这样，实在是接受不了，并且需求是上传之后没有这个上传按钮，删除图片之后再出现。首先我通过浏览器找到了这个上传图片按钮的class名称为 .el-upload–picture-card 我知道不可以直接修改，所以决定给这个组件绑定一个class名...
2019-05-09 00:21:35
11663
8
原创 解决Element-UI 侧边栏页面刷新后不高亮显示的问题
最近在写一个后台管理系统，用的vue+element，搞到侧边栏导航的时候路由跳转没有问题，但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了，因为项目时间比较紧，并且没有影响到我后面的开发所以就搁置了一段时间，今天有时间搞了一下，发现想的时候可能有些复杂，其实这个问题还是比较简单的。例如：下面这段代码<template> <el-aside width="240px"...
2019-05-08 23:40:02
4293
3
原创 Vue自动判断开发环境与生产环境的接口地址
在开发项目时请求数据经常会遇到跨域问题，还好使用vue配置反向代理还是很简单好用的，但是在项目要进行打包上线时会遇到一个问题，反向代理只适用于开发环境下，生产环境是不支持的，也就是说如果不对接口进行处理的话是会报错的，那么我们应该如何解决这个问题呢？一.config文件夹下dev.env.js中开发环境下使用了反向代理解决跨域问题module.exports = merge(prodEnv,...
2019-05-08 23:02:13
4836
原创 vue配置favicon.ico图标
一.添加内容在vue工程目录build文件夹下webpack.dev.conf.js与webpack.prod.conf.js文件中的html-webpack-plugin添加一条favicon:'favicon文件的相对路径’例如：new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.ht...
2019-05-06 00:13:35
9495
2
原创 react子组件向父组件传值，父组件获取子组件的数据和方法
在使用模块化开发，经常会遇到组件之间的传值问题，这篇说一下react子组件如何向父组件传值，父组件如何获取子组件的数据和方法父组件：import React, { Component } from 'react';import Header from './Header.js' //引入子组件class Home extends Component{ constructor(prop...
2019-03-05 19:17:58
19902
1
原创 react中的propTypes和defaultProps
defaultProps：父子组件传值中，如果父组件调用子组件的时候不给子组件传值，则可以在子组件中使用defaultProps定义的默认值，那么这个时候子组件就显示你所设定的默认值假设有一个Header子组件Header.defaultProps={ title:'这是一个默认值' }propsTypes：是验证父组件传值的类型合法性import PropTypes from '...
2019-03-05 19:08:41
550
原创 react的生命周期函数（超详细）
话不多说，直接进入正题！先来了解一下react的生命周期函数有哪些：组件将要挂载时触发的函数：componentWillMount组件挂载完成时触发的函数：componentDidMount是否要更新数据时触发的函数：shouldComponentUpdate将要更新数据时触发的函数：componentWillUpdate数据更新完成时触发的函数：componentDidUpdate...
2019-03-05 16:34:43
63459
10
原创 react如何实现一个基本的数据双向绑定
首先react本身并不像vue一样具有双向数据绑定这个概念，react只是mv，也就是数据层可以影响视图层，那么如果想要用react实现双向数据绑定应该怎么去实现呢？首先定义一个子组件 import React,{Component} from 'react'; //引入react class Todolist extends Component { constructor(p...
2019-03-04 23:56:06
1608
原创 react中获取input输入框内容的两种方法
一.通过event对象信息的方式<input onChange={(e)=>this.inputChange(e)}/><button onClick={()=>this.getInputValue} >获取input的值</button>inputChange(e){ alert(e.target.value) this.setStat...
2019-03-04 10:53:06
37059
2
原创 react中value与defaultValue的区别
在日常开发的过程中，我们经常会使用input输入框，有时会需要使用value绑定数据，针对这一点，react提出了一个概念，分为了约束性组件和非约束性组件。之前正常使用的时候我们只需要这样写： <input value={绑定的数据} type='text'/>在react中这样的写法会出现一个错误，提示你应该使用onChange来监听这个input或者使用defaultVal...
2019-03-04 09:32:42
10276
2
原创 react中解决this指向问题的四种方法
相信大家在学习和使用react的过程中，稍不注意就会出现this指向错误的问题，这个问题虽然比较好解决，但是还是让人比较头疼，那么下面就说一下解决这个问题的四种写法。一.行间定义事件后面使用bind绑定this run(){ alert("第一种方法！") } <button onClick={this.run.bind(this)}>第一种</b...
2019-03-03 23:54:32
6529
1
原创 React入门的一些注意事项
一.组件名称首字母大写、组件类名称首字母大写二.有constructor一定要有super子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象 constructor(props){ //有constructor必须有super...
2019-03-03 23:36:59
211
原创 搭建一个新的React项目及目录解读
一.搭建React开发环境的前期准备1.必须安装node，注意：推荐安装版本号为双数的版本下载地址搜索官网即可。2.使用node自带的npm或者安装yarnyarn下载地址或者使用npm安装yarn：npm install -g yarn二.搭建一个新的React项目1.安装React官方脚手架(create-react-app) 全局下安装一次就可以了命令行工具中输入：npm...
2019-02-26 23:03:39
523
原创 ES6的解构赋值
ES6解构：es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称之为解构1.数组的解构赋值//可以从数组中提取值，按照对应位置对变量赋值let [a,b,c]=[1,2,3]console.log(a);//1console.log(b);//2console.log(c);//3//本质上这种写法属于‘模式匹配‘，只要等号两边的模式相同，左边的变量就会被赋予对应的...
2019-02-25 22:25:03
269
原创 ES6声明变量新增的四种方式
在ES6中，除了之前ES5中的var和function两种声明方式之外添加了let、const、class、import四种方式。下面来详细说一下这四种方式！一.let1:声明的变量只能在当前作用域下使用例如：{ let a = 10; var b = 1;} console.log（a） // ReferenceError: a is not defined.consol...
2019-02-25 21:12:44
2391
原创 vue中使用animate css
vue2使用animate css安装安装的方式有很多种1.在html文件中直接引用从github上下载的资源 <link rel="stylesheet" href="vue2-animate.min.css">2.如果使用webpack并且用对了css-loader可以使用npm 安装npm安装包依赖npm install --save vue2-animate3...
2019-02-20 17:18:51
4101
1
原创 Vue项目真机测试
1：获取电脑网络ip地址**（注意：手机端与电脑端需在同一无线局域网下，可电脑连接手机热点）**命令行输入：ipconfig回车后获取到ip地址：如图中的IPv4地址:172.20.10.32：将获取到的地址替换项目中的http：localhost：8080地址具体步骤：打开项目中的package.json文件，将红色部分代码段"scripts": { "dev": "web...
2019-02-20 17:00:36
623
原创 Vue中嵌套路由的使用
上一篇说到了动态路由，这一篇说一下嵌套路由的使用。那么我们来看一下官方的一个图从上图就可以看出在同一个视图中，User不变的情况下Profile和posts的转换了，那么这就说明了这两者都是User中的嵌套路由，也可以叫子路由。另外作用也呼之欲出。嵌套路由可以在整体视图不变的情况下部分内容的变化。下面还是以我写的一个后台管理系统作为案例先来看一下效果图这里看到了在固定的一个位置商品...
2019-01-24 10:45:09
1905
1
原创 Vue动态路由的使用
动态路由是什么?一般我们使用vue-router配置路由时，都是直接配置固定的路径而动态路由是我们可以在 vue-router 的路由路径中使用“动态路径参数”让路径不再是固定的。动态路由的使用场景是什么？比如在写一个商品详情页面的时候，我们的页面结构都一样，只是渲染的数据不同而已，这时候就可以根据商品的不同id去设置动态路由，只需要写一个组件，就可以把每个商品的商品详情映射到同一个组件...
2019-01-23 15:38:01
5415
1
原创 Vue中获取当前定位城市名
首先百度地图的API http://api.map.baidu.com/api?v=2.0&amp;amp;amp;amp;ak=个人密钥那么我们先要申请密钥点击 百度地图开放平台进入 登录个人的百度账号后网页最下方，点击申请密钥会看到这个界面应用类型选择浏览器端，小程序的话就选微信小程序根据下方提示设置白名单后，点击提交。完成后可以在查看应用中查看注意：个人密钥妥善保管！！好了，准备完成，我们正式开...
2019-01-23 14:32:53
5867
原创 Vue中如何使用路由跳转页面及传递参数
在Vue中构建工程目录时，会有对话提示是否安装router，这里就不再多说，直接开始说一说vue中路由跳转的几种方法。使用之前需要在工程目录router文件夹中index.js文件中引入及配置路径。例如：一.router-link<router-link :to='/City'> //需要跳转到的页面的路径这是在视图层内标签形式的跳转方式，浏览器会将router-link...
2019-01-18 11:05:24
9966
原创 Vue中qs插件的使用
之前用Vue+element写了一个后台管理系统，在登录时使用axios请求数据传参时无法正常的获取数据。之后也是一通百度，发现原因是传递参数要将参数序列化。这里使用了qs插件：简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。在项目中使用命令行工具输入：npm install qs安装完成后在需要用到的组件中：import qs from 'qs’具体使用中我查...
2019-01-16 11:44:50
99037
5
原创 Vue中如何使用axios及配置反向代理
axios基于promise用于浏览器和node.js的http客户端特点支持浏览器和node.js支持promise能拦截请求和响应能转换请求和响应数据能取消请求自动转换JSON数据浏览器端支持防止CSRF(跨站请求伪造)原文地址第一步：安装在要使用的项目中使用cmd进入命令行工具，输入下面指令：$ npm install axios第二步：配置（全局）在项目m...
2019-01-16 09:59:42
2772
原创 Vue中如何下载并使用Vuex状态管理器
上一篇总结了一下组件之间传值的三种基本方法，这里来说一下如何下载并使用官方定义的状态管理器(Vuex)一.安装安装方法有很多，这里不过多说明，在项目文件夹中进入命令行工具输入：npm install vuex二.配置在工程目录中的src文件夹中创建store文件夹，在该文件中创建一个index.js文件然后创建一个仓库，代码如下：import Vue from "vue" //因...
2019-01-15 23:35:20
2175
原创 Vue中组件之间传值的三种常用方法
在使用vue的过程中免不了要组件之间传值，那么这里就说一说传值的几种方法和怎么使用先来看一张图引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：一.父组件向子组件传值来，先上代码父组件:<template> <div> 父组件: &...
2019-01-15 23:15:26
6293
原创 Vue中计算属性computed的运用及理解
Vue中计算属性computed的运用及理解一.什么是计算属性： 1.基本格式 2.注意事项二.运用示例 1.得出结果及总结三.计算属性的特性 1.缓存机制 2.监听属性
2019-01-10 13:27:21
1226
原创 如何使用Vue-cli搭建一个工程目录
一： 包管理工具 npm 使用npm 直接去安装一个nodeJS(自带npm)二：安装 webpack (前端自动化构建工具) npm install webpack -g三：安装vue-cli npm install --global vue-cli四：构建项目目录： vue init webpack 项目名称五：项目相关依赖包下载 npm install yarn六：启动项目 npm run dev
2019-01-09 23:08:10
455
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人