尘生杜若

Vue中计算属性computed的运用及理解一.什么是计算属性： 1.基本格式 2.注意事项二.运用示例 1.得出结果及总结三.计算属性的特性 1.缓存机制 2.监听属性

在vue中当我们要实现点击元素动态添加类名时，我们不能像JQ那样去用（xxx.addClass(‘class’).siblings().removeClass(‘class’)）实现，那我们应该怎样去做呢解决方案：1.在data里面申明一个属性，默认值最好为数字类型，并且不得大于当前元素+所有兄弟元素的length，可以默认为0（第一个元素选中）2.在当前元素中添加动态class： “:cl...

废话不多说，直接进入正题一.通常在开发环境下请求后台接口会用到反向代理，而在生产环境中反向代理是不生效的，那么为了避免部署在服务器上时需要一个一个更改接口地址这种麻烦费时的操作，更改配置文件去自动切换接口地址。开发环境：在config文件夹下的dev.env.js中 添加这样一行代码'use strict'const merge = require('webpack-merge')c...

前言：在实际的项目中，面对大量的使用axios请求数据，会使项目代码又多又乱，封装接口API与Axios的重要性不言而喻，不仅可以使代码更加的简洁优雅，而且会使修改接口，维护代码变得更加简单清晰。一.Axios的封装在vue项目中我们使用的是axios进行数据请求，还可以利用它进行请求拦截，响应拦截等操作1. 安装npm install axios; // 安装axios2. 配置在...

在开发项目时请求数据经常会遇到跨域问题，还好使用vue配置反向代理还是很简单好用的，但是在项目要进行打包上线时会遇到一个问题，反向代理只适用于开发环境下，生产环境是不支持的，也就是说如果不对接口进行处理的话是会报错的，那么我们应该如何解决这个问题呢？一.config文件夹下dev.env.js中开发环境下使用了反向代理解决跨域问题module.exports = merge(prodEnv,...

一.添加内容在vue工程目录build文件夹下webpack.dev.conf.js与webpack.prod.conf.js文件中的html-webpack-plugin添加一条favicon:'favicon文件的相对路径’例如：new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.ht...

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...

1：获取电脑网络ip地址**（注意：手机端与电脑端需在同一无线局域网下，可电脑连接手机热点）**命令行输入：ipconfig回车后获取到ip地址：如图中的IPv4地址:172.20.10.32：将获取到的地址替换项目中的http：localhost：8080地址具体步骤：打开项目中的package.json文件，将红色部分代码段"scripts": { "dev": "web...

动态路由是什么?一般我们使用vue-router配置路由时，都是直接配置固定的路径而动态路由是我们可以在 vue-router 的路由路径中使用“动态路径参数”让路径不再是固定的。动态路由的使用场景是什么？比如在写一个商品详情页面的时候，我们的页面结构都一样，只是渲染的数据不同而已，这时候就可以根据商品的不同id去设置动态路由，只需要写一个组件，就可以把每个商品的商品详情映射到同一个组件...

首先百度地图的API http://api.map.baidu.com/api?v=2.0&ak=个人密钥那么我们先要申请密钥点击 百度地图开放平台进入 登录个人的百度账号后网页最下方，点击申请密钥会看到这个界面应用类型选择浏览器端，小程序的话就选微信小程序根据下方提示设置白名单后，点击提交。完成后可以在查看应用中查看注意：个人密钥妥善保管！！好了，准备完成，我们正式开...

之前用Vue+element写了一个后台管理系统，在登录时使用axios请求数据传参时无法正常的获取数据。之后也是一通百度，发现原因是传递参数要将参数序列化。这里使用了qs插件：简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。在项目中使用命令行工具输入：npm install qs安装完成后在需要用到的组件中：import qs from 'qs’具体使用中我查...

axios基于promise用于浏览器和node.js的http客户端特点支持浏览器和node.js支持promise能拦截请求和响应能转换请求和响应数据能取消请求自动转换JSON数据浏览器端支持防止CSRF(跨站请求伪造)原文地址第一步：安装在要使用的项目中使用cmd进入命令行工具，输入下面指令：$ npm install axios第二步：配置（全局）在项目m...

上一篇总结了一下组件之间传值的三种基本方法，这里来说一下如何下载并使用官方定义的状态管理器(Vuex)一.安装安装方法有很多，这里不过多说明，在项目文件夹中进入命令行工具输入：npm install vuex二.配置在工程目录中的src文件夹中创建store文件夹，在该文件中创建一个index.js文件然后创建一个仓库，代码如下：import Vue from "vue" //因...

在使用vue的过程中免不了要组件之间传值，那么这里就说一说传值的几种方法和怎么使用先来看一张图引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：一.父组件向子组件传值来，先上代码父组件:<template> <div> 父组件: &...

一： 包管理工具 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

上一篇说到了动态路由，这一篇说一下嵌套路由的使用。那么我们来看一下官方的一个图从上图就可以看出在同一个视图中，User不变的情况下Profile和posts的转换了，那么这就说明了这两者都是User中的嵌套路由，也可以叫子路由。另外作用也呼之欲出。嵌套路由可以在整体视图不变的情况下部分内容的变化。下面还是以我写的一个后台管理系统作为案例先来看一下效果图这里看到了在固定的一个位置商品...

在Vue中构建工程目录时，会有对话提示是否安装router，这里就不再多说，直接开始说一说vue中路由跳转的几种方法。使用之前需要在工程目录router文件夹中index.js文件中引入及配置路径。例如：一.router-link<router-link :to='/City'> //需要跳转到的页面的路径这是在视图层内标签形式的跳转方式，浏览器会将router-link...

事件处理在原生DOM绑定事件的年代，我们经常会使用到e.preventDefault() 或 e.stopPropagation()等操作。而在vue中为了简化这种常见需求，为v-on提供了一个叫Event Modifiers (事件修饰符)的语法糖。.stop 等同于JavaScript中的event.stopPropagation()，阻止事件冒泡.prevent 等同于JavaSc...