weixin_43411214的博客

转载 CSS 文字特效

人生苦短，我用Python。

原创 css常见动画

【代码】css常见动画。

原创 css动画效果

1）定义单个动画@keyframes 动画名称{from{初始状态属性}to{结束状态属性}2）定义多个动画@keyframes 动画名称{0%{初始状态属性}50%{中间还可以再添加关键帧}100%{结束状态属性}

原创 利用jszip实现批量文件压缩下载

【代码】利用jszip实现批量文件压缩下载。

原创 本地创建服务器访问

【代码】本地创建服务器访问。

原创 js树过滤

/ 递归过滤得到每一项的hidden为false的数据。

原创 表单字段校验

【代码】表单字段校验。

原创 CSS学习内容

宽高为0，四个border值除bottom外其他均透明。

原创 值得收藏的JavaScript 语句

/ 5。

原创 JavaScript DOM 操作技术之动态脚本和动态样式

【代码】JavaScript DOM 操作技术之动态脚本和动态样式。

原创 js问号语法

attr获取object属性attr前先判断object是否存在，在object后面加上?，这是JavaScript的可选链语法。(这句代码的意思是，如果object恒等于null或者undefined时，取值为undefined,否则为object.attr。是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。该表达式的含义是 条件condition是真，则执行exprIfTrue ，否则执行exprIfFalse。

原创 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

原创 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 -

原创 页面渲染后再加载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){ .

原创 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

原创 获取本机ip

<script type="text/javascript"> window.sessionStorage.setItem('ip',returnCitySN["cip"])

原创 谷歌浏览器 CORS错误

原创 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

原创 vue父子组件通信数据双向绑定

一、方法1：通过v-model,子组件使用model绑定属性1.父组件中 //调用的子组件 <upload-img v-model="form.coverUrl" ></upload-img> <script> export default { data(){ return{ form:{ cove

原创 解决父组件在mounted/created 中调用子组件方法报错问题

1、问题父组件created、mounte调用子组件方法时，报错 created(){ this.$refs.previewRef.swiperInit(resultUrl, count); },2、解决方法使用定时器延时100ms调用子控件方法 mounted () { // 开启初始定时器 this.startTimeout=setTimeout(function(){ this.$refs.previewRef.swiperInit(

原创 vue+scss主题色切换

1、新建一个Scss文件_themes.scss，里面可以配置不同的主题配色方案$themes: ( Red: ( //整体主色调/菜单栏背景/图标.按钮主色/悬停状态mainColor: #D6000F, //主题色activeMainColor: #ab343c, //页面主标题色/重要文字/弹框标题色titleColor: #08121C, //默认字体色/二级信息字体色infoColor: #545454, //菜单列表背景色menuBackgroundColor:#BC485014,

原创 笔记10：DOM

一、dom介绍+获取元素1. DOM介绍 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。​ W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。2. 获取元素 1）根据ID获取 document.getElementById(id) 2)根据标签名 document.getElementsByTagN

原创 css文本溢出省略号显示

1、单行文本overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2、多行文本display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;

原创 5.vue组件间通信——vuex

1

原创 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)来自不同视图的行为

原创 5.vue组件间通信——插槽（slot）

1

原创 5.vue组件间通信——消息的订阅与发布（如：pubsub库）

1、

原创 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"&

原创 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

原创 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

原创 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、向模板插入数据，并输出到页面

原创 对象转数组

1、Array.from(object) 1️⃣ object中必须有length属性，返回的数组长度取决于length长度 2️⃣ key 值必须是数值 //定义一个集合 let arrayLike = { '0': 'a', '1': 'b', '2': 'c',

原创 笔记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）按照从大到小的或者从小到大的

原创 笔记8：响应式布局

1、响应式开发原理 1）就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 2）超小屏幕（手机）：小于768px 3) 小屏幕设置（平板）：768px~992px 4) 中等屏幕（桌面显示器）：992~1200px 5) 大屏幕（pc大屏）：大于1200px 1) 响应式是在不同的屏幕下来实现结构的不同 2)关键的是在不同的屏幕下改变版心的大小 3)然后在盒子在呈现在不同大小的版心里面 4) 原理就是在

原创 笔记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. 提

原创 笔记3：HTML5新增标签

1. 新增语义标签：语义标签主要针对搜索引擎，移动端使用更多 （1）<header></header>:头部标签 （2）<nav></nav>:导航标签 （3）<article></article>:内容标签 （4）<section></section>:块级标签 （5）<aside></aside>:侧边栏标签 （6）<footer></footer&

原创 笔记2：css命名

css属性命名ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接，.nav_top常用命名推荐注意：ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此ClassName含义about关于account账户arrow箭头图标article文章aside边栏

原创 笔记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

原创 移动端常见布局

一、流式布局（百分比布局）1、定义：流式布局，就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。max-width 最大宽度 （max-height 最大高度）min-width 最小宽度 （min-height 最小高度）2. 技术选型方案：我们采取单独制作移动页面方案技术：布局采取流式布局3.案例（京东）(1)设置视口标签以及引入初始化样式&l

原创 Nodejs+Express+Mysql+sequelize搭建后端接口

一、安装nodejs二、使用npm安装express、mysql、sequelize安装express#全局安装Expressnpm install Express -g#全局安装Express Generator Express项目生成工具npm install -g express-generator2、搭建Express项目通过express应用生成器可以快速创建一个应用#生成视图模板为 ejs的项目express --ejs MyPro#安装node依赖cd MyPro