![](https://img-blog.csdnimg.cn/2019112914562143.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue知识点分享
陈善强
前端技术分享,共同进步
展开
-
el-checkbox复选框,单次点击选中框,取消失败
页面初次渲染,回显复选框,并且可取消/选中。原创 2023-07-05 11:42:34 · 924 阅读 · 1 评论 -
多个el-checkbox-group复选框组 选项互斥
【代码】多个el-checkbox-group复选框组 选项互斥。原创 2023-06-30 17:09:06 · 2540 阅读 · 0 评论 -
Vue history路由模式 apache配置上线(亲测可用)
vue的路由默认是hash模式,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑,所以history模式也会有一些应用场景,新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息。原创 2022-10-10 12:16:34 · 936 阅读 · 0 评论 -
Error: args must be an array of arguments
vue项目运行时出现Error: args must be an array of arguments报错原创 2021-11-29 16:54:01 · 1175 阅读 · 0 评论 -
Failed to load resource: the server responded with a status of 404 (Not Found) [object%20Module]
在vue项目中,通过webpack的reslove配置路径别名,出现图片加载失败问题。webpack配置静态资源目录路径别名module.exports={ ..., //配置省略文件路径的后缀名 resolve: { // 使用的扩展名 alias: { '@static': resolve('static') } }}图片引用<div> <img src="~@static/images/error..原创 2021-07-12 12:18:40 · 1128 阅读 · 0 评论 -
app.vue里引用了header和footer,然后某些页面,不想有header组件如何处理
解决方案目前有这样两种:思路1就是做条件渲染,因为判断会多次执行所以使用v-show。思路2不如前者,因为在mounted之后再隐藏,或许会有视觉抖动...原创 2020-03-15 21:17:13 · 2557 阅读 · 2 评论 -
Element-UI 的基本使用
Element-UI:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。基于命令行方式手动安装安装依赖包 npm i element-ui –S导入 Element-UI 相关资源在入口文件main.js中,写入如下代码: // 导入组件库 import ElementUI from 'element-ui'; // 导入组件相关样式 i...转载 2020-01-13 23:07:13 · 165 阅读 · 0 评论 -
Element-UI 的基本使用
Element-UI:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。官网地址为: http://element-cn.eleme.io/#/zh-CN1、基于命令行方式手动安装安装依赖包 npm i element-ui –S导入 Element-UI 相关资源 // 导入组件库 import ElementUI from 'element-ui...原创 2020-01-10 22:49:11 · 527 阅读 · 0 评论 -
Vuex的核心概念
1. StateState 提供唯一的公共数据源,所有共享的数据都要统一放到 Store 的 State 中进行存储。创建store数据源,提供唯一公共数据const store = new Vuex.Store({ state: { count: 0 } })1.1 组件访问 State 中数据的第一种方式:this.$store.state.全局数据名称1.2 组件访...原创 2019-12-25 22:42:04 · 212 阅读 · 0 评论 -
在开发Vue项目时,页面加载时出现闪烁问题
使用v-cloak指令防止页面加载时出现闪烁问题<style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */ [v-cloak]{ /* 元素隐藏 */ display: none; }</style><body> <div id=...原创 2019-12-08 23:00:07 · 688 阅读 · 0 评论 -
对于MVVM概念的解读
根据vue解读mvvm概念MVC 是后端的分层开发概念; MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModelm-model数据层 Vue 中 数据层 都放在 data 里面v-view 视图Vue 中 view 即 我们的HTML页面vm...原创 2019-12-08 22:50:41 · 216 阅读 · 0 评论 -
Vue作用域插槽
应用场景:父组件对子组件的内容进行加工处理1. 插槽定义 <ul> <li v-for = "item in list" v-bind:key = "item.id"> <slot v-bind:item = "item"> {{item.name}} </slot> </li> </ul...原创 2019-12-08 15:47:09 · 125 阅读 · 0 评论 -
Vue组件插槽的基本用法(匿名插槽)
组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力 1、插槽位置/* 组件插槽:父组件向子组件传递内容*/Vue.component('alert-box',{ template:` <div class="demo-alert-box"></div> <strong>Error!...原创 2019-12-08 15:15:06 · 429 阅读 · 0 评论 -
Vue具名插槽
具有名字的插槽使用 中的 “name” 属性绑定元素 <div id="app"> <base-layout> <!-- 2、 通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上 如果没有匹配到 则放到匿名的插槽中 --> <p slot='header'>标...原创 2019-12-08 15:24:16 · 170 阅读 · 0 评论 -
在Vue项目中处理ESlint语法报错问题的方法
在编译项目过程中,出现如下类似问题:从报错的结果看,书写的代码没有符合ESlint的代码规范。如何解决这类问题呢?1、创建.prettierrc配置文件在项目根目录中,创建.prettierrc文件,".prettierrc"文件是json格式的配置文件,该文件写入代码如下:{ "semi":false,//格式化去掉代码中的分号 "singleQu...原创 2019-12-04 22:36:49 · 1386 阅读 · 0 评论 -
基于3.x版本的脚手架创建vue项目
通过vue脚手架创建vue项目之前,必须首先安装vue脚手架安装3.x版本的Vue脚手架:npm install -g @vue/cli基于3.x版本的脚手架创建vue项目,有三种方式:基于 交互式命令行 的方式,创建 新版 vue 项目vue create my-project基于 图形化界面 的方式,创建 新版 vue 项目vue ui基于 2.x 的旧模板,创建...原创 2019-12-03 17:12:38 · 604 阅读 · 0 评论 -
Vue编程式导航
1、编程式导航基本用法常用的编程式导航 API 如下: this.$router.push('hash地址'); this.$router.go(n) const User = { template: '<div><button @click="goRegister">跳转到注册页面</button></div...原创 2019-11-29 21:56:26 · 690 阅读 · 0 评论 -
Vue命名路由
为了更加方便的表示路由的路径,可以给路由规则起一个别名,即为“命名路由”。<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>//声明式导航router.push({ name: 'user', params: { id: 123 }})//编程式导航//上面两种导航的...原创 2019-11-29 21:48:05 · 224 阅读 · 0 评论 -
Vue动态路由
1.、动态匹配路由的基本用法应用场景:通过动态路由参数的模式进行路由匹配var router = new VueRouter({ routers:[ //动态路径参数 以冒号开头 { path:'/path/:id' component:User } ]})const U...原创 2019-11-29 21:25:11 · 281 阅读 · 0 评论 -
Vue嵌套路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equi...原创 2019-11-29 20:58:53 · 212 阅读 · 0 评论 -
页面跳转的两种方式
1、声明式导航:含义:通过点击链接实现导航的方式,叫做声明式导航;普通网页中的<a></a>链接或vue中的<router-link></router-link>2、编程式导航:含义:通过调用JavaScript形式的 API实现导航的方式,叫做编程式导航;例如:普通网页中的location.href2.1、vue编程式导航...原创 2019-11-29 20:25:16 · 760 阅读 · 0 评论 -
axios拦截器
目录1、请求拦截器2、响应拦截器1、请求拦截器1.1 在请求出发之前设置一些信息格式: aixos.interceptors.request.use(function(config){ //在请求出发之前进行一些设置 return config; },function(err){ //处理响应的错...原创 2019-11-29 09:41:47 · 178 阅读 · 1 评论 -
axiox全局配置
1、配置请求头信息(前端) axios.defaults.timeout = 3000;//超时间 axios.defaults.baseURL = 'http://localhost:3000/';//配置请求的基准URL地址 axios.defaults.headers['mytoken'] = 'hello'; ...原创 2019-11-28 23:34:29 · 492 阅读 · 0 评论 -
Axios常用API
1、GET:查询数据 1.1、通过URL传递参数 //前端 axios.get('/path?id=123').then(function(ret){ //ret是对象 console.log(ret.data) }) //服务器 app.get('/path',(req,res)=...原创 2019-11-28 23:07:32 · 3139 阅读 · 0 评论