Vue

使用moment插件對時間進行格式化（全局設置）

• 下載插件

npm install moment --save

• 在main.js中引入插件

import moment from ‘moment’

• 在main.js中定義全局過濾器

Vue.filter('dataFilter',function (dataStr,patten = 'YYYY-MM-DD HH:mm:ss') {return moment(dataStr).format(patten) });

• 在需要的地方引用

組件之間的應用：

富文本編輯器：

https://www.npmjs.com/package/vue-quill-editor

圖片顯示器（基于Vue）

https://www.jianshu.com/p/894f9b019831

HTML

行內元素

行內元素主要有：span a i
行內元素特征：
(1)設置寬高無效
(2)對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效
(3)不會自動進行換行

塊元素

塊狀元素主要有div，p、ul、li、ol、dl、dt、dd、nav等
塊狀元素特征：
(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標簽寫在一起，默認排列方式為從上至下

行內塊元素

行內塊狀元素主要有img input 等
行內塊狀元素特征：
(1)不自動換行
(2)能夠識別寬高

Js

CSS

清除浮動（單 雙偽元素清除浮動）

方法一單偽元素 .clx:after { content: "";display: block;height: 0;clear: both;visibility: hidden; } .clx {*zoom: 1; }方法二雙偽元素 .clearfix:before,.clearfix:after { content:"";display:table; } .clearfix:after {clear:both; } .clearfix {*zoom:1; }

偽元素（橫豎）

橫線 ul li:before{content: '';display: block;width: 64px;height: 1px;background-color: red;position: absolute;top:1px;left:6px;}豎線 ul li:after{content: '';display: block;width: 1px;height: 70px;background-color: red;position: absolute;top:8px;left:2px;}

關于邊框

• none：沒有邊框
• solid：邊框為單實線
• dashed：邊框為虛線
• dotted：邊框為點線

設置文字陰影（ text-shadow）

text-shadow是規定文本陰影的，第一個值是陰影的水平偏移量，第二個值是陰影的垂直偏移量，第三個值是模糊度，第四個值是陰影的顏色。

h1{ text-shadow: 5px 5px 5px #FF0000; }

消除鼠標點擊按鈕或文本框出現藍色邊框

解決鼠標點擊按鈕出現邊框button{outline:none;}

設置鼠標懸停圖片上特效

.dianqi-bot>ul>li{height: 360px;float: left;/*超出隱藏*/overflow: hidden; } .dianqi-bot ul li img{transition: all 1s; } /*對圖片懸浮時圖片向右移動*/ .dianqi-bot ul li img:hover{transform: translate(5px,0) }

盒子的圓角

border-radius:10px 20px 30px 40px; 50%正圓

鼠標變成手狀

使鼠標模擬手狀的屬性是：cursor:pointer

精靈圖的引入

background: url(011.png) no-repeat;background-position: -166px -69px ; 前者X軸 后者Y軸

關于文字過長超出用省略號

根據div的寬度自動換行 超過三行的部分用省略號代替

word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;

關于表格

width=“表格的寬度” height= “表格的高度” border= “表格的邊框” border-color= “表格邊框的顏色” bgcolor= “表格的背景色” cellspacing= “單元格與單元格之間的距離” cellpadding= “單元格與內容之間的距離” align=“left/ center/ right”水平對其方式 valign“top/ middle/ bottom”垂直對齊方式 rowspan=”2“ 跨行合并 colspan=”2“跨列合并

關于定位：

參照物是距離最近有定位的父元素

• 相對定位：
  position:relative;
• 絕對定位：（脫離標準文檔流）
  position: absolute;

關于偽類

偽類： :active 向被激活的元素添加樣式。 :hover 當鼠標懸浮在元素上方時，向元素添加樣式。 :link 向未被訪問的鏈接添加樣式。 :visited 向已被訪問的鏈接添加樣式。 :befoe偽元素 :after偽元素

查看電腦ip

查看電腦ip：ipconfig

總結

以上是生活随笔為你收集整理的开发常用代码笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。