- 博客(143)
- 收藏
- 关注
RSS订阅
原创 微信转发或分享朋友圈带缩略图、标题和描述的实现方法
微信转发或分享朋友圈带缩略图、标题和描述的实现方法微信转发或分享朋友圈带缩略图、标题和描述的实现方法
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关注的人