- 博客(143)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 微信转发或分享朋友圈带缩略图、标题和描述的实现方法
微信转发或分享朋友圈带缩略图、标题和描述的实现方法微信转发或分享朋友圈带缩略图、标题和描述的实现方法
2019-01-09 20:35:24
15206
3
转载 vue中使用多个form表单,提交同时校验
一、项目需求在项目中一个页面中需要实现多个Form表单,并在页面提交时需要对多个Form表单进行校验,多个表单都校验成功时才能提交。二、实现效果三、多个表单验证注意项:多个form表单,每个表单上都设置单独的model和ref,不能同时使用,否则每个表单上的校验提示会失效。方式一:依次对两个表单进行校验<script>export default { methods: { //确定按钮 async onSubmit() { try
2024-04-12 10:33:52
802
原创 vue中父组件用prop给子组件传值,在子组件中修改
如果props的数据为对象和数组,是可以,也不会有报错提示,但是不提倡。因为我传进来的list是个数组,属于,修改子组件相当于把父组件也同时修改了,所以没有报错,如果是个基本类型的数据直接修改那么vue会报错。时,父组件传递的参数,数组和对象,子组件接受之后可以直接进行修改,并且会传递给父组件相应的值也会修改。如果传递的值是字符串,直接修改会报错。不推荐子组件直接修改父组件中的参数,避免这个参数多个子组件引用,无法找到造成数据不正常的原因。
2024-04-11 18:09:57
905
1
原创 js获取class为xx的元素,并循环使用
理解JavaScript里的 [].forEach.call() (Array.prototype.forEach.call(...))写法获取class为xx的元素,并循环使用
2022-10-11 14:14:15
1170
原创 纯CSS斜边框
效果如图:代码:li { display: inline-block; margin: 0 10px 10px 0; padding: 0 10px; height: 24px; line-height: 24px; background-color: #F7F8FC; border-radius: 2px; position: r
2021-12-03 13:48:20
3773
原创 js 获取今天后的第N天的具体日期
js 获取今天后的第N天的具体日期GetDateStr(AddDayCount) { let dd = new Date(); dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期 let y = dd.getFullYear(); let m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMont
2021-11-29 15:51:26
458
原创 数组跳出循环,使用for,some,every
数组停止循环,使用forEache 和map都不行// forEach 中使用return false; 无法停止let arrData = [1, 2, 3, 4, 5]arrData.forEach(item => { console.log(item)if(item === 2) {console.log("停止")return false;}}) // 1 2 停止 3 4 5// map 中使用return ...
2021-09-20 19:09:15
690
1
原创 [vue/no-parsing-error]Parsing error: control-character-in-input-stream.eslint-plugin-vue
问题背景:类似下图,标签明明闭合了,但是还是报红。解决问题:实际上代码写的没有错误, 比如用了element-ui 或者 iview 等框架后会发现vs-code有些地方会自动标出红色波浪线 ,其实是vuter的语法检查问题 , 只需要在setting.json中增加"vetur.validation.template": false设置方法:...
2021-09-11 23:21:25
818
原创 关于ES6的Promise
本文知识点摘自:https://www.cnblogs.com/lvdabao/p/es6-promise-1.html本文例子摘自:https://segmentfault.com/a/1190000016848192ES6 Promise 先拉出来遛遛复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受。那么第一个问题来了,Promise是什么玩意呢?是一个类?对象?数组?函数?别猜了,直接打印出来看看吧,console.dir(Promise),就这么简单粗暴
2021-08-13 14:55:23
154
原创 列表循环和条件判断
条件判断:一般都用v-show和v-ifv-show和v-if都是用来做条件渲染的使用方法:<div v-if="isShow">v-if显示/隐藏</div><div v-show="isShow">v-show显示/隐藏</div>区别 v-show: 控制DOM元素显示,其实控制的是css样式,也就是display:noe v-if进行判断,在浏览器中预览,你会发现整个DOM元素都不见了 v-
2021-08-09 14:45:59
539
原创 v-show 和 v-if
v-show和v-if都是用来做条件渲染的使用方法:<div v-if="isShow">v-if显示/隐藏</div><div v-show="isShow">v-show显示/隐藏</div>区别 v-show: 控制DOM元素显示,其实控制的是css样式,也就是display:noe v-if进行判断,在浏览器中预览,你会发现整个DOM元素都不见了 v-show初始会渲染dom,v-if如果是f.
2021-08-09 10:23:28
179
原创 vue样式绑定
css样式绑定和style内联样式绑定均可以绑定字符串,数组,对象代码:<template><!-- 样式绑定 --> <div class="base06"> <home-back></home-back> <h2 :class="classString">样式绑定 - class绑定字符串</h2> <h2 :class="classArr">
2021-08-06 18:04:15
105
原创 vue中的侦听器watch的使用,watch和computed的区别
watch侦听器的作用就是侦听一个data中的值的变化,变化后可以写一个方法,让其进行一些操作(业务逻辑的编写)。侦听器watch和计算属性computed的区别 计算属性computed必须要返回一个值,而且在页面渲染的同时就会执行里边的业务逻辑,也就是会先执行一遍你写的业务逻辑, watch只有发生变化时才会执行,也就是说值没有变化,它是不执行里边业务逻辑的。 watch监听的是一个变量的变化,...
2021-08-06 17:21:49
212
原创 vue中的计算属性computed
计算属性的特性:当计算属性依赖的内容发生改变时,才会重新执行计算。 若依赖的内容没有变化,则返回的是之前计算的结果,而不会再次执行函数,这 大大优化 了性能computed的使用:<div>总数:{{total}}</div> // computed 用法<div>总数:{{getTotal()}}</div>...
2021-08-06 16:51:05
324
原创 模板动态参数和指令修饰符
一:模板动态参数 默认写法:<div @click="onceFun()">once只触发一次回调</div><div :title="hoverTitle">title动态参数</div>动态参数写法:<div @[event]="onceFun()">click动态参数</div>// data中定义event:'click'<div :[hoverEve]="hoverTi...
2021-08-06 14:06:30
204
原创 插值表达式和指令 .self 和 .stop的区别 以及.capture
一:插值表达式{{xxx}}: 在模板中输出变量,在插值表达式中是可以写javascriptbiao表达式的,例如{{1+2}},但是不可以写语句。<!-- 插值表达式 --> <h2>插值表达式</h2> <div> <div>{{message}}</div> <div>{{message+'信息'}}</...
2021-08-06 11:00:04
675
原创 生命周期函数
生命周期:即在生命的某一个时刻,自动执行的函数vue的生命周期有: beforeCreate() 在实例创建之前,自动执行的函数 creater() 在实例创建之后,自动执行的函数 beforeMount() 在dom挂载之前,自动执行的函数 mounted() 在dom挂载完成之后,自动执行的函数 (在此之前都获取不到dom节点) beforeUpdate()在data中的数据有变化时,自动执行的函数 updated()在data中的...
2021-08-05 15:35:47
132
原创 宏任务和微任务的执行顺序
参考文章:https://www.jianshu.com/p/5b4c4756e461一、宏任务(macrotask) 1、发起者:宿主(Node、浏览器) 2、事件:script(整体代码)、setTimeout、setInterval、setImmediate(Node.js 环境)、UI事件、I/O(Node.js) 3、运行:后运行二、微任务(microtask) 1、发起者: JS引擎 2、事件:Promise、Mutai
2021-08-04 09:50:48
804
原创 vue 是什么?与其他框架对比?什么是MVVM?
一:vue是什么?vue是一套用于构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层,不仅易于上手,1>还便于与第三方库或既有项目整合。2>另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。vue 框架的特点?* MVVM框架模式* 轻量级,灵活,容易上手* 数据驱动* 组件化(单文件组件)* ...
2021-08-03 10:08:41
728
原创 vue3项目创建流程
第一步:vue3 create 项目名称按键盘上下键可以选择默认(default)还是手动(Manually),如果选择default,一路回车执行下去就行了这里我现在手动选择配置,看个人项目需求空格键是选中与取消,A键是全选TypeScript 支持使用 TypeScript 书写源码Progressive Web App (PWA) Support PWA 支持。Router 支持 vue-router 。Vuex 支持 vuex 。CSS Pre-pr...
2021-08-02 15:33:07
346
转载 安装vue3
背景:已全局安装了vue2,现在想要安装vue31》新建一个存放vue3的文件夹2》打开这个文件夹的命令行3》安装npm install @vue/cli@3.7.0装好了之后,文件夹中有了node_modules文件夹4》 进入.bin文件夹 > 记得改个名字,因为全局的vue命令已经被vue2占用了,直接改个vue3检验安装是否成功安装vue-cli后,会在当前目录下有一个node_modules的文件夹。这也就是局部安装vu...
2021-08-02 14:57:01
659
原创 面试 - 布局篇
1.footer位置的自动适配(主内容不足一屏时显示在最底部,超出一屏时跟随主内容显示)html<div class="page"></div><div class="footer"></div>css.page{min-height: 100vh;padding-bottom: 50px;}.footer{height:50px;background: #ccc;margin-top: -50px;}主要注意的是:主内容的min-
2021-07-28 11:11:38
76
原创 前端面试 - css , 布局 ,js ,vue
1. 介绍一下标准盒子模型和低版本IE盒子模型标准盒子模型 宽度 = content+border+padding+margin低版本IE盒子模型 宽度 = 内容宽度(content+border+padding)+margin也就是说区别在于,低版本IE盒子模型的内容宽度直接包含了border和padding转存失败重新上传取消转存失败重新上传取消正在上传…重新上传取消转存失败重新上传取消转存失败重新上传取消...
2021-07-27 14:57:01
259
原创 vue使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html举例:对于所有路由导航,简单地让页面滚动到顶部。scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }}...
2021-03-16 11:05:08
306
原创 header实现渐隐渐现效果
使用场景如图:(刚开始是左箭头 ---》 下滑变header透明 ---》 下滑至一定高度,header出现)代码:<template> <div> <router-link tag="div" to="/" class="header-abs" v-show="showAbs"> <div class="iconfont header-abs-back">...
2021-03-16 10:07:02
218
原创 vue,城市选择组件
功能:有搜索功能 当前城市展示 热门城市 可以点击右侧字母,也可以滚动字母方便选择城市图示完整代码:文件目录:City.vue文件<template> <div> <city-header></city-header> <city-search :cities="cities"></city-search> <city-list :cities=".
2021-03-12 14:33:22
1132
原创 刷新页面,vuex丢失改变数据问题解决。
问题背景:公用数据使用vuex存储。默认name是“小杨”,使用vuex改变name="小白"。这时刷新页面,name又变成了“小杨”。问题解决:利用localStorage,类似cookie功能,做到本地存储。引申问题:当使用了localStorage时候,建议一定使用 try catch。因为在某些浏览器,当用户关闭了本地存储,或者使用了隐身模式,使用localStorage会抛出异常,程序整个就运行不了啦。...
2021-03-11 14:39:59
151
原创 关于vuex的使用,以及了解
state:所有的公用数据都放在state中。要想使用,直接调用state修改state:一:改变state中的数据,不能直接让组件修改,必须走流程:如果有异步操作或者复杂的同步操作,直接将操作放在actions中,组件先调用actions(使用dispath方法),然后调用mutations(使用commit方法)。mutations中放着一个一个的同步对state的修改。二:当没有任何的异步操作,操作非常简单,不是批量的数据操作时,可以略过调用actions 直接调用mutation...
2021-03-11 14:22:35
136
1
原创 css样式穿透<<< deep
问题背景:在vue中使用了第三方框架的样式,在本组件中改变样式并不能生效。解决问题:方案一:使用 /deep/方案二:使用 <<< 样式穿透
2021-03-05 14:32:56
395
原创 网络问题造成,页面抖动
场景:如图当图片没有请求回来的时候,下面的文字在header下面,图片加载完时,又恢复到图片下方。一:高度设置(高度百分比是31.25%。不能直接设置height:31.25%)或者这样写(vw会有浏览器兼容问题)...
2021-03-05 14:28:06
194
原创 使用git代码控制版本工具 提交代码流程
一:本地修改提交到本地的缓冲区 git add . 二:本地缓冲区的内容提交到本地仓库 git commit -m "project init"三:本地代码推送到线上 git push
2021-03-04 16:36:47
165
1
原创 解决移动端 H5 点击300ms延迟问题
安装fastclick (移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。)一安装:npm install fastclick --save二:使用:在main.js中引入import fastClick from 'fastclick'fastClick.attach(document.body)...
2021-03-04 16:28:31
837
1
原创 移动端H5 1px显示问题
border.css@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.border-topleft,.border-rightbottom,.border-topright,.border-bottomleft { position: relative;}.border::before,
2021-03-04 16:17:23
155
1
原创 公用css样式
reset.css@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}body,input,textarea,button,select,pre,xm.
2021-03-04 16:16:07
407
1
原创 VUE使用动画效果
一:引入相应的css库文件,然后用transition标签包裹,加上相应的class即可二:网页开发就触发动画,加上appear属性,并加上相应的class即可三:同时使用过渡和动画。type设置动画时长,也可以自定义,使用 :duration="10000"。...
2021-03-03 16:47:15
176
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人