Vue学习笔记
vue.js笔记
诗水人间
要想走的更远,就需要思考更深层次的问题。冷静、智慧、深沉是我所向往的
展开
-
使用ElementUi中的el-upload组件,后台服务器签名,前端直传阿里云OSS。
endpoint和bucket来源于下面,地址则是创建完bucket后点开这个bucket就会看到accessID和accessKey则是拥有这个bucket管理的用户,后面内容可以找到这个信息需要有前面的操作:开启OSS对象存储服务,创建Bucket以及添加一些必要的设置后台服务器签名:阿里云OSS文档地址首先需要有一个能获取签名的地址第一步、搭建签名服务器方式一、有外网服务器的情况下载java端的sdkOSS签名程序的sdk下载地址下载完后,修改源码中的如果有修改端口的需求,修改原创 2020-07-17 01:20:21 · 126240 阅读 · 10 评论 -
js 对象的深拷贝、合并、清空属性值(自己封装,递归清除对象属性值。)
对象属性和值的深拷贝let staffForm = { id: '123', name: 'zhangsan'}方法一:ES6语法let obj = Object.assign({}, staffForm);//obj是深拷贝的对象方法二:JSON工具,通过转字符串,然后转对象let obj = JSON.parse(JSON.stringify(staffForm));//obj是深拷贝合并对象会合并相同属性、后面的会覆盖前面的const o1 = { a: 1, b: 1,原创 2020-07-15 21:50:36 · 159707 阅读 · 0 评论 -
栅格布局xs sm md lg xl,简单的响应式示例代码
xl对应屏幕 >=1920 px 超大显示器lg对应屏幕>=1200px,小于 1920px 台式1920*1080显示器md对应屏幕>=992px,小于1200px 适合笔记本sm对应屏幕>=768px,小于992px 适合平板xs对应屏幕<=768 手机端屏幕例如有如下代码将屏幕分成3列,进行响应式布局<el-row :gutter="10"> <el-col :xs="0" :sm="7" :md="6" :lg="5" :x原创 2020-06-14 21:17:42 · 163497 阅读 · 0 评论 -
html中引入Vue+ElementUI
CDN方式引入Vue.js和ElementUIVue官网:https://cn.vuejs.org/ElementUI:https://element.eleme.cn/2.0/#/zh-CN/component/installation引入时需要注意的地方:先引入vue.js然后在引入ElementUI组件库 需要挂载app(vue的作用域) 就是:<div id="#...原创 2019-12-17 00:19:59 · 147663 阅读 · 4 评论 -
VUE常用插件库总结
一、UI组件及框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- ...转载 2019-10-11 14:54:50 · 133443 阅读 · 1 评论 -
js对象等值判断,递归处理
来自文章:https://www.jianshu.com/p/c8fe19f0ea37记录一下,方便以后复用下面是vue的代码,单纯js,加上function声明和去掉thisequals(x, y) { var f1 = x instanceof Object; var f2 = y instanceof Object; if (!f1 || !f2) { return x === y } if (Object.keys(x).length !原创 2021-03-15 01:28:28 · 595 阅读 · 0 评论 -
springboot+vue 的整合问题总结
第一个问题、整合路径问题一、Vue中 修改 config/index.js 的build设置需要了解这些配置的意思,可以根据名称很容易知道其含义里面这些需要了解一下:二、SpringBoot中 application.yml中设置类路径:spring: # 设置映射路径 mvc: static-path-pattern: /**...原创 2019-11-16 21:25:58 · 123213 阅读 · 0 评论 -
Syntax Error: ValidationError: Invalid options object. Stylus Loader has been initialized using an
报错信息如下:Syntax Error: ValidationError: Invalid options object. Stylus Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'preferPathResolver'. These properties are valid: object { s原创 2021-01-03 03:39:55 · 3331 阅读 · 0 评论 -
vue-cli4中全局引入jquery
先安装依赖npm install jquery在src同级目录下新建一个vue.config.js文件粘贴下面内容到这个文件中即可const webpack = require('webpack')module.exports = { //引入jquery chainWebpack: config => { config.plugin('provide').use(webpack.ProvidePlugin, [{ $: 'jqu原创 2021-01-01 02:09:37 · 1020 阅读 · 2 评论 -
安装node并将npm设置淘宝镜像源
1.下载nodejs个人不喜欢安装包,所以是下载zip包的方式,解压缩后解压缩2.配置环境变量将包含npm的路径配置进Path中这样使用power shell、cmd中就可以直接全局调用3.设置淘宝镜像源npm config set registry https://registry.npm.taobao.org...原创 2020-12-30 00:25:15 · 1259 阅读 · 0 评论 -
ElementUI中的el-table表格设置全透明(组件化开发和html两种方式)
你可以随意,注意下面的getElementById中一致即可,放在钩子函数即可,例如setInterval时间为0,就是一直去除,因为这个属性似乎是动态加上去的,如果直接使用。这个贼坑,社区中很早以前就提过了,一直没有解决。生效,还有注意作用域要是scoped。需要加上scoped否则深度作用。替代,注意需要有scoped,元素设置一个id,我这里叫做。会造成移除了又被添加进去了。关于表格的其它一些操作。原创 2020-10-28 04:50:02 · 84995 阅读 · 16 评论 -
ElementUI响应式布局bug、其中中el-col-sm-0会导致响应式布局失效的解决方法
如下布局,如果将:sm="0"则会导致456始终不显示下面得响应式布局目的就是希望在sm也就是屏幕宽度在小于992px时将456隐藏,不显示,但是如果这样做就会出现bug<el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20">123</el-col><el-col :xs="0" :sm="0" :md="7" :lg="5" :xl="4" >456</el-col>完整得例子新建一个demo原创 2020-09-05 22:57:26 · 100231 阅读 · 3 评论 -
ElementUI自定义CSS样式不生效的解决方案
例如有一个输入框<el-input ref="mySearch" class="mySearch" size="small" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input1"></el-input>如果没有加自定义样式则输入框大概是这样的我希望是这样的通过谷歌浏览器的开发者工具,找到对应样原创 2020-09-02 15:26:18 · 140340 阅读 · 2 评论 -
stylus的使用和基础知识
安装stylusnpm install stylus stylus-loader -sstylus是主流的css预编译器LessSassStylus使用方法<style lang="stylus" rel="stylessheet/stylus"></style>语法中文文档语法结构:完全通过缩进控制,不需要 大括号和 分号,冒号可选。.tab display:flex height 40px line-height 40px .tab-i原创 2020-06-08 14:51:48 · 105516 阅读 · 0 评论 -
el-form-item自定义校验规则失效---踩坑记录
如下使用自定义校验的模板<el-form :model="myForm" status-icon :rules="myrules" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input&g原创 2020-07-16 12:02:22 · 151408 阅读 · 0 评论 -
el-table-column prop 传对象
使用表格组件时如下prop可以通过对象调用获取字段名<el-table> <el-table-column prop="deptId.deptId" label="所属部门"> </el-table-column></el-table>原创 2020-07-15 16:47:51 · 188741 阅读 · 5 评论 -
Promise对象的使用
Promise对象也称链式调用,如果有一组数据需要先查询到另一组数据,然后通过这组数据再获取最终想要的数据。例如封装axios创建一个ajaxUtil.js文件import axios from 'axios'/*html页面,则在引入ajaxUtil.js前通过<script>引入axios<script src="https://unpkg.com/axios/dist/axios.min.js"></script>*/function ajax原创 2020-07-15 09:45:21 · 107040 阅读 · 0 评论 -
v-if和v-show的踩坑记录
在html页面中引用了ElementUI组件通过菜单的点击然后显示不同的标签。起初采用v-if判断点击导航菜单的值来显示不同组件,但是发现当点击的比较频繁的时候会发生组件的错位正常的布局是这样的:当点击过于频繁就会出现渲染错位,如下会发现人员管理的按钮跑到了职位管理。解决方法是讲v-if换成v-show,因为组件比较多的时候就会出现这种情况。v-if消耗性能小,v-show性能消耗大,但是不会出现上面的那种渲染错误vue官网关于v-if和v-show的说明官网文档地址传送...原创 2020-07-15 00:41:21 · 134009 阅读 · 0 评论 -
js之间的互相引用踩坑记录
首先需要在script标签上的type标记为module<script src="js/api.js" type="module"></script>而我这里的api.js引用来其他封装的js文件,当时用的是引用的是 ajaxUtils.js在es6中实际上.js可以不写,但是这样在浏览器中会导致404错误,浏览器下载不到对应的js文件导致报错import ajax from "./ajaxUtils";因此需要填上.jsimport ajax from "./aja原创 2020-07-07 05:38:23 · 140876 阅读 · 0 评论 -
Vue修改elment-ui组件的el-aside的width
<el-aside width="200px" ref="aside" id="aside"></el-aside>会发现通过指定this.$ref.aside.style.width=auto或者指定值,会发现控制台直接报错,修改不生效。换种做法将200px作为属性计算,进行双向绑定数据<el-aside :width="200px" id="aside"></el-aside>const vm = new Vue({ // 配置对象 opt原创 2020-07-07 02:11:41 · 145112 阅读 · 0 评论 -
html中使用vue-router
引入vue和vue-router<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>完整的示例<!DOCTYPE html><html><head> <meta charset="UTF-8"&g转载 2020-07-07 00:43:01 · 179674 阅读 · 10 评论 -
vuejs实现倒计时特效
<div id="app" @click="animate"> <div id="countdown"> <svg :width="size" :height="size"> <circle fill="transparent" :stroke-width="stroke" stroke="#270B58"转载 2020-06-25 01:20:44 · 120061 阅读 · 0 评论 -
Vue.js中对css的操作
原文链接:https://blog.csdn.net/tan1071923745/article/details/81162667此篇博客为转载内容,做个记录,方便自己日后查找使用总结下面的内容,最简单的方式是给需要操作的dom元素添加ref="refName"属性,然后通过this.$refs.refName.style.要修改的样式=修改的值 即可完成修改css使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改;1.v-bind:class .原创 2020-06-17 01:08:32 · 150001 阅读 · 0 评论 -
vue中缓存路由组件
通过keep-alive的缓存路由组件,切换路由时原来的路由组件中的数据也会和数据一起保存下来。这样就能做到切换路由,不用重新从后台获取数据,直接使用刚刚缓存的数据<keep-alive> <router-view></router-view></keep-alive>...原创 2020-06-14 19:25:37 · 139701 阅读 · 1 评论 -
云博(yumbo)前端模块划分
项目目录结构云博分为手机端界面和pc端界面,通过判断是手机还是pc来自动切换路由路由的格式 手机端用 phone PC端用 pc例如主页 路由: 1. localhost:8080/phone 表示手机端 2. localhost:8080/pc 表示PC端比如登陆界面路由: 1. localhost:8080/phone/login 2. localhost:8080/pc/login同理手机和电脑端的切换只需要更换路由中的pc和phone即可目录结构:(项目完原创 2020-06-07 23:22:02 · 159701 阅读 · 0 评论 -
vue中手机端和电脑端之间路由切换的实现代码,正则表达式对路由替换
例如有手机端登录页面和电脑端的登录页面登录的路由分别是/pc/login/phone/login实现代码:先根据浏览器判断是电脑还是手机端的界面然后通过正则截取/login进行字符串拼接,形成新的路由在入口App.vue中的script中添加 export default { name: 'App', methods: { // 判断phone端还是pc端 _isMobile() {原创 2020-06-07 23:20:28 · 136162 阅读 · 0 评论 -
CSS将div超过2行省略号显示、一维数组拆成2维数组
overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;一维数组变成二维数组 let arr = [1,2,3,4,5,6] let result=[] ...原创 2020-01-07 22:15:20 · 122004 阅读 · 0 评论 -
javascript保留两位小数 , Vue ElementUI的@keyup失效
parseFloat(parseFloat('传入的变量').toFixed(2))//返回float类型的保留2位小数的数值解决方法加上.native禁用原事件如 @keyup.enter.native即可解决例如<el-input @keyup.enter.native="alert('hello')" placeholder="请输入内容"></el-i...原创 2019-12-28 22:18:14 · 133538 阅读 · 0 评论 -
前端vue页面 加入luosimao人机认证
官方示例:https://captcha.luosimao.com/demo文档链接在示例下面引入方法在html的head中加入script标签在线引入js插件 <script src="https://captcha.luosimao.com/static/dist/api.js"></script> <script src="htt...原创 2019-12-21 23:27:02 · 178493 阅读 · 0 评论 -
vue删除数组(表格的一行)中的元素
利用数组的方法 splice(index, 1)原创 2019-12-19 06:03:36 · 146276 阅读 · 0 评论 -
Vue判断一个对象 是 空对象 以及判断是一个空数组
if (JSON.stringify(Obj) == '{}'){ console.log('这是一个空对象')}if (JSON.stringify(obj) === '[]'){ console.log('这是一个空数组')}原创 2019-10-22 00:36:19 · 172735 阅读 · 0 评论 -
Vue使用Axios发起多个同步请求案例
下面是一个组件的完整代码前提是安装了axios库。npm install --sava axios 命令进行安装如果代码太多看的不是太懂,后面有提炼和总结<template> <div id="Music"> </div></template><script> import axios from 'ax...原创 2019-10-22 00:29:30 · 139898 阅读 · 0 评论 -
Vue中定义全局变量或者常量,解决Api服务器域名或者ip导致大量修改原代码
新建一个js文件、如图 js文件名字叫ApiServerlet apiUrl='www.huashengshu.top:3000'export default { apiUrl:apiUrl}使用方法:在需要使用的地方引入该js文件<template> <div> <button @click="this.test">测...原创 2019-10-21 22:43:04 · 160952 阅读 · 0 评论 -
vue中将json数据转换自己想要的对象数据======网易云音乐api的json转换成自定义的对象
补充:看另外一篇博客解决需要多次请求获得的数据进行重新构造新的对象:https://blog.csdn.net/qq_41813208/article/details/102643942vue定义一个对象,在对象中调用另一个对象的方法=======》这种方法是不可取的遇到的问题:后台给的数据类型不符合自己的使用需求,想通过前台转换成自己想要的数据对象在这过程中,犯了一个错误。如下...原创 2019-10-19 22:31:21 · 157496 阅读 · 0 评论 -
Vue的学习笔记----001认识vue和第一个Hello World示例
Vue是 一个渐进式的JavaScript框架 作者 尤雨溪 作用 动态构建用户界面Vue的特点:1) 遵循 MVVM 模式2) 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发3) 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目借鉴了angular的模板和数据绑定技术借鉴了react的组件化和虚拟DOM技术Vue的扩展插件...原创 2019-08-20 23:59:58 · 129811 阅读 · 0 评论 -
Vue的学习笔记----002理解MVVM模型
M : model 模型 ------ 对应的是数据V : view 视图 -----前端展示的页面VM :(view-model)模型视图对象 -----对应的是Vue的实例对象MVVM模型靠VM实例对象联系起来:View-Model实现了Dom事件监听 数据绑定注意事项: 在模板中只能有一个根结点!对应下面的 div 标签! 下面是vue的模板:...原创 2019-08-21 09:46:42 · 149474 阅读 · 0 评论 -
Vue的学习笔记----003 模板 和 语法(数据绑定v-bind 和 事件监听v-on)
双大括号表达式 语法:{{exp}} 功能:向页面输出表达式的数据 可以调用对象的方法 举例: <template> <div id="app"> <p>{{url}}</p> </div></template><script> export default { ...原创 2019-08-22 23:46:16 · 131186 阅读 · 0 评论 -
Vue的学习笔记----004 计算属性 和 事件监听
一、计算属性的理解 当相关的属性发生改变,就会重新计算(缺点,改变姓名,不能改变 姓 和 名)单向改变 代码:<template> <div > 姓: <input type="text" v-model="firstName"> 名: <input type="text" v-model="la...原创 2019-08-23 00:25:25 · 147422 阅读 · 0 评论 -
Vue的学习笔记----005 class 和 style的绑定修改样式
style绑定:用 : 相当于写js语法:style="{ color: activeColor, fontSize: fontSize + 'px' }"class的绑定: :class='classA' -----字符串 指向一个固定的class :class={classA:isA,classB:isB} ----对象 只能是一...原创 2019-08-23 00:58:14 · 124700 阅读 · 0 评论 -
Vue的学习笔记----006 条件渲染v-if 、v-else、v-show 和列表渲染 v-for
v-if 与 v-else 和 v-showv-if 与 v-else会判断条件是否成立来渲染页面(会先创建对象然后移除)v-show 直接根据Boolean值判断是否显示(比v-show直接显示,会比v-if快点)<template> <div id="app"> <p v-if="isA">isA!</p> &...原创 2019-08-23 02:41:21 · 147175 阅读 · 0 评论