xxxpjgl的博客_vue_51CTO博客

鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程厂商认证 IT技术 24年11月软考 PMP项目管理免费题库

在线学习

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

51CTO博客

首页
关注
排行榜
精品课程
免费直播
软考题库

科目全、试题精、讲解专业，扫码免费刷

搜索历史清空

热门搜索

查看【】的结果
写文章
创作中心
登录注册

# vue

axios get和post方法

axios get和post方法

axios的传参有两种方式：一种是params一种是data而params会默认把要传的参数添加到url后面data是附在请求体中

ios

原创 2022-07-01 10:59:45 523 阅读

Vue全局路由守卫

全局路由守卫：to : 即将要进入的目标路由对象from : 当前导航正要离开的路由next : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数（是否接着往下执行，若不写next（），则页面不会往下执行，必写）。//router/index.js路由文件//语法：router.beforeEach((to, from, next) => {

用户信息

登录页面

获取用户信息

原创 2022-03-07 13:26:53 1089 阅读

Vue作用域插槽

作用域插槽---乍听起来，是一个很抽象的概念。看了几遍官方文档，有了一些粗浅的认识，觉得这个名字取得还挺恰当的，因为它在一定范围内，延伸了子组件的作用域。组件有编译作用域---父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在子作用域中编译的。看看官方的例子---定义一个子组件，有个具名插槽son，并且通过属性绑定子组件的数据user。const sonCom = {

作用域

插槽

数据

原创 2022-03-07 09:33:08 551 阅读

Vue mixins的使用方法

mixins概念：混入 (mixins)：提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项，data、components、methods 、created、computed等等。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当组件使用了mixins时, mixins中的生命周期函数会先执行,然后在执行组件中的生命周

mixins

转载 2022-03-01 17:20:22 205 阅读

el-input二次封装

需求：页面上有很多el-input，都有不同的作用和功能，封装会使代码简洁易懂子组件：/** * 查询条件子组件 */<template> <div class="formSearch"> <div class="table-header" v-if="tableSearch && tableSearch.length >

el-input

封装

转载 2022-03-01 11:09:41 3738 阅读

Vue总结

1、双向数据绑定//模拟双向数据绑定const d1 = document.getElementById('d1');const d2 = document.getElementById('d2');const obj = {}Object.defineProperty(obj,'msg',{ //表示的意思是，监听obj对象下面的msg属性，一旦msg发生了变化，set方法就会被执行，里面的代

数据绑定

set方法

html

原创 2022-02-18 11:44:02 138 阅读

vue 组件数据穿透 $props、$attrs和$listeners

$props：当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。$attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的

作用域

官网

事件监听器

原创 2022-01-19 18:36:52 2903 阅读 1收藏

vue.js项目中在axios响应拦截器中跳转登录页面

首页和后端约定好错误码。约定错误码后，写好提示提示框信息重点原来我用this.$router.push(’/’)来进行跳转首页的但是发现路由好像是空的然后我又动态加载路由。。发现还是不行，最后简单点，直接跳转，没想到成了/** * http配置 */import axios from 'axios'// 这里自己获取tokenlet token = localStorage.getItem('fi

ios

拦截器

错误码

提示框

动态加载

原创 2021-11-26 10:08:11 3117 阅读

vue中$router和$route的区别

$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vu构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性。以history对象来举例： $router.push({path:'home'})，本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录

键值对

构造函数

历史记录

绝对路径

数组

原创 2021-11-17 17:59:42 386 阅读 1收藏

Vue3.0 vue.config.js文件配置

module.exports = { // publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/', //基本路径 publicPath: './',//默认的'/'是绝对路径，如果不确定在根路径，改成

css

刷新页面

热更新

生产环境

实时预览

原创 2021-11-12 11:27:24 1247 阅读

动态增加select框(elementUI 框架)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>演示动态增加select框(elementUI 框架)</title> <script src="https://cdn.jsdelivr.net

element

转载 2021-07-01 11:15:01 1880 阅读

computed和methods

返回的字段为数字，需要转为对应的状态值，可以使用computed或者methods定义方法举个栗子：<el-table-columnlabel="报警点位（二次码）"prop="twoCode"show-overflow-tooltipalign="left"min-width="10%"><templateslot-scope="scope"><div>{{s

computed

原创 2021-03-03 11:13:16 649 阅读

Vue之Axios跨域问题解决方案

//axios中的GET请求axios.get('/user',{params:{ID:‘001’}}).then(function(response){console.log(response);}).catch(function(error){console.log(error);});//axios中的POST请求axios.post('/user',{firstName:'1',lastN

axios

跨域

原创 2020-03-10 17:49:01 5741 阅读

vue+element 中 el-input框限制只能输入数字及几位小数(自定义)和输入框之键盘

<el-table-columnalign="right"width="87px"><templateslot="header"slot-scope="scope"><spanclass="sort-table-header">下布转数</span></template><templateslot-

vue

原创精选 2020-03-05 18:02:49 10000+阅读

nuxt.js配置BASE_URL（基本域名）和NODE_ENV（环境变量）

一直以来，开发环境和生产环境的数据接口域名不一样总是困扰着我每次打测试包或者线上包，我都得手动切换域名，我相信很多人的做法跟这差不多，类似下面这样：（你已经注意到，这个文件已经被我无情的删除了，因为我发现了属于我自己的新大陆）每次打包都要切换注释，虽然也能接受，但是容易忘记或者出错，或者找这个配置文件都要找半天，对于我这种反应迟钝、头脑经常性短路的人来说实在太痛苦了，有痛点，那就要寻求解决方法：第

BASE_URL

NODE_ENV

转载 2019-11-28 15:41:24 3884 阅读

vue.use和vue.prototype.$xxx的区别

Vue.prototype.$http=axios;和Vue.prototype.axios=axios的区别一个this.$http.post(url,)另一个this.axios.post(url,)1.vue.use先看一下vue中文文档是怎么讲解这个属性的官方文档说的是，通过vue.use引入的插件，可以理解为自己定义的方法或者引入的Eelmentui组件,可能很多人不理解Elementu

use

原创 2019-10-30 14:07:40 8590 阅读

vue中使用axios给生产环境和开发环境配置不同的baseUrl

第一步：设置不同的接口地址找到文件：/config/prod.env.js【生产环境—正式环境】代码修改为：module.exports={NODE_ENV:'"production"',API_ROOT:'"//www.baidu.com/api"'}找到文件：/config/dev.env.js【开发环境—测试环境】代码修

baseUrl

原创 2019-10-30 11:47:38 8313 阅读

Cannot read property 'sassOptions' of undefined

npm设置和查看仓库源在使用npm命令时，如果直接从国外的仓库下载依赖，下载速度很慢，甚至会下载不下来，我们可以更换npm的仓库源，提高下载速度。此处以淘宝镜像为例，如果公司有本地仓库，将地址修改为公司仓库地址即可。可以通过以下方式进行修改：临时使用//本次从淘宝仓库源下载npm--registry=https://registry.npm.taobao.orginstall使用cnpm命令代替n

nuxt

原创 2019-10-23 13:43:23 4130 阅读

nuxt.js踩坑记录

一、今天安装nuxt，然后安装ElementUi的时候，老是报错：HTMLElementisnotdefined经过谷歌发现：ElementUi版本应该小于2.8.2.，于是指定安装ElementUi版本为2.0.11即可。天坑！PS：还是谷歌好使，百度不行！

nuxt.js

原创 2019-05-08 16:02:29 1643 阅读

nuxt.js笔记

一、Nuxt常用配置项1、配置IP和端口：开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1，端口设置1818//package.json"config":{"nuxt":{"host":"127.0.0.1","port":"1818"}},配置好后，我们在终端中输入npmrundev

nuxt

笔记

原创 2019-04-16 09:14:57 7516 阅读

vue使用mock.js模拟数据

一、安装1、安装mockaxiosnpminstallmockjsaxios--save2、安装axios-mock-adapteraxios-mock-adapter是axios与mock配置器，简单来说就是把二者结合在一起的工具npminstallaxios-mock-adapter--save-dev二、使用mock1、在src目录下，创建mock文件夹，在下面再创建data文件夹，创建数据

mock

模拟数据

原创 2019-03-01 10:53:22 1945 阅读 1点赞

Element-UI使用笔记

一、安装好vue-cli脚手架之后1、安装Element-UI：npmielement-ui-S2、项目中main.js文件中引用importElementUIfrom'element-ui'import'element-ui/lib/theme-default/index.css'3、注册使用：Vue.use(ElementUI)

vue

使用指南

原创 2019-02-27 20:42:09 5641 阅读

slot内容分发的使用

一、定义了一个组件custom，该组件本身已经具备template模板了，直接调用<custom></custom>即可渲染模板<divid="app"><custom></custom></div><script>Vue.component('custom',{template:`<divclass="cu

slot

使用

原创 2019-02-27 18:41:45 887 阅读

Vuex教程

一、1、Vuex是什么专为Vue.js应用程序开发的状态管理模式采用集中式存储管理应用的所有组件的状态以相应的规则保证状态以一种可预测的方式发生变化2、状态组件内部状态：仅在一个组件内使用的状态(data字段)应用级别状态：多个组件共用的状态3、什么情况下使用Vuex多个视图依赖同一状态来自不同视图的行为需要变更同一状态

vuex

教程

原创 2019-02-17 16:23:09 4477 阅读

axios教程

一、简介1、axios是基于Promise，用于浏览器(script标签引入)和nodejs的，与服务端进行通信的库2、特征：支持PromiseAPI拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据3、使用CDN地址：https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.jsnodenpminstallaxios--save-dev

axios

vue

原创 2018-12-17 20:34:56 8333 阅读

Vue踩坑记录及工作记录

1、使用this.$emit子组件向父组件传递事件以及携带数据在标签内调用methods:{}中的方法时候是不能够加()的，一定是直接写方法名称即可,否则传递的参数数据无效。<listv-show="listShow":listData="listData"@titleHandle="showTitle"></list>这里的titleHandle是监听子组件传递过来的事件

vue

踩坑记录

原创 2018-12-16 15:09:55 959 阅读

vue-router教程

一、文件目录说明main.js：应用的入口文件App.vue：根组件，整个组件的入口加载文件不要后缀名：resolve:{extensions:['.js','.vue','.json'],alias:{'vue$':'vue/dist/vue.esm.js','@':resolve('src&

vue

vue-cli

原创 2018-12-06 12:21:04 10000+阅读

vue组件及通信

1、Modal组件使用在App.vue组件的模板中，那么Modal.vue是子组件，App.vue是父组件父组件可以多次重复使用子组件父组件->子组件，传递数据用props组件是通用的，业务逻辑写在子组件里，父组件只管调用和传值

vue

通信

原创 2018-12-03 20:39:20 724 阅读

vuex的state,mapState,...mapState对象展开符详解

1.statestate是什么?定义:state(vuex)≈data(vue)vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新.虽然state和data有很多相似之处,但state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改

mapState

vuex

转载 2018-11-27 12:42:39 7245 阅读

vue中created钩子函数与mounted钩子函数的使用区别

1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。首先来看下官方解释，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测(dataobserver)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。这话的意思我觉得重点在于

created

mounted

转载 2018-11-27 11:44:18 10000+阅读

首页
1
2
共34条记录