- 博客(49)
- 收藏
- 关注
原创 css动画效果
1)定义单个动画@keyframes 动画名称{from{初始状态属性}to{结束状态属性}2)定义多个动画@keyframes 动画名称{0%{初始状态属性}50%{中间还可以再添加关键帧}100%{结束状态属性}
2024-04-16 16:14:13
396
原创 js问号语法
attr获取object属性attr前先判断object是否存在,在object后面加上?,这是JavaScript的可选链语法。(这句代码的意思是,如果object恒等于null或者undefined时,取值为undefined,否则为object.attr。是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。该表达式的含义是 条件condition是真,则执行exprIfTrue ,否则执行exprIfFalse。
2023-05-26 09:14:54
1667
1
原创 el-tree
1、第一级节点不显示多选框/deep/ .el-tree > .el-tree-node > .el-tree-node__content .el-checkbox { display: none;}2、自定义下拉箭头1)隐藏默认箭头样式2)自定义图标<span class="custom-tree-node" slot-scope="{ node, data }"> <div class="word_style"> <span cla
2022-01-13 13:46:18
723
1
原创 element表格自适应高度
mounted() {this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …rHeight - this.refs.table.KaTeX parse error: Expected '}', got 'EOF' at end of input: …rHeight - self.refs.table.KaTeX parse error: Expected 'EOF', got '}' at position 26: …op -
2021-11-26 13:12:49
131
原创 页面渲染后再加载css、js
<script> function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); } function addLinkTag(href){ .
2021-11-26 11:25:29
772
原创 vue实现div盒子拖拽
1、创建directive.js文件import Vue from "vue";Vue.directive("drag", { bind: function (el) { let odiv = el; odiv.style.position = "fixed"; odiv.onmousedown = (e) => { let disX = e.clientX - odiv.offsetLeft; let disY = e.clientY - od
2021-11-19 16:31:28
1125
1
原创 获取本机ip
<script type="text/javascript"> window.sessionStorage.setItem('ip',returnCitySN["cip"])
2021-11-19 11:19:02
657
原创 git 协作开发流程
一、主要命令1、pull主分支到本地 git pull 2、查看文件状态git status 3、提交的文件1)选择单独的文件 : git add 文件名 2)全部选择是 git add .4、提交到本地仓库git commit -m "xxx"5、提交到远程仓库git push6、创建并切换分支1)创建分支 git branch 分支名2)切换分支 git checkout 分支名3)创建并切换分支 git checkout
2021-10-16 22:14:08
410
原创 vue父子组件通信数据双向绑定
一、方法1:通过v-model,子组件使用model绑定属性1.父组件中 //调用的子组件 <upload-img v-model="form.coverUrl" ></upload-img> <script> export default { data(){ return{ form:{ cove
2021-09-04 10:07:32
171
原创 解决父组件在mounted/created 中调用子组件方法报错问题
1、问题父组件created、mounte调用子组件方法时,报错 created(){ this.$refs.previewRef.swiperInit(resultUrl, count); },2、解决方法使用定时器延时100ms调用子控件方法 mounted () { // 开启初始定时器 this.startTimeout=setTimeout(function(){ this.$refs.previewRef.swiperInit(
2021-08-30 11:09:16
723
原创 vue+scss主题色切换
1、新建一个Scss文件_themes.scss,里面可以配置不同的主题配色方案$themes: ( Red: ( //整体主色调/菜单栏背景/图标.按钮主色/悬停状态mainColor: #D6000F, //主题色activeMainColor: #ab343c, //页面主标题色/重要文字/弹框标题色titleColor: #08121C, //默认字体色/二级信息字体色infoColor: #545454, //菜单列表背景色menuBackgroundColor:#BC485014,
2021-08-15 16:39:42
666
原创 笔记10:DOM
一、dom介绍+获取元素1. DOM介绍 文档对象模型(Document Object Model,简称DOM),是 W3C 组织推荐的处理可扩展标记语言(html或者xhtml)的标准编程接口。 W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。2. 获取元素 1)根据ID获取 document.getElementById(id) 2)根据标签名 document.getElementsByTagN
2021-07-05 18:52:33
49
原创 css文本溢出省略号显示
1、单行文本overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2、多行文本display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
2021-06-08 09:19:53
43
原创 11.vue项目架构
1、在线文档 https://vuex.vuejs.org/zh/guide/ 安装:npm install --save vuex2、理解 对vue应用中多个组件的共享状态进行集中式的管理(读/写)3、状态管理应用1)state:驱动应用的数据源2)view:以声明方式将state映射到视图3)actions:响应在view上的用户输入导致的状态变化(包含n个更新状态的方法)——函数4、多组件共享状态的问题1)多个视图依赖于同一状态2)来自不同视图的行为
2021-06-06 11:16:08
77
原创 4.表单绑定v-model
1、文本输入<input type="text v-model="username">2、单选按钮 <input type="radio" v-model="sex" vlaue="男"> <input type="radio" v-model="sex" vlaue="女">3、复选框1)单选复选框,设置布尔值 <p><span><input type="checkbox" v-model="isagree"&
2021-06-03 18:13:24
78
原创 3.vue事件处理
1、v-on 缩写@ <div v-on:click=""></div> <div @click=""></div>2、绑定监听1)不传入参数,默认传入事件event <div @click="btn"></div>2)传入参数,同时要传入事件event <div @click="btn(id,$event)"></div>2、修饰符1)停止冒泡 <div @clic
2021-06-03 16:14:28
100
原创 2.vue之列表数据渲染
1、列表添加数据 1) list.push(); //添加到列表最后 2)list.unshift() //添加到列表开头 3)list.splice(list.length,0,item)2、删除列表数据 1)list.splice(index,1); 2) list.filter(item=>{ return item.id!=id
2021-06-03 16:02:14
174
原创 art-template模板引擎
一、基础数据渲染,template(id, data) 1、引入art-template.js文件 <script src="template-debug.js"></script> 2、编写HTML模板 <script id="test" type="text/html"> <h1>{{title}}</h1> </script> 3、向模板插入数据,并输出到页面
2021-05-14 14:47:27
92
原创 对象转数组
1、Array.from(object) 1️⃣ object中必须有length属性,返回的数组长度取决于length长度 2️⃣ key 值必须是数值 //定义一个集合 let arrayLike = { '0': 'a', '1': 'b', '2': 'c',
2021-05-09 00:04:16
153
原创 笔记9:rem适配布局
1、基础 1)Rem是一个相对单位,相对于html的字体大小 2)如果整个页面很多地方用rem进行布局,只需要在不同屏幕下修改html的字体大小,那么整个页面都会同步变化2、媒体查询 1)媒体查询是css3语法,可以实现根据不同屏幕适配不同的样式 、 2)语法结构为:@media screen and (max-width:800px) {css样式} 注意点: 1、screen和and必须带上案例实现思路:案例1、根据页面宽度改变背景颜色1)按照从大到小的或者从小到大的
2021-04-29 19:26:41
139
原创 笔记8:响应式布局
1、响应式开发原理 1)就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 2)超小屏幕(手机):小于768px 3) 小屏幕设置(平板):768px~992px 4) 中等屏幕(桌面显示器):992~1200px 5) 大屏幕(pc大屏):大于1200px 1) 响应式是在不同的屏幕下来实现结构的不同 2)关键的是在不同的屏幕下改变版心的大小 3)然后在盒子在呈现在不同大小的版心里面 4) 原理就是在
2021-04-29 19:15:37
168
原创 笔记4:git使用
一、Git的使用(本地仓库)1. git使用前配置 在本地新建存储git项目文件夹,右击打开Git Bash Here,然后进行一下配置: (1)配置提交人姓名:git config --global user.name 提交人姓名 (2)配置提交人邮箱:git config --global user.email 提交人邮箱 (3)查看git配置信息:git config --list 注:(1)如果要对信息进行修改,重复上述命令 (2)配置只需执行一次2. 提
2021-04-22 19:20:07
48
原创 笔记3:HTML5新增标签
1. 新增语义标签:语义标签主要针对搜索引擎,移动端使用更多 (1)<header></header>:头部标签 (2)<nav></nav>:导航标签 (3)<article></article>:内容标签 (4)<section></section>:块级标签 (5)<aside></aside>:侧边栏标签 (6)<footer></footer&
2021-04-22 18:54:26
33
原创 笔记2:css命名
css属性命名ClassName的命名应该尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线 “_” 连接,.nav_top常用命名推荐注意:ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做ClassName,因为有些浏览器插件(Chrome的广告拦截插件等)会直接过滤这些类名,因此ClassName含义about关于account账户arrow箭头图标article文章aside边栏
2021-04-22 18:46:47
49
原创 笔记1:css书写规范
一、css属性书写顺序 1、布局定位属性:display/position/float/clear/visibility/overflow(建议display第一个写) 2、自身属性:width/height/margin/padding/border/background 3、文本属性:color/font/text-decoration/text-algin/white-space/break-word 4、其它属性:content/cursor/bo
2021-04-22 18:40:51
49
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人