- 博客(30)
- 收藏
- 关注
RSS订阅原创 element 中＜el-date-picker＞＜/el-date-picker＞限制时间为只能选7天内的日期用法全解
HTML部分 <el-form-item label="财务审时间：" class="item" prop="financialAuditTime" > <el-date-picker size="small" v-model="queryParams.financialAuditTime" type="datetimerange" format="yyyy-MM-dd HH:mm:ss"
2021-11-01 11:51:20
1494
原创 element 中＜el-date-picker＞＜/el-date-picker＞的用法
完整功能如下：<el-form-item label="有效时间" prop="date" class="active_time"> <el-date-picker v-model="ruleForm.date" type="datetimerange" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="expireTimeOption" :de
2021-09-13 20:50:12
708
原创 element 中＜el-pagination＞＜/el-pagination＞的用法详解
el-pagination其实他就是做分页用的1.total是总条数也就是说一共有多少条数据，如下所示：2.page-count是总页数也就是你这些数据一共有多少页3.current-page 当前页数4.page-size 每页显示多少条数据5.layout 布局参考一下布局自行放置展示：...
2021-09-13 15:51:52
7547
原创 css3的3D旋转效果讲解
代码绝大部分类似于我的3D平移，就是transform不同 为rotate<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D旋转的Demo</title> <style> #experiment{ -webkit-perspective:800px ;
2020-10-11 15:31:25
212
原创 css3的3D位移效果讲解
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D位移的Demo</title> <style> /* perspective 定义3d元素距离视图的距离 以像素为单位 当给一个元素定义perspective属性的时候，其*子元素*就获得了一
2020-10-11 15:20:23
397
原创 css3的2D转换
转换：改变元素的状态：大小、位置、形状1. 转换的属性：transformtransform:transform-function / nonetransform-function:1. 旋转 - rotate()2. 位移 - translate()3. 缩放 - scale()例如: div{transform:rotate(angle)}2. 转换的原点：3. 转换的过程中，围绕的中心点 默认情况下，原点在元素的中间处transform-origin:取值：数值 - 以元素的左
2020-10-11 14:55:44
99
原创 内容生成的妙用（解决子元素的margin-top/bottom越界问题）（所有的子元素浮动对父元素(父元素塌陷现象)）
1.什么是内容生成？内容生成：通过css向已有的元素中添加文本内容（图片内容）1. :before 向匹配的元素之前增加生成内容，定位到元素的起始位置2. :after 。。。。。 之后增加 定位到 结束位置属性：contentdiv:before{content:“生成的内容” 、 url(图片路径) 、计数器}<!DOCTYPE html><html><head> <title> new
2020-10-11 14:22:32
223
原创 伪元素选择器
伪元素选择器-:first-letter 伪元素选择器 特点:获取指定元素中某一部分文本而用的。 1、:first-letter 用于选取指定选择器（元素）的首字母 2、:first-line 用于选取指定选择器（元素）的首行文本 3、::selection 匹配被用户选取的部分 <!DOCTYPE htm...
2020-10-11 13:55:35
1216
原创 结构伪类选择器&否定伪类选择器
1.结构伪类选择器&否定伪类选择器:first-child 匹配作为第一个子元素存在的指定元素:only-child 匹配作为唯一子元素存在的指定元素（独生子）:empty 匹配内容为空的指定元素:not(selector)input:not([type=text]) 选中所有input的type属性值不为text的input元素 new document this is first h1
2020-10-11 13:47:52
200
原创 目标伪类选择器&元素状态伪类
目标伪类选择器：举例说明一下他的用途，比如点击一个文字或是图标实现跳到顶部，这时候可以用的这个目标伪类选择器用于匹配当前激活的【锚点元素】语法： 目标选择器 :target{} new document //点击跳转到我在东北玩泥巴! 跳转至东北 //点击跳转到黏住过客的思念 跳转至江南 //点击跳转到雨到.这里缠成线，点击这个跳转的明显 跳转至上海 我在东北玩泥巴! 黏住过客的思
2020-10-11 13:31:35
685
原创 css3兄弟选择器
兄弟选择器：相邻兄弟选择器匹配的相邻的元素 - 当前元素的【后面的一个】元素，前提必须有相同的父元素语法：selector1+selector22. 通用兄弟选择器匹配当前元素的【后面的所有兄弟】元素语法：selector1~selector2回顾：元素选择器 元素名{}class 类选择器 .类名{}id选择器 #id名{}通用选择器选择器1,选择器2,… 群组选择器选择器1>选择器2 父子选择器选择器1 选择器2 后代选择器&
2020-10-11 08:49:27
1375
1
原创 function对象-重载
重载的定义与特性重载：程序中定义多个相同的函数名，不同参数列表的函数调用时，根据传入的参数不同，动态的选择匹配的函数进行执行操作！JS 的语法不支持重载，但是可以利用 arguments类数组对象 来实现重载效果arguments对象是每个函数对象中默认都有的，专门接受调用时传入的参数的值两点像数组：arguments.length 参数值的个数arguments[i] 获得下标i位置的参数值例如： function fun(a){ return
2020-10-09 10:11:13
133
原创 vuex的用法（含vue-cli的安装与使用）
1.什么是vuex？vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。2.什么是vue-cli？脚手架:vue-cli ：vue脚手架帮你提供好基本项目结构本身集成很多项目模板:simple 基本没用webpack 可以使用(大型项目)Eslint 检查代码规范，单元测试webpack-simp
2020-10-02 10:48:54
342
原创 vue中@click+router方法实现页面跳转
<template id="vip"> <h1> <button @click="back()">返回</button> 这是vip内容</h1></template><script> export default{ methods:{ back(){ // 返回到上一级
2020-10-01 10:54:27
6981
原创 vue中路由的用法
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <bo
2020-10-01 09:30:36
261
原创 vue组件与动态组件
1.组件的思想，其实是前端模块化/工程化的基础。 把前端页面分成一个个模块基本步骤：定义组件 - 定义模板 - 将组件挂载到你要用的组件上面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2020-10-01 09:26:32
407
原创 vue中slot插槽的用法
1.什么是插槽？slot插槽：在模板中保留位置，使用的时候可以扩展slot取name值在占位符中 slot=“name值”<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2020-10-01 08:57:55
228
原创 vue中自定义全局指令和自定义局部指令
这两个指令的好处就是我事先定义好指令的内容，到用的时候直接调用这个指令就可以了咋用那？1.调用的方法两者的调用方法一样直接在你的标签中 加上v-指令名字:参数(常量)v-指令名字=“参数（变量）”比如v-color：bulev-color=“bule” //bule为变量<p v-color:blue @click="change()" v-if="show">文字{{msg}}</p>牢记书写的格式！！！例子1：比如我想定义字体的颜色，只要我给什么颜色
2020-10-01 08:05:04
1160
原创 vue中watch数据监听的用法 （简单易懂一学就废）
1.watch与data，methods同级2.watch放置的是所要监听的数据书写格式为：watch：{数据名(){数据发生变化的时候，触发}},比如监听数据num++ 与数据msg代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
2020-10-01 08:03:18
1375
原创 vue中不用插件实现tab栏
用到的相关属性 v-for， :class="{current:num==index}，v-show="num==index"，@click="change(index)"代码如下；<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
2020-09-29 12:26:10
234
原创 vue中如何解决冒泡和默认行为
1.什么是事件冒泡?事件冒泡的本质:当前div块以及父级div块，以及父级的父级，你懂的。都会被触发的事件。前提是，每个块级都有对应的事件触发方法。2.什么是默认行为？这个比如：<a href="https://www.baidu.com/" >百度</a>你点击之后会直接进入百度页面 那么我只想有链接却不想让他跳转该如何做那？解决办法如下：阻止冒泡：@事件类型.stop阻止默认行为 @click.prevent<!DOCTYPE html><htm
2020-09-29 12:12:31
1598
原创 vue中v-model的原理及应用讲解
v-model其实是一个语法糖背后包含两个操作v-bind动态绑定一个value属性v-on给当前元素绑定input事件也就是说以下两段代码等价<input type="text" v-model="message"><!--等同于下面--><input type="text" v-bind:value="message" v-on:input="message=$event.target.value">具体·例子如下:<!DO
2020-09-29 11:47:35
538
原创 vue中如何实现在页面手动增删数据
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <bo
2020-09-29 11:29:33
115
原创 vue中的v-for的使用方法
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <bo
2020-09-29 10:51:00
1144
原创 vue中v-if和v-show的区别
v-if与v-showv-if与v-show虽然都可以控制标签的可见性，但是两者对标签的操作却大有不同，v-if控制的是标签是否存在 如果值为真，就是存在，如果值为假，标签不存在!-- v-show控制的是标签显示与隐藏。请看一下代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
2020-09-29 10:46:59
77
原创 vue中动态控制标签属性
<body> <div id="app"> <!--动态控制属性： v-bind:属性='变量' --> <img v-bind:src="src" alt="" v-on:mouseenter="change()"> <div v-bind:class="msg" v-on:mouseenter="c()" v-on:mouseleave="l()"></div> </d.
2020-09-29 10:28:03
5608
原创 vue中如何用事件获取当前操作的标签
<div id="app"> <!-- 事件函数内部有一个实参$event代表事件相关参数--> <div v-on:mouseenter="c($event)"></div></div><script src="js/vue.js"></script> new Vue({ c(a){ console.log(a) // a.ta
2020-09-29 10:01:31
1303
原创 vue中v-html与v-text的区别
v-html与v-text的区别话不多说直接上代码------------------------------------------ <div id="app"> <!-- 如果变量作为属性值的话，不需要加{{}} --> <!-- html可以识别标签,有xss风险(可以通过html书写病毒，攻击网站) text识别不了标签，把标签当做字符串处理 --> <div v-html="msg"></div&
2020-09-29 09:49:16
455
转载 vue中mvvm的解释
1什么是mvvm？简单来说，mvvm是modal-view-viewmodel的缩写。View层View层是视图层，也就是用户界面。Model层Model是指数据模型，也就是后端进行业务处理和数据处理ViewModel层ViewModel是由前端开发人员组织生成和维护的视图数据层。在这里，前端可以对从后端获取的model数据进行转换处理，以便于前端的View层使用。...
2020-09-29 09:34:03
440
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人