![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
Vue, ElementUI, Uni-app, 编辑器, EasyUI, Echarts
Take^that
可控的事情要谨慎,不可控的事情要乐观。
展开
-
Vue 样式绑定 对象语法 数组语法 对象数组一起使用
一、对象语法1.代码<head> <meta charset="UTF-8"> <title>Title</title> <script src="./jquery-3.3.1.js"></script> <script src="../vue.js"></script&g...原创 2019-10-08 16:09:30 · 414 阅读 · 0 评论 -
Vue 条件渲染 v-show v-if v-else-if v-else input输入框的key属性
案例1.代码<body> <div id="app"> <div> <!-- v-show性能优于v-if 如果不显示,v-show只是将display置为none 测试 v-show 与 v-if 的区别--> <div v-if...原创 2019-10-08 16:39:12 · 363 阅读 · 0 评论 -
Vue set方法
Vue中文文档案例代码:<head> <meta charset="UTF-8"> <title>Title</title> <script src="./jquery-3.3.1.js"></script> <script src="../vue.js"></script...原创 2019-10-09 09:30:45 · 148 阅读 · 0 评论 -
Vue 非父子组件间的传值 (发布订阅模式 / 总线机制 / Bus /)
案例1:假设第二层的一个组件想和第一层的大组件进行通信,这用到前面学的父子组件传值问题:父组件通过props向子组件传值,子组件通过事件触发向父组件传值案例2:假设第三层的组件想和大组件进行通信,这时候该如何实现呢?下面这种通信又改如何实现?这就需要 非父子组件传值 来实现了非父子组件传值也称为发布订阅模式 / 总线机制 / Bus / 观察者模式...原创 2019-10-11 10:23:17 · 358 阅读 · 0 评论 -
画布 Graph antv-x6在vue中的使用,graph函数动态添加节点和边
参考antv-x6官网: 画布 Graph参考官网: 图表案例实现效果图请求后端返回的数据格式(json):{ "data": { "nodes": [ { "id": "00001022", "name": "xxxxxxx公共服务" }, { "id": "00002001",原创 2022-01-02 17:22:43 · 4171 阅读 · 0 评论 -
Vue刷新页面
原始方法:location.reload();vue自带的路由跳转:this.$router.go(0);前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。reload方法首先在App里面写下如下代码:<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div></template.转载 2021-12-19 13:05:59 · 398 阅读 · 0 评论 -
Vue 组件 全局组件中定义data 必须使用函数,模板中才能接收;父子组件传值:父组件向子组件传值以属性的形式,子组件通过 props接收、单向数据流、注册局部组件
案例一、<body> <div id='root'> <table> <tbody> <!-- 虽然写的tr,但实际上它是一个row组件 --> <!-- <tr is="row"></tr> ...原创 2019-10-09 23:22:17 · 272 阅读 · 0 评论 -
Vue搭建脚手架 执行vue init webpack ...特别慢
检查一下镜像站配好了没有,命令:npm config get registry如果没配好,输入命令 配置镜像站:npm config set registry=http://registry.npm.taobao.org转载 2019-12-28 17:29:13 · 975 阅读 · 0 评论 -
Vue 列表渲染 是否使用index作为下标
案例代码:<body> <!--1.性能最优: key值唯一 且尽量不使用index作为key --> <!-- <div id="app"> <div v-for="(item,index) of list" :key="item.id"> {{item.text}} ---...原创 2019-10-09 09:16:54 · 1070 阅读 · 0 评论 -
Vue 组件化思想 --- 全局组件与局部组件 Vue.component、props:['content']、template、v-bind:等的使用
<body> <!-- 组件化思想 --> <div id="root"> <div> <input type="text" v-model="todoValue"> <button v-on:click="handleBtnClick">提交&...原创 2019-10-06 23:46:23 · 979 阅读 · 0 评论 -
Vue 模板语法 插值表达式、v-text、v-html
<body> <!-- 插值表达式 等价于 v-text --> <div id='app'> <div>{{name + ' Lee'}}</div> <div v-text="name + ' Lee' "></div> <div v-htm...原创 2019-10-08 10:22:30 · 213 阅读 · 0 评论 -
Vue 动画原理
参考Vue 中文文档当一个元素被transition包裹住之后,Vue就会构建出一个动画流程Vue会在动画即将被执行时往内部的div上增加两个class名字,分别是fade-enter 和 fade-enter-active,当动画第一帧执行结束,Vue分析transition里面有动画效果,会在动画运行至第二帧的时候帮助我们做两件事情,一是把之前添加的fade-enter这个class ...原创 2019-10-12 09:34:31 · 221 阅读 · 0 评论 -
Vue动画效果 使用animate.css库
<script src="../vue.js"></script><link rel="stylesheet" type="text/css" href="../animate.css"> <body> <div id='root'> <!-入场动画 和 出场动画- -->...转载 2019-10-13 23:18:37 · 102 阅读 · 0 评论 -
npm run install报错: Could not install from ‘e-icon-picker\dist\symbol.js‘ as it does not contain a pa
解决办法:参考码云地址:e-icon-picker 图标选择组件执行上图中命令即可。原创 2020-12-05 15:35:40 · 2120 阅读 · 0 评论 -
vue上传excel报错,400 Bad Request: The browser (or proxy) sent a request that this server could not under
后端接口代码:遇到vue上传excel失败的问题,后端是Python接收,python代码如下:下面首先使用postman测试,直接调用后端接口是没问题的:但因为前端vue.config.js配置了请求代理,导致vue页面上传excel经过代理之后的请求上传失败解决办法:4. 上传成功后端接口接收到了excel数据,如下图:...原创 2022-02-12 11:06:12 · 2745 阅读 · 1 评论 -
springboot拦截器实现权限认证 axios中get或post请求变成OPTIONS(遇到的Request Method: OPTIONS已解决)handler instanceof Hand
一、1.首先登录:Login.vueaxios.post(url,{"userName":this.userName,"password":this.password}) .then(response=>{ if(response.data.code==0) { //console.log(respo...原创 2020-01-21 16:22:02 · 3556 阅读 · 3 评论 -
Vue this.$refs的使用
案例一、ref 写在标签上时<!-- ref 写在标签上时:this.$refs.名字 获取的是标签对应的dom元素 ref 写在组件上时:这时候获取到的是 子组件(比如counter)的引用--> <div id="root"> <!-- ref = 'hello': 给div 起了一个引用的名字 hello --> ...原创 2019-10-10 17:08:07 · 65903 阅读 · 0 评论 -
Vue 插槽 具名插槽
案例、代码:<body> <div id='root'> <child content='<p> Dell</p>'></child> </div> <script> Vue.component('child',{ ...原创 2019-10-11 14:22:48 · 273 阅读 · 0 评论 -
Vue项目报错 Module build failed no such file or directory, scandir ‘......\node_modules\node-sass
error in ./node_modules/@choerodon/base/lib/src/app/iam/containers/global/menu-setting/MenuSetting.scssModule build failed (from ./node_modules/sass-loader/dist/cjs.js):Error: ENOENT: no such file or directory, scandir '......\node_modules\node-sass\v.转载 2020-12-05 15:40:26 · 559 阅读 · 0 评论 -
`webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
运行vue项目报错:npm run dev原因:webpack-dev-server版本和vue版本不一样,需要将webpack-dev-server卸载了,安装对应版本解决方法:1 、查看vue版本是 vue -V2 、卸载npm uninstall webpack-dev-server3 、安装npm i webpack-dev-server@2.9.64 、安装npm install webpack cli -D5 、正常启动。...转载 2020-12-05 15:28:05 · 3000 阅读 · 0 评论 -
Vue作用域插槽
<body> <div id='root'> <child> <!-- 父组件调用子组件的时候,给子组件传了一个插槽 这个插槽叫作用域插槽 作用域插槽必须以 template开头和结尾 同时这个插槽要声明 你要从子组件接收的数据都放在哪...原创 2019-10-11 15:32:52 · 213 阅读 · 0 评论 -
前后端分离vue跨域,devServer配置proxy代理, post请求无法接收json格式参数报错400, Could not proxy request... ECONNRESET
1. 问题描述先说下问题,项目后端是微型Python框架flask,前端是vue-element, 本地开发我配置的是proxy代理,代码如下:devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, before: require('./mock/mock-server.js'), proxy: { // 本地使用代原创 2021-11-08 21:59:56 · 3327 阅读 · 2 评论 -
Vue 计算属性、方法、侦听器
1.1、先看代码:<body> <div id='app'> {{fullName}} {{age}} </div> <script> var vm = new Vue({ el:"#app", data:{ ...原创 2019-10-08 11:08:04 · 76 阅读 · 0 评论 -
Vue的生命周期函数
参考Vue中文文档:Vue中文文档先看代码:<body> <div id="app"></div> <script> //data:用于定义数据 //el:限制了一个VUE实例处理DOM的范围 //生命周期函数就是vue实例在某一个时间点会自动执行的函数 ...原创 2019-10-07 22:37:55 · 79 阅读 · 0 评论 -
Vue项目 npm install 报错(npm ERR! errno -4048,Error: EPERM: operation not permitted,)
有个Vue项目上传至码云上了, 目录结构大致这样子:然后在另一台电脑上使用 git命令git clone …克隆下来在 运行 npm install 报错,也试了一些解决方式,后来发现执行此命令后 项目的node_modules目录里面下载的东西不全,正常应该像下图中这样:还是没弄好索性就把 能正常运行的项目里面的node_modules目录...原创 2019-10-18 21:03:46 · 1237 阅读 · 0 评论 -
[Vue warn]:Invalid prop: type check failed.Expected Object,got Array父子组件传值 用空对象或空字符串接收
上图中后台Controller中的data里面数据是个list,但前台打印response.data.data却是个Object类型,原来,typeof 的运算数对对象、数组和null,它返回的是“object”,如下图:下图中phoneBooks定义为空字符串:然后下图中子组件的props用空对象接收:当时我使用Object接收,就会报这个错:...原创 2020-08-09 19:26:56 · 600 阅读 · 0 评论 -
vue better-scroll的使用
使用之前的代码:<template> <div class="list"> <div class="phoneBook" v-for="(item,key) of phoneBooks" :key="key"> <div class="title">{{key}}</div> ...原创 2020-01-30 11:47:04 · 222 阅读 · 0 评论 -
Vue创建实例
点击谈出对话框:<body> <div id='root'> <!-- 绑定的 handleClick方法必须定义在methods里面 v-on:可简写为 @--> <div @click="handleClick"> {{message}} ...原创 2019-10-07 13:46:39 · 293 阅读 · 0 评论 -
Vue父子组件传值 v-bind:、this.$emit、 this.list.splice(index,1)、@delete等的使用
点击提交:然后鼠标点击一个内容:<body> <!-- a.父组件向子组件传值:通过v-bind:的形式进行数据的传递(可直接简写为冒号) 然后子组件 使用props来接收 b.子组件向父组件传值: 局部组件TodoItem的li有handleItemClick事件 ...原创 2019-10-07 11:06:46 · 3632 阅读 · 0 评论 -
Vue v-bind: 接收一个单独的对象
<script src="https://unpkg.com/vue"></script><div id="blog-post-demo" class="demo"> <div :style="{ fontSize: postFontSize+'em' }"> <blog-post v-for="post in po...转载 2019-10-10 17:38:54 · 1084 阅读 · 0 评论 -
vue 基础 data含义、MVVM模型、v-model双向绑定、v-on:click、v-for、this的使用
章节2.2<body> <div id="app">{{content}}</div> <script> //原始 写法 //var dom =document.getElementById("app"); //dom.innerHTML='hello world'; //data:...原创 2019-10-06 21:44:48 · 421 阅读 · 0 评论 -
element-ui 合并行或列 table :span-method(行合并)
element-ui 官网案例: table合并行或列element-ui官网中关于行合并的例子是根据行号进行合并的,这显然不符合我们日常开发需求,因为通常我们table中的数据都是动态生成的,所以需要做一些修改。我们首先解读一下官网实例中的各参数的意义:objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { //用于设置要合并的列 if (rowIndex % 2 =转载 2021-12-19 14:51:56 · 9328 阅读 · 7 评论 -
Vue 计算属性 get 和set
<body> <div id='app'> {{fullName}} </div> <script> var vm = new Vue({ el:"#app", data:{ firstN...原创 2019-10-08 14:43:36 · 450 阅读 · 0 评论 -
前后端分离项目 遇到请求跨域问题Access to XMLHttpRequest at......has been blocked by CORS policy: Response to
报错信息:Access to XMLHttpRequest at 'http://localhost/login' from origin 'http://xxx.xxx.x.x:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It do...原创 2020-01-02 21:22:58 · 6295 阅读 · 2 评论 -
vue列表一行显示几个后换行 v-for=”“ :key=“index“ v-if=‘index<6‘
参考下面博客:<template> <div class="service-class p30"> <div class="sc-list"> <div class="sc-item" v-for="(img,index) in images" :key="img.id" v-if='index<9'> <img class="img" v-bind:src="img.goodsImage"/>转载 2020-12-20 17:31:35 · 4257 阅读 · 1 评论 -
vue项目调用其他人接口跨域
vue项目中有调用到同事的接口,出现跨域问题,下面简单记录一下解决办法:项目根目录下创建vue.config.js文件:module.exports = { devServer: { host: "0.0.0.0", port: 8080, proxy: { '/api': { target: `http://127.0.0.1:8888`, changeOrigin: true, pathRewrite: {原创 2021-10-04 13:31:02 · 1073 阅读 · 0 评论 -
uni-app引入uni-popup弹出层插件以及列表复选框选中与取消
uni-popup 弹出层引入基于 uni-app 的 UI 组件库<!-- 选择项目弹框 --> <uni-popup ref="popup" type="center" :maskClick="false"> <view class="popup-project"> <view class="title"><text>选择项目</text></view> <view class=原创 2021-06-20 16:59:05 · 5083 阅读 · 1 评论 -
uni-app 中保持用户登录状态
参考博客:uni-app 中保持用户登录状态转载 2021-06-19 14:36:57 · 698 阅读 · 0 评论 -
Uniapp 实现view复制文本内容, 以及textarea层级太高,导致样式穿透问题
1、data里面声明replacedContent属性:2、页面加载时,对(textarea)content字段中换行、回车、空格的识别与处理:mounted() { let loginInfo = uni.getStorageSync('loginInfo'); // console.log("index.vue --> getTeamDailyList 同步读取缓存:"); // console.log(loginInfo); this.deptId = loginInfo.原创 2021-06-19 11:14:12 · 1054 阅读 · 0 评论 -
SpringBoot整合uni-app 小程序登录
微信小程序登录流程涉及到三个角色:小程序、开发者服务器、微信服务器1、小程序初次启动,校验当前用户是否合法:<script> const baseUrl = 'http://192.168.1.9:8082'; // 请求地址 export default { onLaunch: function() { console.log('App Launch') uni.login({ provider: 'weixin', success: fun转载 2021-06-19 13:53:13 · 1143 阅读 · 0 评论