Vue
宁长风
白天coder,晚上reader
展开
-
elementui完美的下拉选择框+树结构
<el-form-item label="所在区县:" prop="areaName"> <el-select ref="selectRef" v-model="ruleForm.areaName" placeholder="请选择所在区县"> <el-option label="请选择" value="0" style="display: none"></el-option> <el-tree :data="tr...原创 2022-05-19 16:19:31 · 2531 阅读 · 0 评论 -
vue中的h函数是干什么的
官方例子:渲染函数 & JSX — Vue.jshttps://cn.vuejs.org/v2/guide/render-function.htmlh函数简单来说是生成虚拟DOM的,VNode。一、什么是虚拟DOM?我们要先了解浏览器的工作原理,以下面这段HTML为例:<div> <h1>My title</h1> Some text content <!-- TODO: Add tagline --> <原创 2021-09-21 17:19:32 · 593 阅读 · 0 评论 -
element饿了么按需引入npm i babel-plugin-component -D
npm i babel-plugin-component -D.babelrc{ "presets": [["@babel/preset-env", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]}babel原创 2021-06-23 16:06:44 · 438 阅读 · 0 评论 -
node-sass报错问题
设置淘宝镜像源:npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/再npm install node-sassnpm install -D babel-loader @babel/core @babel/preset-env webpackError: Rule can only have one resource source (provided resource and test + include原创 2021-06-23 15:49:40 · 111 阅读 · 0 评论 -
vue项目throw er; // Unhandled ‘error‘ event
也不知道怎么回事,突然项目就跑不起来了,试过好多种方式,先是删除依赖,重新下载,也尝试更新node版本。最后百度发现有个人说可能是端口号问题,随便改了一下,还真的可以了…原创 2021-03-01 14:18:25 · 278 阅读 · 0 评论 -
使用Ngrok内网穿透访问vue项目--出现Invalid Host header报错
之前用nginx代理,没有出现过错误。今天用vue的proxy代理,出现这个问题。后来发现,vue.config.js中module.exports = { devserver: { disableHostCheck: true, proxy: { ... } }}加一行disableHostCheck: true,瞬间OK,还是nginx方便~老铁们双击666啊,哦不,点赞收藏呀~~蟹蟹...原创 2021-01-06 09:59:57 · 1072 阅读 · 0 评论 -
快速获取elemntui,饿了么的日期选择器组件,时间的格式值××××-××-××
如果上图,想快速拿到:2021-01-04,2021-01-06两个值,但v-model只能拿到[Mon Jan 04 2021 00:00:00 GMT+0800 (中国标准时间) {},Wed Jan 06 2021 00:00:00 GMT+0800 (中国标准时间) {}]。用js转一下也得到想要的数据,但是太麻烦。一次偶然,给时间组件加了个ref,打印了一下:console.log(this.$ref.pickerRef)哈哈,不用转换了,直接就拿到值了,有没有很开心(▽).原创 2021-01-04 16:31:48 · 1226 阅读 · 7 评论 -
vue项目中使用axios,get方式传数组,格式发生改变,后端接收不到值
例如使用axios,get传let arr = { id: ['itemOne', 'itemTwo']}axios({ // 默认请求方式为get method: 'get', url: 'api', // 传递参数 params: { key: arr }, responseType: 'json' }).then(response => { // 请求成功 let res = response.data; console.log(res);原创 2020-12-24 16:29:21 · 960 阅读 · 2 评论 -
修改elementui的导航菜单样式,悬浮、聚焦、失焦,超方便
最近工作中用到饿了么中的导航菜单,原悬浮背景色不符合要求,且失焦后,无背景色,文档中居然没有给修改这些的接口。。。急得我要去改源码了,但是吧,,看了看源码我又放弃了,我觉得还不如自己重新写…这个问题放了两三天,今天又看了看,突然发现浏览器的一个小功能,以前居然都不知道。想要的其实就是原生写的hover,点击这里,就能在下面看到,把一长串的类名复制到页面,然后写样式就行了。导航菜单这里改背景色还有个更简单的方式,点击几次dom,发现饿了么是通过is-active这个类名去控制背景色的,所以直接用is-原创 2020-12-09 17:34:31 · 6527 阅读 · 4 评论 -
vue插槽在工作中的妙用~v-slot,作用域插槽
在父级的子组件标签内写内容,子组件用可以接收到内容,之前一直觉得插槽好像很鸡肋,今天终于发现了它的妙用。简单的基础这里不复述,可以直接看vue官网vue官网插槽文档最近做的项目,页面重复内容很多,所以需要封装,table表的操作栏有审核、删除、查看等多种操作,不同页面展示不同功能,以前的话,都是直接在封装的页面把所有的操作按钮都写出来,后面用的时候,用v-if根据条件判断是否展示。但是这么写,耦合性就比较大了,一旦改动,父子组件页面需要改动。而且需要在父子之间多次传值,挺麻烦:用作用域插槽就简单了很原创 2020-11-30 11:58:59 · 836 阅读 · 0 评论 -
简单易懂,终于搞明白怎么用nginx在vue开发环境中跨域了,详细
先说一下vue自己的proxy跨域,毕竟作为前端这个很简单,也更方便,vue-cli3.x中(vue-cli2.0版本在config文件夹index.js中设置,proxyTable,设置方法一样),在新建的vue.cofig.js里devServer: { open: true, port: 8081, proxy: { '/api': { // /api随便写的, /斜杠后面加任意的都可以,// 但是如果后端的接口地址后面有一个固定的标识符,比如后端的接口ip原创 2020-11-12 18:10:06 · 843 阅读 · 8 评论 -
vuex模块化管理,代码更简洁,易于大项目维护
// user.jsexport default { namespaced: true, // 这里要加,独立的命名空间,避免命名冲突 state: { stateNameOne: false }, mutations: { mutationsName(state) { state.stateNameOne = false; } }}// store文件中index.jsimport user from './user.js';export原创 2020-11-10 23:08:30 · 104 阅读 · 0 评论 -
vuex中mutation以及actions简单使用
一、通过this.$store.commit(“mutationsName”, “要改的值”)去修改state值。二、actions:actions: { actionsName({ commit }, parameter) { return new Promise((resolve, reject) => { setTimeout(() => { if(parameter === "某个值") { commit("mutati原创 2020-11-10 22:41:18 · 201 阅读 · 0 评论 -
vue生产环境使用localhost请求端口号不是自己设置的?来试试这个
将vue包部署后,请求的端口号自动变成了8888,设置的请求地址是http://localhost/后来用127.0.0.1请求可以了。有必要深入了解一下localhost和127.0.0.1:localhost不能访问127.0.0.1可以访问的原因及解决方法有时候我们在调试程序的时候,会出现一些莫名其妙匪夷所思的奇怪问题,localhost不能访问但127.0.0.1可以访问的问题就是其中之一。我 估计大多数人都不会去想localhost到底与127.0.0.1有什么不同,就比如我,有时候用原创 2020-11-10 14:28:28 · 2630 阅读 · 0 评论 -
vue中img使用网络地址src,https、http均显示不出图片,一行代码解决
<!--vue中使用--><img src="https://img.ivsky.com/img/tupian/pre/202004/18/hongchanhua-001.jpg" alt="" style="width: 100%;height: 300px"><!--图片不显示-->在public中的html中,header内加上:<meta name="referrer" content="no-referrer">即可,一种策略,原理原创 2020-11-10 11:45:09 · 13561 阅读 · 11 评论 -
vue动态路由权限,把原来写死的路由交给后端,返回到前端塞到router里面,进行权限控制
路由权限:页面登录成功后,执行下面的代码,把后端返回的路由数据用this.$router.addRoutes() // 添加this.$router.addRoutes([ { path: '/admin', component: () => import('../views/admin.vue') }]),// 这样就需要通过beforeEach、beforeEnter之类的去路由守卫了。...原创 2020-11-09 23:40:41 · 497 阅读 · 0 评论 -
因为在此系统上禁止运行脚本,Windows PowerShell, cmd执行不了Vue命令
公司的电脑,想搞点demo,发现vue都执行不了:解决方案,以管理员身份运行cmd或者Windows PowerShell,输入: set-ExecutionPolicy RemoteSigned 回车,选择A,再回车,就可以了原创 2020-11-08 23:52:55 · 690 阅读 · 0 评论 -
Vue过滤器--filter项目中使用,全局过滤器,时间过滤器
先来看一下官方文档:vue官方文档之filterVue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | format原创 2020-11-08 14:45:34 · 279 阅读 · 0 评论 -
vue过度动画基础,结合animate.css库使用
先附上vue官方文档,基础部分有需要的朋友自己看下:https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E5%8A%A8%E7%94%BB如果没看懂官方文档的,可以再看下我改的小demo:这部分已熟悉的可以跳过这一段,看最下面的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v原创 2020-11-07 22:39:59 · 249 阅读 · 0 评论 -
Vue中sync修饰符的使用
<!-- 因为vue是单向数据流,父组件给子组件传值后,是不能直接修改props接收属性值的,如果要修改,需要子组件向父组件发送一个事件,在父组件中监听,去修改传入的name值, -->一: 1.父组件<div :title="name" @click="edit"></div>export default{ data() { name: '' }, methods: { edit(e) { this.name = e; } }}原创 2020-11-06 00:16:53 · 146 阅读 · 0 评论 -
帮你深入理解Vue中的v-model语法糖
//原生的v-model使用<input type="text" v-model="name">// 其实是 => <input type="text" :value="name" @input="name = $event.target.value">//的一个语法糖,两个效果一样,vue是一个单向数据流=====================================================================//自定义组件中使原创 2020-11-05 22:21:28 · 866 阅读 · 0 评论 -
Vue面试题:如果data中的一个属性名和methods中的一个方法名相同,在不报错的情况下,先执行哪个?
去年面试的时候遇到的一个问题,面试官应该就是想知道你是否有了解过源码,那我们来看一下源码喽: function initState (vm) { vm._watchers = []; var opts = vm.$options; if (opts.props) { initProps(vm, opts.props); } if (opts.methods) { initMethods(vm, opts.methods); } if (opts.data) {原创 2020-11-04 22:33:12 · 1703 阅读 · 1 评论 -
Vue中路由跳转Error: Avoided redundant navigation to current location
路由跳转地址如果和当前页面路由一样,就会报这样的错:// 在router.js中,// 如果项目中跳转方式是push,就用:import VueRouter from "vue-router";const originalPush = VueRouter.prototype.push;VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err原创 2020-10-28 14:13:09 · 194 阅读 · 0 评论