![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
VUE
VUE
小码哥呀
这个作者很懒,什么都没留下…
展开
-
vue传参------params和data的区别
在Vue中使用axios时,注意到配置选项中包含params和data两者,以为他们是相同的,其实他们之间的差别还是挺大的。因为params是添加到url的请求字符串中的,用于get请求。而data是添加到请求体(body)中的, 用于post请求。1、使用data传参前端请求方式为postimport request from '@/utils/request'// 新增bannerexport function saveBanner(data){ return request({原创 2022-04-18 15:26:08 · 5587 阅读 · 0 评论 -
vue项目开发--网页小图标修改、封装导航栏
1、网页小图标修改<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <lin原创 2022-03-28 10:49:15 · 1609 阅读 · 0 评论 -
vue项目开发---做一些开发前的配置
vue项目开发1、划分目录结构2、引入公共的css3、项目结构中文件夹别名的配置4、editorconfig代码规范配置---1、划分目录结构2、引入公共的cssnormalize.css的github地址Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。base.css3、项目结构中文件夹别名的配置module.exports = { configurewebpack: { resolve: { alias原创 2022-03-27 23:01:17 · 1384 阅读 · 0 评论 -
vue项目开发---初始化项目以及使用gitee托管
1、使用CLI3创建项目vue create 项目名称上图提示目前系统安装脚手架版本是2.9.6。所以需要先卸载老版本脚手架,再安装对应新版本脚手架。//卸载脚手架npm uninstall -g @vue/cli//安装指定版本脚手架npm install -g @vue/cli@3.2.1如果安装过程中遇到如下错误:只用找到本地用户的目录C:\用户\Lenoev下 找到一个.vuerc 的文件删掉就OK了2、将本地项目与远程仓库建立一个链接2.1、以下操作前提是在git原创 2022-03-27 20:53:17 · 945 阅读 · 0 评论 -
vue中axios的使用
vue中axios的使用1、选择什么网络模块2、JSONP3、axios的请求方式4、axios框架的基本使用5、axios发送并发请求6、axios的配置6.1、全局配置6.2、常见的配置选项1、选择什么网络模块2、JSONP3、axios的请求方式网络请求模拟:http://httpbin.org/4、axios框架的基本使用1、新建vue项目vue init webpack learnaxios2、安装axios依赖npm install axiox@0.18.0 --sa原创 2022-03-14 21:53:44 · 12694 阅读 · 1 评论 -
navigator对象和hisrtory对象
1、navigator对象2、hisrtory对象点击前进到达列表页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init原创 2022-01-06 16:15:31 · 74 阅读 · 0 评论 -
JS执行机制
1、JS执行机制1.1JS单线程4.2、同步和异步4.4、js执行机制执行顺序:原创 2022-01-06 15:12:26 · 65 阅读 · 0 评论 -
Location对象
1、什么是Location对象2、URL3、Location对象属性4、案例1点击按钮,页面跳转到相应页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi原创 2022-01-06 16:01:00 · 74 阅读 · 0 评论 -
Vuex的几个核心概念state、getters、mutations、actions、modules
Vuex的几个核心概念1、state单一状态树/单一数据源2、vuex-getters的详解使用2.1、getters的基本使用2.2、getters作为参数个传递参数2.3、上述代码案例如下所示1、state单一状态树/单一数据源所有共享的状态全部放到一个store中2、vuex-getters的详解使用2.1、getters的基本使用2.2、getters作为参数个传递参数2.3、上述代码案例如下所示src/store/index.jsimport Vue from 'vue原创 2022-03-11 19:14:51 · 1345 阅读 · 0 评论 -
Vuex的基本介绍、状态管理、单界面的状态管理、多状态管理及使用案例
VVuex的基本介绍、状态管理、单界面的状态管理、多状态管理及使用案例1、VueX是做什么的?2、用VueX来管理什么状态?3、单界面的状态管理4、多页面状态管理5、多页状态管理案例1、VueX是做什么的?管理所有组件的状态2、用VueX来管理什么状态?用户登录状态3、单界面的状态管理<template> <div id="app"> <h2>{{message}}</h2> <h2>{{counter}}</h原创 2022-03-10 19:21:01 · 1154 阅读 · 0 评论 -
Chrome浏览器安装Vue.js devtools插件
1、浏览器访问极简插件https://chrome.zzzmh.cn/#/index2、右上角搜索框搜索vue DevTools插件下载插件3、在本地文件夹中解压刚刚下载的插件,解压后如下所示4、打开谷歌浏览器–更多工具–拓展程序5、将解压的文件夹拉到4中拓展程序页面6、安装成功使用chrome浏览器访问vue文件,我们发现可以使用vueDevTools调试工具进行调试。...原创 2022-03-10 18:47:12 · 7253 阅读 · 0 评论 -
promise
1、什么是promise?2、网络请求的回调地狱3、Promise的基本使用<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" c原创 2022-03-10 13:16:33 · 85 阅读 · 0 评论 -
vue中给路径起别名
1、在webpack.base.conf.js配置文件中给路径起别名2、在vue文件中使用别名2.1、在import中使用@2.2、在dom中使用别名(~)3、修改了vue的配置文件,要重新npm run dev正常访问原创 2022-03-08 19:40:11 · 2135 阅读 · 0 评论 -
keep-alive(保证组件不被销毁)和activated、deactivated函数
1、keep-alive保证组件不被销毁,具有缓存功能keep-alive作用是当我们离开某个组件时,不要销毁组件,不要频繁的创建组件。保持组件是活着的状态。只有当使用了keep-alive时,才能使用activated、deactivated函数。2、activated、deactivated函数在使用了keep-alive时才起作用3、通过使用组件内的“导航守卫”在首页中使用path属性记录离开时的路径在组件内部使用导航守卫4、keep-alive两个属性的使用表示Profi.原创 2022-02-23 16:32:58 · 1567 阅读 · 0 评论 -
导航守卫介绍
1、为什么使用导航守卫导航守卫2、导航守卫的使用3、导航守卫原创 2022-02-23 15:37:45 · 248 阅读 · 0 评论 -
路由的打包文件夹解析、懒加载、嵌套
路由的打包文件夹解析、懒加载、嵌套1、打包文件夹解析2、路由的懒加载2.1、认识路由懒加载2.2、路由懒加载效果2.3、路由懒加载实现方式3、嵌套路由(路由中嵌套子路由)4、vue-router参数传递1、打包文件夹解析2、路由的懒加载2.1、认识路由懒加载2.2、路由懒加载效果2.3、路由懒加载实现方式代码:打包后效果:3、嵌套路由(路由中嵌套子路由)1、首先创建两个子组件HomeNews.vueHomeMessage.vue2、在index.js中配置路由映射原创 2022-02-23 11:34:10 · 550 阅读 · 0 评论 -
vue-router
vue-router1、认识vue-router2、安装和使用vue-router2.1、安装2.2、配置2.3、使用2.3.1、创建路由组件2.3.2、配置路由映射-组件和映射的路由关系2.3.3、使用路由2.3.4、最终效果3、设置路由的默认值4、将地址栏默认的hash模式改为history模式,即地址栏中没有#5、router-link的属性补充5.1、tag1、认识vue-router2、安装和使用vue-router2.1、安装//配置路由相关信息import VueRouter原创 2022-02-21 18:08:10 · 208 阅读 · 0 评论 -
如何改变了浏览器的url,但是不让页面刷新。url形式和HTML5的history模式
1、url形式1.1、URL的hash即location.hash=’/foo’2、HTML5的history模式2.1、history.pushState({}, ’ ’ , ‘/’)相当于一个栈。浏览器会对历史记录做保存,可以返回。2.2、replaceState({}, ’ ', ‘/’)浏览器不会对历史记录做保存,不能够再返回上一个页面。2.3、history.go()history.go(-1)向后一步。等价于history.back()history.go(1)向前一步原创 2022-02-21 16:36:10 · 379 阅读 · 0 评论 -
路由发展阶段
1、什么是路由?2、后端路由2.1、概念2.2、后端路由阶段2.3、前后端分离阶段原创 2022-02-21 16:05:31 · 243 阅读 · 0 评论 -
VueCLI3创建项目
1、认识VueCLI32、VueCLI3创建项目配置步骤参考1、项目名称# vue create 项目名称vue create testvuecli32、选择模板3、键盘上下移动到要使用的选项上,点击空格即可选中。Linter/Formatter是选择eslint语法规范,此处不使用的话可以取消。4、选择VueCLI版本5、选择配置文件存放位置6、选择是否要保存模板7、将上述配置过程的信息进行保存,供下次使用8、配置完成,等待下载依赖...原创 2022-02-18 17:54:00 · 1207 阅读 · 0 评论 -
Runtime-Compiler和Runtime-only的区别
1、Runtime-Compiler和Runtime-only的区别2、render和template3、vue运行过程4、render函数的使用5、npm run build启动步骤6、npm run dev启动步骤6、修改webpack配置–webpack.base.conf.js起别名原创 2022-02-18 16:17:02 · 225 阅读 · 0 评论 -
关闭项目中的eslint规范
在index.js中奖true值改为false,然后重新启动项目。原创 2022-02-18 14:34:42 · 152 阅读 · 0 评论 -
Vue CLI2脚手架安装与介绍
Vue CLI脚手架安装与介绍1、什么是VueCLI2、Vue CLI使用前提2.1、Vue CLI使用前提-安装Node2.2 、Vue CLI使用前提-安装Webpack3、VueCLI的使用3.1、安装Vue CLI4、VueCLI2初始化项目过程4.1、初始化项目4.2、项目目录详解1、什么是VueCLI脚手架官方参考文档2、Vue CLI使用前提2.1、Vue CLI使用前提-安装Node2.2 、Vue CLI使用前提-安装Webpack3、VueCLI的使用3.1、安装Vu原创 2022-02-18 11:35:48 · 316 阅读 · 0 评论 -
plugin(插件)
plugin(插件)1、认识plugin(插件)2、添加版权信息的plugin2.1、配置2.2、查看编译后的bundle.js文件3、打包html的plugin(插件)1、认识plugin(插件)对现有的框架进行扩充的框架称为plugin(插件)2、添加版权信息的plugin2.1、配置2.2、查看编译后的bundle.js文件3、打包html的plugin(插件)...原创 2022-02-15 19:43:39 · 6807 阅读 · 0 评论 -
.vue文件封装处理
1、.vue文件封装处理2、首先安装vue-loader和vue-template-compiler的loader安装时注意版本号3、将原来main.js中的代码抽取到组件App.vue中4、App.vue<template> <div> <h2 class="title">{{message}}</h2> <button @click="btnClick()">按钮</button> <原创 2022-02-15 17:02:27 · 408 阅读 · 0 评论 -
创建vue时template和el的关系
如果页面中同时有el和template,则template会将el替换掉页面展示的是template中的内容原创 2022-02-15 15:07:12 · 232 阅读 · 0 评论 -
webpack环境集成vue
–save表示运行时依赖 --save-dev表示开发时依赖项目结构1、项目中安装vue–save表示运行时依赖安装成功2、配置3、main.js中编写代码使用vue4、html中引用5、页面访问原创 2022-02-15 14:51:48 · 210 阅读 · 0 评论 -
webpack ES6转ES5的babel配置
webpack ES6转ES5的babel的配置1、ES6语法处理1.1、安装loadercnpm install --save-dev babel-loader@7 babel-core babel-preset-es20151.2、配置{ test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader',原创 2022-02-15 14:08:55 · 526 阅读 · 0 评论 -
webpack 图片文件处理:url-loader和file-loader
1、webpack 图片文件处理1.1、图片文件处理方式一:url-loader1.2、图片文件处理方式2:file-loader1.3、图片文件处理-修改文件名称2、安装loader安装图片文件处理loader的参考文档npm install --save-dev url-loader@1.1.23、配置{ test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options:原创 2022-02-15 13:45:51 · 1099 阅读 · 0 评论 -
在项目中安装、使用less-loader、less用于处理less格式文件
在项目中安装、使用less-loader、less用于处理less格式文件1、安装配置2、配置3、案例:使用less-loader和less在项目中安装less-loader,用于加载less文件webpack中文网安装less-loader参考1、安装配置版本号与项目中webpack版本要对应,不然安装不成功如果安装过程中,出错先使用以下命令:出错参考npm i --legacy-peer-deps使用命令安装less-loader和less:npm install --save-de原创 2022-02-15 10:53:29 · 7905 阅读 · 0 评论 -
什么是loader、项目中安装loader、使用loader管理css格式文件
1、什么是loader?1.1、css文件处理-准备工作1.2、css文件处理:css-loader1.3、css文件处理:style-loader1.4、在项目中安装样式的loaderwebpack中文网站样式的loader参考原创 2022-02-14 18:27:12 · 511 阅读 · 0 评论 -
webpack的介绍、安装、使用、配置
webpack的介绍、安装、使用、配置1、什么是webpack?2、前端模块化3、打包4、webpack和grunt/gulp对比5、webpack/node/npm三者之间的关系6、webpack的安装7、webpack的使用(案例)7.1、CommonJS规范结合webpack完成模块开发7.2、ES6规范结合webpack完成模块开发8、webpack配置8.1、出口和入口的配置8.2、局部安装webpack8.3、package.json中自定义启动命令1、什么是webpack?将css、js、原创 2022-02-14 17:40:55 · 237 阅读 · 0 评论 -
ES6模块化:export(导出)/import(导入)
1、ES6模块化:export(导出)/import(导入)1.1、export(导出)基本使用直接导出以对象形式导出导出函数导出类export defaultaaa.js导出// 1、以对象形式导出let name = 'youyuxi'let age = 18let height= 1.88export {name,age,height}// 2、直接导出export let name1='youyuxi'export let age1=19export原创 2022-02-14 14:19:19 · 1353 阅读 · 0 评论 -
模块化以及模块化规范CommonJS
使用模块作为出口:CommonJS如何使用模块化(了解)CommonJS依赖于node环境原创 2022-02-14 14:18:43 · 85 阅读 · 0 评论 -
插槽slot
1、为什么使用插槽组件的插槽是为了让组件更具有扩展性2、如何封装这类组件3、插槽的基本使用<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa原创 2022-02-13 13:32:43 · 216 阅读 · 0 评论 -
父子组件访问
1、父组件访问子组件父组件拿子组件的数据。例如项目中用户进行了信息注册,信息注册页面一般是一个表单,在子组件中,这是用户点击保存后,父组件要调用子组件,获取数据保存到数据库中。推荐使用$refs$children<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt原创 2022-02-11 17:52:43 · 111 阅读 · 0 评论 -
父子组件通信
1、父组件向子组件通信<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t.原创 2022-02-10 17:13:39 · 338 阅读 · 0 评论 -
vue组件化
vue组件化1、什么是组件化?2、vue的组件化思想3、注册组件的基本步骤4、注册组件步骤解析5、全局组件与局部组件5.1、全局组件5.2、局部组件6、父组件与子组件6.1、父子组件的写法6.2、父子组件的错误用法6.3、注册组件的语法糖写法7、组件模板抽离的两种写法1、什么是组件化?2、vue的组件化思想3、注册组件的基本步骤<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="原创 2022-02-10 11:46:23 · 695 阅读 · 1 评论 -
v-model的使用
v-model的使用1、v-model基本使用2、三种方式实现双向绑定3、v-model原理4、v-model结合radio类型使用5、v-model结合checkbox类型5.1、单个复选按钮5.2、多个复选按钮6、v-model:select7、input中的值绑定8、v-model中的修饰符lazzy/number/trim1、v-model基本使用2、三种方式实现双向绑定<!DOCTYPE html><html lang="zh-CN"><head>原创 2022-02-09 12:31:49 · 6781 阅读 · 0 评论 -
JavaScript高阶函数的使用filter/map/reduce/箭头函数
1、JavaScript高阶函数的使用filter/map/reduce/箭头函数//JavaScript高阶函数的使用// filter/map/reduce const nums = [20,30,60,80,100,120,]// 1、filter的使用,按照规则过滤出元素// filter中的回调函数有一个要求:必须返回一个boolean值// true: 当返回true时,函数内部会自动将这次回调的n加入到新的数组中// false:当返回false时,函数内部都会过滤掉这次的原创 2022-02-08 19:56:12 · 624 阅读 · 0 评论