Vue，html，Js前端總結
1 el-option須要 key字段，不然沒法編譯，須要value，不然報錯，Missing required prop: "value"
<el-select v-model="type" size="medium">
<el-option value="Daily">Daily</el-option>
<el-option value="Single rides">Single rides</el-option>
</el-select>javascript
2
$in使用 集合的方法
BasicDBList values = new BasicDBList();
for (int i=0;i<sgjb.length;i++){
values.add(sgjb[i]);
}
BasicDBObject in = new BasicDBObject("$in", values);css
BasicDBObject condition = new BasicDBObject();
BasicDBList dvs = new BasicDBList();
dvs.addAll(liftSensors);
BasicDBObject dvsObj = new BasicDBObject("$in", dvs);
condition.put("deviceId", dvsObj);
condition.put("interpolationTimestamp",new BasicDBObject("$lte",enddate).append("$gte",startdate));
condition.put("floor",statistic.getFloor());
condition.put("loadClass",new BasicDBObject("$in",getLoads(statistic.getLoadclasses())));//也能夠是int[]數組html
BasicDBObject resultFields=new BasicDBObject();vue
resultFields.put("xxxx",1);html5
Query query=new BasicQuery(condition.toJson(),resultFields.toJson());
List<JSONObject> jsons = mongoTemplate.find(query,JSONObject.class,dbName);java
3 npm 導入echarts的方法 import echarts from "echarts"node
4 scssreact
<style rel="stylesheet/scss" lang="scss" scoped>jquery
scss 能夠style 進行嵌套使用ios
5 openlayer功能
this.getMapLayer(this.mapname); //initdata //初始化鼠標位置（經緯度）控件 let _this = this; var mousePositionControl = new MousePosition({ //樣式類名稱 className: 'custom-mosue-position', //投影座標格式，顯示小數點後邊多少位 coordinateFormat: createStringXY(8), //指定投影 projection: 'EPSG:4326', //註釋下面兩行以得到鼠標的位置 //放在地圖上。 // 格式化鼠標座標位置數據 coordinateFormat: function(coord){ coord[0] = _this.switchMapLatLng(coord[0]); return _this.mousepositionformat(coord) }, //目標容器 target: document.getElementById('mouse-position') //undefinedHTML: ' ' }); //設置Map顯示參數 this.view = new View({ center: transform([2.35090256, 48.85705948],'EPSG:4326', 'EPSG:3857' ), zoom: 9, maxZoom: 18 }); // 建立地圖 this.map = new Map({ controls: defaultControls().extend([mousePositionControl]), layers: [ this.maplayer ], view: this.view, target: 'map' }); jQuery('#m_aside_left_minimize_toggle').click(e=>{ if(this.map){ this.map.updateSize(); } }) 包含了 根據名字獲取地圖底層功能 重寫左上角的經緯度功能 點擊按鈕 地圖大小更新重置功能
6 openlayer marker渲染和 單擊事件渲染，上面有對象則手狀鼠標顯示
for (var i = 0; i < this.locations.length; i++) {
var beach = this.locations[i];
let t = beach.fillLevelType;
var coordinates = transform([beach.lat, beach.lng],'EPSG:4326', 'EPSG:3857' );
var iconFeature = new Feature({
geometry: new Point(coordinates),
name: 'Null Island',
population: 4000,
rainfall: 500
});
iconFeature.setStyle([new Style({
image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: '../../../../../static/img/map/lift.png'
}))
})]);
iconFeature.set("type","loc");
features[i] = iconFeature;
// 給圖標添加新屬性
features[i].id = beach.locationid,
features[i].locationid = beach.locationid,
features[i].lifts = beach.lifts,
features[i].address = beach.address,
features[i].description = beach.description,
features[i].lat = beach.lat;
features[i].lng = beach.lng;
}
this.features = features;
var vectorSource = new VectorSource({
features: features
});
// 獲取VectorSource 裝載marker
this.markVectorSource = vectorSource;
var _this = this;
//聚合
var clusterSource = new Cluster({
distance: 20,
source: vectorSource
});
var styleCache = {};
this.loclayer = new VectorLayer({
source: clusterSource,
isBaseLayer:false,
style: function(feature) {
var size = feature.get('features').length;
var style = styleCache[size];
if(size > 1){
if (!style) {
let cc = ['#59ec18','#26272b'];
style = new Style({
image: new CircleStyle({
radius: 16,
stroke: new Stroke({
color: cc[0]
}),
fill: new Fill({
color: cc[0]
})
}),
text: new Text({
text: size+'',
fill: new Fill({
color: cc[1]
})
})
});
styleCache[size] = style;
}
}else if(size==1){
style = feature.get('features')[0].getStyle()
}else{
style = iconStyle;
}
return style;
}
});
this.map.addLayer(this.loclayer);
var coos=features.map(f=>{
return f.getGeometry().getCoordinates();
});
this.view.fit(boundingExtent(coos), this.map.getSize());
//關於地圖事件的方法
handleMapEvent(){
var _this = this;
//鼠標移動事件
this.map.on('pointermove',function(e) {
var pixel=_this.map.getEventPixel(e.originalEvent);
var feature=_this.map.forEachFeatureAtPixel(pixel,function (feature) {
return feature;
})
if(feature==undefined){
_this.map.getTargetElement().style.cursor="default"
}else{
_this.map.getTargetElement().style.cursor="pointer"
}
})
//鼠標點擊事件
this.map.on('click',e=>{
//在點擊時獲取像素區域
var pixel = _this.map.getEventPixel(e.originalEvent);
// 獲取點擊的圖標feature
var feature=_this.map.forEachFeatureAtPixel(pixel,function (feature) {
return feature;
})
if(feature==undefined){
return;
}else{
this.curLocation = feature.values_.features[0];
this.renderBins();
}
});
},
上面樣式用到數組由於能夠寫多個 圖片等等的樣式
8
<img src="static/img/rightaside.png"></div> 使用路徑能夠不用。。。。這些路徑
使用樣式時，用 大括號，同時能夠覆蓋已經存在的
style="margin-right:15px;" :style="{ 'margin-right':aaa }"
利用好絕對佈局，裏面用相對佈局
9 經緯度渲染方法
調用子組建的 方法
this.$refs.openlayer.switchMapLayer
切換三個地圖圖層的方法 三個圖層獲取的方法
getMapLayer(val){
switch (val) {
case "OpenStreetMap":
// openStreetMap地圖層
this.maplayer.setSource(new XYZ({
url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
}));
break;
case "BingMap":
// Bing地圖層
this.maplayer.setSource(new BingMaps({
key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
imagerySet: 'Road',
}));
break;
default:
// google地圖層
this.maplayer.setSource(new XYZ({
url:'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2sen-US!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0',
}));
break;
}
},
5 距離頂部位置
this.topDistance = window.innerHeight/2-20+'px';
top 只有在絕對佈局纔有意義
11 地圖保存user的方法
this.userid = this.$store.state.user.userid;
@Slf4j
@Api("Lift metering")
@RestController
@RequestMapping("/liftmetering")
public class LiftmeteringController {
@Autowired
LiftmeteringService liftmeteringService;
@ApiOperation(value = "查詢電梯的single ride", httpMethod = "POST", produces = "application/json")
@ApiResponse(code = 200, message = "success", response = ResponseBase.class)
@PostMapping(value = "/getSingleRide",produces = "application/json")
public ResponseBase getSingleRide(@RequestBody String params){
return liftmeteringService.getSingleRide(params);
}
6 定義設置路由
／／ 1、定義路由組件 const Foo={template:'<div>Hello Foo</div>'} const Bar={template:'<div>Hello Bar</div>'} ／／ 2、定義路由 const routes=[ {path:'/foo',component:Foo}, {path:'/bar',component:Bar} ] ／／ 3、建立router實例，而後傳routers配置 const router=new VueRouter({ routes //(縮寫)至關於 routes:routes }) ／／ 4、建立和掛載根實例。記得要經過router配置參數注入路由 const app=new Vue({ router }).$mount('#app') 定義 組件 定義 路由 定義 創建路由對象 創建vue，經過$mount掛載 經過 const創建常量
6 自定義指令
自定義指令 1、頁面載入時，input元素自動獲取焦點 <div id="app"> <input v-focus> </div> Vue.directive('focus',{ function(el){ el.focus() } }) new Vue({el:'#app'}) 2、指令參數 <div id="app"> <div v-lhf="{color:'red',text:'凌紅飛 😄'}"></div> </div> Vue.directive('lhf',function(el,binding){ el.innerHTML=binding.value.text el.style.backgroundColor=binding.value.color }) new Vue({el:'#app'}) 自動獲取焦點， 指令就是v-xxx的方式 中的xxx，採用directive，裏面爲 花括號和方法，可綁定當前對象和綁定的數據值
7 openlayer 開始引入的 類和方法
8 p.test {word-break:hyphenate;}
break-all 自適應 範圍
設置顏色的幾種方式
background-color:rgb(255,0,255);
border:1px solid rgb(112, 197, 236);
經過浮動 實現相對佈局的 橫向的div排列，用完最好clear:both
實現按鈕的自動切換
buttonclick(imgflg,func,params){
this.imgurl={
addlift:'a.png',
edit:'ddd.png',
}
if(imgflg=='addlift'){
this.imgurl.addlift='static/img/map/addliftsel.png';
}
if(imgflg=='edit'){
this.imgurl.edit='static/img/map/editsel.png';
}
if(imgflg=='delete'){
this.imgurl.delete='static/img/map/deletesel.png';
}
if(imgflg=='move'){
this.imgurl.move='static/img/map/movesel.png';
}
if(imgflg=='liftedit'){
this.imgurl.liftedit='static/img/map/lifteditsel.png';
}
if(imgflg=='liftlook'){
this.imgurl.liftlook='static/img/map/liftlooksel.png';
}
if(imgflg=='liftdelete'){
this.imgurl.liftdelete='static/img/map/liftdeletesel.png';
}
if(func){
func(params);
}
},
樣式表示爲手狀
cursor: pointer;
設置好看字體的方法
#app {
font-family: 'Open Sans',sans-serif,'Avenir', Helvetica, Arial, ;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
只在用google地圖加載時才動態加載的方法
created(){
//只在用google map時加載
if(!this.$store.state.isMapOl){
var script = document.createElement("script");
script.src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap';
document.getElementsByTagName('head')[0].appendChild(script);
var script2 = document.createElement("script");
script2.src='https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js';
document.getElementsByTagName('head')[0].appendChild(script2);
}
}
route的 前置 調用方法
router.beforeEach((to, from, next) => {
let flag = false;
if(store.state.token=='' || JSON.stringify(store.state.user)=='{}'){
let data = localStorage.getItem("storeParams");
if(data == null){
flag = true;
}else{
store.commit("loginUser",JSON.parse(data));
}
}
if (to.meta.requireAuth) {
if(flag) {
next({
path: '/Login',
query: {redirect: to.fullPath} // 將跳轉的路由path做爲參數，登陸成功後跳轉到該路由
})
}else{
if(from.query.redirect && from.query.redirect!= to.path){
next(from.query.redirect);
}else{
next();
}
}
}else {
next();
}
})
axios 返回時 的響應的 反應過濾器
axios.interceptors.response.use(res => {
if(res.data.code == 700 || res.data.code == 701
|| res.data.code == 702 || res.data.code == 703
|| res.data.code == 704 || res.data.code == 705
|| res.data.code == 706 || res.data.code == 708){
Vue.prototype.$message.error(res.data.msg);
store.commit("removeuser");
setTimeout(() => {
router.replace({path: "/Login"});
}, 500);
}
return res;
}, error => {
return Promise.reject(error)
})
axios請求數據時的請求頭，用來傳遞 token和userid
axios.interceptors.request.use(config => {
//設置請求頭
if(store.state.token) {
config.headers.Authorization = store.state.token;
config.headers.UserId = store.state.user.userid;
}
return config
}, error => {
return Promise.reject(error)
})
ES6學習
1 promise 作異步執行，有執行順序，先promise,而後hi，最後執行回調， 執行resolved
let promise = new Promise(function(resolve, reject) { console.log('Promise'); resolve(); }); promise.then(function() { console.log('resolved.'); }); console.log('Hi!');
3 圖片異步加載的例子，成功和失敗後分別執行的方法， resolve,reject new Promose(a,b=>{ ...}) function loadImageAsync(url) { return new Promise(function(resolve, reject) { const image = new Image(); image.onload = function() { resolve(image); }; image.onerror = function() { reject(new Error('Could not load image at ' + url)); }; image.src = url; }); }
4 Symbol 是一種新的數據類型
let s1 = Symbol('foo');
let s2 = Symbol('bar');
s1 // Symbol(foo)
s2 // Symbol(bar)
s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"
8 類數組轉爲真數組的方法，一種是es5，一種是es6
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
9 Array.of方法用於將一組值，轉換爲數組。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
10 判斷包含關係 includes方法
10 [1, 2, 3].includes(2);
1 typeof 用法 返回 number undefined(未定義),boolean,object(對象或者null) ,function（是個方法）,string, （若是是正則表達式之前是 function，如今都是object，無論別的，理解爲object是對象） typeof abc 2 Boolean的用法 js 可轉換是0則false，是'0' 則true abc='0' "0" abc=Boolean(abc); true abc=0 0 abc=Boolean(abc); false 3 數組 歸併 下面例子是累加,reduceRight是從右邊開始累加，效果同樣 abc=[1,2,3] def=abc.reduce((prev,cur,index,arr)=>{return prev+cur}) 4 數組的迭代方法： 全部的遍歷都是三個參數 item,index,array every 若是數組遍歷返回值都符合條件纔等於true some 是若是變量一個符合條件就是true forEach 是遍歷，可是沒有返回值 filter 遍歷 返回爲true的自成一個數組，過濾功能，符合條件才行這個用的最多 map 無論成不成功，都返回每次遍歷的結果 5 位置的方法 indexOf/lastIndexOf 6 反方向排序的方法 [].reverse() [].sort(),是排序，不是反方向排序， 自動調用每一個元素的 .toString(),哪怕是數組也會自動調用致使 10會在5後面[1,10,20,5] 7 檢測數組的方法 aaa instanceof Array 第二個方法 Array.isArray(aaa); 8 其餘方法 toString,toLocalString,valueOf 都是返回數組 都好分割字符串 push,pop 獲取最後一項，並把原來數組減少1位 shift，是取得第一項，而後數組自動少1爲，前移 unshift，是添加數組從最開始位置插入數據，切記 slice(1),從第一位到後面全部 slice(1,4), 從第一位到第3位(4-1)，不包括邊界 splice表示刪除數組，返回值是 被刪除數組，原來的數組 被真正的改變 插入，就是splice(2,0,'red')，中間0表示刪除0個數，就不刪除，從第二位添加red
1 js內存佔用溢出
若有匿名函數的話，裏面引用了 html標籤，若是 element=getelementbyid(xxx),element.inclick=>{alert(element.id);}，就不釋放
須要改成 myid= element.id,在裏面 onclick=>{alert(myid)}
2 返回符合條件的css對象，包括 .class,#id,div 標籤等等
下面是返回第一個，all的是返回全部的標籤元素
document.querySelector('div')
<div id="MathJax_Message" style="display: none;"></div>
document.querySelectorAll('div')
3 progress id value max屬性，標籤內能夠設置文字
4 支持文件系統的判斷，操做磁盤
webkitRequestFileSystem 谷歌只支持這個
requestFileSystem
webkitRequestFileSystem是個函數
出錯採坑
1 // stack: (ls+'').replace('top',''),
影響到了數據展現
2
Long.parseLong(j.getString("firstRideTimeS
integer沒法paser long的字符串
4 出錯由於 須要相同時間才能合併，須要 除以75秒的時間75*1000,同時 獲取和存儲都要改，
不然會不起做用
5 寫錯的緣由是 parseFloat(參數是數組，不是字符串)致使結果爲Nan
elementui 2.11無限滾動的方法
v-infinite-scroll="load"
load () {
this.count += 2
}
1 返回毫秒數
Date.now();
或者 +new Date()
2 正則表達式
exp=/pattern/flag
flag :i 忽略大小寫
g:全局
m:匹配多行
[ab]c []匹配其中之一
想匹配.用 \.
第二個方式 new RegExp('abc','igm')
屬性有 a=/bc/i
a.global,a.ignoreCase,a.multiline
1 語法糖就是縮寫
v-bind :
v-on @
v-bind主要的功能是 綁定屬性
Vue.use(xxx)，使用插件
Vue.use(xxx,(res,rej)=>{xxxxx})
通常插件定義是
Myplugininstall xxxxx{
Vue.componentxxxx
Vue.mixinxxx代碼混合
}
3 先後端分離由於 還要學java， 通常都是後端路由，好處是 歌曲播放可是 能夠跳轉頁面
4 v-if v-show
if是真正的 建立銷燬，show是css的樣式切換
if用於不場邊的，show用於常變的，消耗小
5 class 類的綁定
<div :class="{'active':true}"/div>
isactive是變量
能夠有多個值，逗號隔開， 可計算 用data,computed, methods
7 修飾符
v-model.lazy 只有 enter或失去焦點（change） 纔會真改變
{{xxxxx}}
v-model.number，自動把 string轉爲number
8 跨多級的 傳遞數據
向上 給多級父類傳 $dispatch()
向下，給孫子傳 $broadcast()
9 動態創建組件
<component :is="abc"/>
10 異步組件
Vue.component('xxx',(res,rej)=>{
根據邏輯 res(xxxxxx)
})
11 $nextTick異步更寫隊列
原理是 若是循環100，不用渲染100次，都放在隊列裏，執行完了，當時取值是尚未呢，因此須要到最後渲染完了才能夠執行
v-if xxxxxx
document.getElenet(xxx)是空的
用 this.$nextTick(function(){xxxxxxxxxxxxxxxxxxx})
12 x-template,
太多的行就用這個，
<script type="text/x-template" id=xxxx/》
id其實就是組件了
1 vant
安裝vue 腳手架
npm install -g @vue/cli 建立項目 建立時可選擇 默認仍是人工手動選擇組件，比較耗時 vue create vantproj vue ui（命令的做用？？？）3.0新加的功能，能夠建立項目，目前主要是添加組件，全局安裝？反正失敗了，或者新導入項目，在某一個項目內安裝把 依賴，安裝依賴 vant 手動安裝 vant npm i vant -S 啓動命令已經變成了 對應着 npm run serve "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" 安裝插件，這個目的是若是是 import 的方式會自動改成 按需引入的方式 官網例子都是這個方式，因此仍是引入這個把 npm i babel-plugin-import -D import { Button } from 'vant'; 上面是第一種方式， 第二種方式，手動引入 import Button from 'vant/lib/button'; import 'vant/lib/button/style'; 第三種方式：，引入全部的組件 import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 第四種方式，cdn <!-- 引入樣式 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css"> <!-- 引入組件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script> <script> var Vue = window.Vue; var vant = window.vant; // 註冊 Lazyload 組件 Vue.use(vant.Lazyload); // 調用函數式組件 vant.Toast('提示'); </script> 引用button import Vue from 'vue'; import { Button } from 'vant'; Vue.use(Button); import 'vant/lib/index.css'; 必需要引入樣式，否則失效 <van-button type="primary">主要按鈕</van-button> <van-button type="info">信息按鈕</van-button> <van-button type="warning">警告按鈕</van-button> <van-button type="danger">危險按鈕</van-button>
設計到開發工具和 發佈app的方法，工具快速
uniapp
https://uniapp.dcloud.io/quickstart
1 html5 canvas
保存當前畫圖和恢復，保存後再畫 用restore能夠恢復，都沒有參數
save restore
2 canvas.toDataURL('image/jpeg') type 返回會保存爲 圖片 是這個格式
data:image/png;ivassssxxx
1 vue 基礎 組件漸變效果，使用transition 同時有 css樣式，指定了漸變類型 可設置多種動畫 <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } 2 混入 mixins a: // 定義一個混入對象 var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // 定義一個使用混入對象的組件 var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // => "hello from mixin!" 定義，賦值給新的，新建新的， b: 選項合併，就是若是格式相同的就能夠合在一塊兒，包括同名的數組，屬性也會覆蓋 var mixin = { data: function () { return { message: 'hello', foo: 'abc' } } } new Vue({ mixins: [mixin], data: function () { return { message: 'goodbye', bar: 'def' } }, created: function () { console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" } } }) c: 鉤子函數就是create會合並，可是先執行之前的，再執行如今的 d: 也能夠全局混入不過要當心 https://cn.vuejs.org/v2/guide/mixins.html
12
1 vue的學習 cnd 開發和生產環境的cdn <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 或者： <!-- 生產環境版本，優化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> 2 手動控制檯命令調試 var app3 = new Vue({ el: '#app-3', data: { seen: true } }) 控制檯輸入 app3.seen=false，就會消失，只限於 是new出來的vue的頁面 3 很是強大的 在線編輯器 scrimba.com https://scrimba.com/p/pXKqta/cEQVkA3 4 全局組件的例子 定義了三個部分，全局組件，div和組件使用，定義vue Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '隨便其它什麼人吃的東西' } ] } }) <div id="app-7"> <ol> <!-- 如今咱們爲每一個 todo-item 提供 todo 對象 todo 對象是變量，即其內容能夠是動態的。 咱們也須要爲每一個組件提供一個「key」，稍後再 做詳細解釋。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item> </ol> </div> Vue.component('todo-item', { // todo-item 組件如今接受一個 // "prop"，相似於一個自定義特性。 // 這個 prop 名爲 todo。 props: ['todo'], template: '<li>{{ todo.text }}</li>' }) 5 訪問默認原始的dom event，若是沒有 參數，默認加上event functtion(event){}，使用時不傳就能夠了 event.target.name 若是兩個參數就傳 abc('aaa',$event),第二個參數就是原生的 例如禁止傳遞 if (event) event.preventDefault()； 6 .prevent 本身的說法，官方看不懂 <a href="https://www.baidu.com" @click.prevent="goBaidu">去百度</a> 這個會阻止 跳轉到百度，組織默認行爲 .stop 這個防止冒泡，舉個例子，只點本身的，上的button事件不觸發 例子包括了兩個意思 <div v-on:click="show(msg,$event)"> <button v-on:click.stop="show(msg,$event)">點擊我</button> <a href="https://www.baidu.com" v-on:click.prevent.stop="show(msg,$event)">百度</a> </div> <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div> 只觸發自身 只點擊一次生效 <!-- 點擊事件將只會觸發一次 --> <a v-on:click.once="doThis"></a> 這個提高了移動端的性能 <div v-on:scroll.passive="onScroll">...</div> 這個 .passive 修飾符尤爲可以提高移動端的性能。 7 提供了按鍵修飾符，不介紹了 .enter .tab .delete (捕獲「刪除」和「退格」鍵) .esc .space .up .down .left .right 還能夠全局的自定義配置鍵，例如配置f1 // 可使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 四大修飾符仍是案件 不解釋具體看文檔 https://cn.vuejs.org/v2/guide/events.html .ctrl .alt .shift .meta 鼠標按鍵中的左中右 .left .right .middle 加這個爲了 讓方法只作邏輯，dom處理讓vue本身處理 9 任何子組件均可以調用根組件的數據和方法data methods $root $root.abc() 還有個父組件 $parent 屬性能夠用來從一個子組件訪問父組件的實例 就是訪問父組件有時候失控，不怕有多個父組件嗎 而後父組件訪問子組件的方法 <base-input ref="usernameInput"></base-input> this.$refs.usernameInput.focus() 配合使用 加上個$refs就能夠了，還能夠給他定義方法 有時候會用上三個偏僻的api 10 經過 $on(eventName, eventHandler) 偵聽一個事件 經過 $once(eventName, eventHandler) 一次性偵聽一個事件 經過 $off(eventName, eventHandler) 中止偵聽一個事件 在有些場景能夠碰到 還有個冷門的，若是 只渲染一次就固定下來的話 <div v-once> <h1>Terms of Service</h1> ... a lot of static content ... </div>
1 vscode 安裝vue插件 Vetur 左側框最後一個能夠安裝插件 2 route 引入用 js文件的方式 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 而後是route-link的用法，to 指向路由定義的path 定義都用 const，常規寫法，定義路由數組，有path和component屬性，自己也是組件 而後掛載這個數據結構到 vue上,routes,es6的寫法， route是當前路由,this.$router帶r是訪問路由器 this.$route.params.username this.$router.push()/go <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] const router = new VueRouter({ routes // (縮寫) 至關於 routes: routes }) 3 router的函數 <router-link :to="...">和 這個router.push(...)一個意思 4 所謂動態路由就是路徑上有變量,這樣複用路由顯得高效 後面參數是 $route.params={xxxx}，但存在問題，生命週期鉤子不調用，須要有兩種方式，都是做用於組件的一個是,添加watch ，監聽 $route，第二個是 befroeRouteUpdate 頗有用，記得調用call next beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() } const User = { template: '...', watch: { '$route' (to, from) { // 對路由變化做出響應... } } } /user/:username /user/evan { username: 'evan' } /user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: '123' } 還有 route.hash,route.query的用法 5 若是匹配路徑不匹配須要，重定向到404，能夠用，星號，記得有順序，*好在最後面，push一個路由，就會給 $route.params.pathMatch 添加一條屬性 還有高級路由匹配正則，通常用不上 vue-router 使用 path-to-regexp 做爲路徑匹配引擎。 { // 會匹配以 `/user-` 開頭的任意路徑 path: '/user-*' }
es6的用法
1 字符串模板
用 `` 能夠單行， 多行，變量
`aaa'\n' sss`不影響換行有轉義字符，同時能夠用變量
var name=aaa; ` ${name} is name`
2 類數組的使用 for循環中用of便可
for(var i of document.getElementsByTagName('div')){console.log(i)}
1 vue的模式 hash模式很醜 history模式好看，正確用法 const router = new VueRouter({ mode: 'history', routes: [...] }) 對應代碼的修改 nginx若是沒有則跳轉到 index.html location / { try_files $uri $uri/ /index.html; } 原生的nodejs 主要就是這句 err xxxxx const http = require('http') const fs = require('fs') const httpPort = 80 http.createServer((req, res) => { fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { console.log('We cannot open "index.htm" file.') } res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) }) }).listen(httpPort, () => { console.log('Server listening on: http://localhost:%s', httpPort) }) 2 命名視圖 能夠寫多個router-view <router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view> 就是同一個錄下就dinginess多個 組件 也就是 除了 有component屬性還有 components屬性， 用此方法能夠代替嵌套子路由組件 { path: '/login', name: 'Login', component: () => import('@/views/login') }, const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] { path: '/settings', // 你也能夠在頂級路由就配置命名視圖 component: UserSettings, children: [{ path: 'emails', component: UserEmailsSubscriptions }, { path: 'profile', components: { default: UserProfile, helper: UserProfilePreview } }] }
3 js對象連續賦值方法，路由改變後後調用方法 this.error = this.post = null created () { // 組件建立完後獲取數據， // 此時 data 已經被 observed 了 this.fetchData() }, watch: { // 若是路由有變化，會再次執行該方法 '$route': 'fetchData' }, 路由改變前就發生變化就 beforeRouteEnter (to, from, next) { getPost(to.params.id, (err, post) => { next(vm => vm.setData(err, post)) }) }, // 路由改變前，組件就已經渲染完了 // 邏輯稍稍不一樣 beforeRouteUpdate (to, from, next) { this.post = null getPost(to.params.id, (err, post) => { this.setData(err, post) next() }) },
html5 知識總結：
1 article 代替div 表示 獨立的模塊
2 aside 表示對article的輔助
3 video 標籤 屬性 src="*xxx.ogg" controls="controls" 標識有控制器。視頻格式 有ogg
4 audio 表示音頻， src xxx.wav, 我是歌曲</audio>
5 h5的 純數字的表示方法 input required 表示 必須驗證， pattern="\w.*&"
若是取消驗證 整個form novalidate="true"，如取消單個表單使用 formnovalidate 只取消當前行
CSS3 的選擇器的學習
1 border-radius: 25px 圓角 25像素 2 添加 邊框陰影 box-shadow: 10px 10px 5px #888888; 3 添加邊框圖片 border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* Opera */ 4 Css3屬性選擇器 屬性選擇器： 和jquery相似， 包括徹底相等， 開頭相等，結尾相等， 模糊中間匹配 [attr] [attr=value] [attr^=value] //css3 [attr$=value] //css3 [attr~=value] ~~ [title~="foo2"] 匹配 <a title="foo1 foo2 foo3"> 可用[attr*=value]實現同等的選擇效果 結構性僞類選擇器： 根元素， 是否不包含某一個元素， 爲空 :root //根元素 :not() // #box :not(h1) :empty 子元素修飾符， 第一個最後一個，第多少個，倒數第多少個 奇數時 odd， 偶數時even個 :first-child // ul#nav li:first-child 選擇做爲第一個子元素的li :last-child // ul#nav li:last-child 選擇做爲最後一個子元素的li :nth-child(n) // ul#nav li:nth-child(2){} 選擇做爲第二個子元素的li :nth-last-child(n) // ul#nav li:nth-last-child(2) 選擇做爲倒數第2個子元素的li :nth-child(odd) // ul#nav li:nth-child(odd) 選擇序號爲奇數的子元素且元素標籤爲li :nth-child(even) 狀態僞類選擇器，懸停，激活，聚焦，可用，不可用，制度，可讀寫（） :hover :active :focus :enable :disable :read-only :read-write 用於單選框，複選框的， 沒選中，選中， 臨時狀態就是第一次剛進來的啥都沒有的狀態,元素處於選中時的狀態 :default //未選取狀態 :checked //選取狀態 :indeterminate //頁面剛打開 無指定的狀態 ::selection //元素處於選中狀態時的樣式 對象選擇器， 後標籤的前面位置，前標籤的後的位置，本身來體會，和content一塊來使用把。 :after //指代元素結束標籤前的位置 :before //指代元素開始標籤後的位置 p:after{content:"..."} p:before{ content: "fe dev" } p:after { content: none; } p:after{ content: url('tuijian.png'); } img:after { content: attr(alt); } //將圖像alt屬性的值 做爲content的值
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局。 彈性子元素一般在彈性盒子內一行顯示。默認狀況每一個容器只有一行。 如下元素展現了彈性子元素在一行內顯示，從左到右: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>FLEX</title> <style> .flex-container { display: flex; flex-direction: row; flex-wrap: wrap; width: 1200px; height: 640px; background-color: lightsteelblue; } .flex-container .flex-item { width: 320px; height: 240px; margin: 10px; background-color:lightsalmon; } </style> </head> <body> <div class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div> </body> </html> 4、CSS3 彈性盒子經常使用屬性 屬性 描述 flex-direction 指定彈性容器中子元素排列方式 flex-wrap 設置彈性盒子的子元素超出父容器時是否換行 flex-flow flex-direction 和 flex-wrap 的簡寫 align-items 設置彈性盒子元素在側軸（縱軸）方向上的對齊方式 align-content 修改 flex-wrap 屬性的行爲，相似 align-items, 但不是設置子元素對齊，而是設置行對齊 justify-content 設置彈性盒子元素在主軸（橫軸）方向上的對齊方式 1. flex-direction 屬性 決定項目的方向。 注意：若是元素不是彈性盒對象的元素，則 flex-direction 屬性不起做用。 .flex-container { flex-direction: row | row-reverse | column | column-reverse; } 屬性值 值 描述 row 默認值。元素將水平顯示，正如一個行同樣。 row-reverse 與 row 相同，可是以相反的順序。 column 元素將垂直顯示，正如一個列同樣。 column-reverse 與 column 相同，可是以相反的順序。 2. flex-wrap 屬性 flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。 值 描述 nowrap 默認值。規定元素不拆行或不拆列。 wrap 規定元素在必要的時候拆行或拆列。 wrap-reverse 規定元素在必要的時候拆行或拆列，可是以相反的順序。 .flex-container { flex-wrap: nowrap | wrap | wrap-reverse; } 能夠取三個值： （1） nowrap (默認)：不換行。 （2）wrap：換行，第一行在上方。 （3）wrap-reverse：換行，第一行在下方。 3. flex-flow 屬性 flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。 .flex-container { flex-flow: <flex-direction> <flex-wrap> } 4. align-items屬性 align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。 值 描述 stretch 默認值。項目被拉伸以適應容器。 center 項目位於容器的中心。 flex-start 項目位於容器的開頭。 flex-end 項目位於容器的結尾。 baseline 項目位於容器的基線上。 5. justify-content屬性 justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。 值 描述 flex-start 默認值。項目位於容器的開頭。 flex-end 項目位於容器的結尾。 center 項目位於容器的中心。 space-between 項目位於各行之間留有空白的容器內。 space-around 項目位於各行以前、之間、以後都留有空白的容器內。 5、彈性子元素屬性 屬性 描述 order 設置彈性盒子的子元素排列順序。 flex-grow 設置或檢索彈性盒子元素的擴展比率。 flex-shrink 指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大於容器的時候纔會發生收縮，其收縮的大小是依據 flex-shrink 的值。 flex-basis 用於設置或檢索彈性盒伸縮基準值。 flex 設置彈性盒子的子元素如何分配空間。 align-self 在彈性子元素上使用。覆蓋容器的 align-items 屬性。 1. order屬性 .flex-container .flex-item { order: <integer>; } <integer>：用整數值來定義排列順序，數值小的排在前面。能夠爲負值，默認爲0。 2. flex-grow屬性 .flex-container .flex-item { flex-grow: <integer>; } <integer>：一個數字，規定項目將相對於其餘靈活的項目進行擴展的量。默認值是 0。 3. flex-shrink屬性 .flex-container .flex-item { flex-shrink: <integer>; } <integer>：一個數字，規定項目將相對於其餘靈活的項目進行收縮的量。默認值是 1。 4. flex-basis屬性 .flex-container .flex-item { flex-basis: <integer> | auto; } <integer>：一個長度單位或者一個百分比，規定元素的初始長度。 auto：默認值。長度等於元素的長度。若是該項目未指定長度，則長度將根據內容決定。 5. flex屬性 flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間。 flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。 .flex-container .flex-item { flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; } 值 描述 flex-grow 一個數字，規定項目將相對於其餘元素進行擴展的量。 flex-shrink 一個數字，規定項目將相對於其餘元素進行收縮的量。 flex-basis 項目的長度。合法值："auto"、"inherit" 或一個後跟 "%"、"px"、"em" 或任何其餘長度單位的數字。 auto 與 1 1 auto 相同。 none 與 0 0 auto 相同。 initial 設置該屬性爲它的默認值，即爲 0 1 auto。 inherit 從父元素繼承該屬性。 6. align-self屬性 .flex-container .flex-item { align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit; } 值 描述 auto 默認值。元素繼承了它的父容器的 align-items 屬性。若是沒有父容器則爲 "stretch"。 stretch 元素被拉伸以適應容器。 center 元素位於容器的中心。 flex-start 元素位於容器的開頭。 flex-end 元素位於容器的結尾。 baseline 元素位於容器的基線上。 initial 設置該屬性爲它的默認值。 inherit 從父元素繼承該屬性。
比較牛人總結 css變形和動畫的效果例子
那麼這三個東西實際上是幹什麼用的呢？我按我本身的理解來下個簡單結論。 transform：把元素變形； transition：元素的屬性變化時，給他一個過渡的動畫效果； animation：作複雜動畫。 下面來詳細地說一下。 首先要說的是transform的語法： 1 transform:none | transform-functions ; none是他的默認值，後面的transform-functions指的是變形函數； 變形函數分兩種：2D和3D；// 相關語法能夠在http://www.w3school.com.cn/cssref/pr_transform.asp查詢 其中2D的包括：（變形的以元素中心爲基準，即X軸和Y軸的50%處） translate() //包括translateX() 和 translateY(); 做用：根據XOY座標來移動元素（X方向右邊爲正，Y方向下邊爲正）； scale() //包括scaleX() 和 scaleY(); 做用：放大或者縮小元素； rotate() // 做用：旋轉元素； skew() // 包括 skewX() 和 skewY(); 做用：讓元素傾斜。 而3D的就多了Z軸，相關語法能夠在W3C查到，這裏重點推薦張鑫旭大神寫的一篇文章 （http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/） ，對於變形的講解通俗易懂。對於文章裏面說到的語法能夠搭配後面這個模擬器來配合食用,效果更佳~ (http://fangyexu.com/tool-CSS3Inspector.html ) 我來總結幾個點：1、進行3D變形時，變形的元素外面要先包兩層標籤 一個做爲舞臺，一個做爲容器。 1 2 3 4 5 舞臺 容器 元素 元素 ... //我我的的理解是,若是舞臺上的元素被當作一個總體來看待的話,能夠只加一層標籤,即把舞臺看做容器 1 2 3 4 舞臺(容器) 元素 元素 ... 2、在舞臺的CSS上，設置 perspective （視距），意思就是假設人離舞臺的距離。在容器的CSS上設置 transform-style: preserve-3d 來開啓3D視圖，讓容器的子元素在3D空間中呈現。 //若是把舞臺當作容器的話,perspective 和 transform-style 就寫在一塊兒。 那麼，是否是變形的基點只能是元素的中心呢？不是的。 transform-origin屬性能夠改變變形的基點。 transform-origin的關鍵字通常的就 top / bottom / left / right / center / top left / top right 之類的啦你們都熟，其中的某些單個關鍵字實際上是簡寫，例如 top = top center = center top ； 接着就是過渡動畫 transition。 觸發條件是 :hover / :focus / :active / :checked / JS中的事件 語法： transition: 指定過渡的CSS屬性 、 過渡所需時間 、 過渡的函數（動畫的速度控制） 、 開始的延遲時間 指定過渡的CSS屬性：all / 指定樣式 / none （若省略不寫，則爲 all ，none通常用於清空動畫） 過渡所需時間：單位s / ms （默認爲0） 過渡的函數： ease（由快到慢 默認值） / linear（勻速） / ease-in（加速） / ease-out（減速） / ease-in-out（先加速後減速）/ cubic-bezier（三次貝塞爾曲線） 具體細微差異能夠到 http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp 模擬哦~ 延遲時間：單位s / ms （默認爲0） （寫transition的時候，先寫 動畫時間 ， 再寫延遲時間） 舉個例子吧，博雅今年秋招的筆試題： 用 CSS3 實現一個半徑25px的圓 進行速度由快到慢的300px滾動。 1 2 div{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;} div:active{ transform:translateX(300px) rotate(780deg);} 賊簡單吧~ 這裏有幾個細節，第一個就是 transition 是放在元素上，而不是 active 上，若是放在active上，就沒有回去的動做了，你們能夠試一下。 第二個就是，transform多個屬性的時候，中間用空格來隔開，若是用逗號的話就沒反應了。 但若是我在 :active 上加上 transition， 1 div{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}<br>div:active{ transform:translateX(300px) rotate(780deg);transition:2s ease-in;} 這樣按住的時候，就會執行 active 裏面的transition，也就是去的時候用時 2s ，加速運動；而回來的時候執行 div 裏的transition ，用時1s 減速運動。 最後就到 animation 了~ animation也是作動畫的，不過功能比 transition 更增強大，由於animation能夠控制動畫的每一步，而transition只能控制開頭和結尾。 語法 animation: 關鍵幀動畫名字 、 動畫時間 、 動畫播放方式（函數） 、 延遲時間 、 循環次數 、 播放方向 、 播放狀態 、 動畫時間外的屬性 ； 關鍵幀動畫名字：就是你要執行的動畫的名字，這裏要先知道關鍵幀的語法 1 2 3 4 5 6 7 8 9 10 11 @keyframes name{ 0%{ ... } 50%{ ... } 100%{ ... } } 這裏的關鍵幀的名字就是name ，而後百分比的就是動畫的進度，能夠根據須要設置不一樣的百分比，再設置不一樣的動畫。 動畫時間：和transition同樣~ 動畫播放方式（函數）：和transition的過渡的函數同樣~ 延遲時間：和transition同樣~ 循環次數：動畫播放的次數，默認爲1，一般爲整數，若是爲 infinite，則無限次地播放； 播放方向：默認爲normal，就是正常地向前播放，還有一個值是 alternate ，就是先正向播放，再反向播放，不斷地交替； 播放狀態：running(默認) 、 paused // 像播音樂同樣能夠經過動做來暫停動畫; 動畫時間外的屬性: none(默認) 、 forwards 、 backwards 、both； 舉個例子吧： 1 2 3 4 5 6 @keyframes color{ 0%{ background:yellow} 100%{ background:blue} } div{ background:black} none： 動畫開始前：黑 ； 動畫結束後：黑 forwards： 動畫開始前：黑 ； 動畫結束後：藍 backwards： 動畫開始以前：黃 ； 動畫結束後：黑 both： 動畫開始前：黃 ； 動畫結束後：藍 就是這麼簡單~
那麼這三個東西實際上是幹什麼用的呢？我按我本身的理解來下個簡單結論。
transform：把元素變形；
transition：元素的屬性變化時，給他一個過渡的動畫效果；
animation：作複雜動畫。
下面來詳細地說一下。
首先要說的是transform的語法：
|
1
|
transform:
none
| transform-functions ;
|
none是他的默認值，後面的transform-functions指的是變形函數；
變形函數分兩種：2D和3D；// 相關語法能夠在http://www.w3school.com.cn/cssref/pr_transform.asp查詢
其中2D的包括：（變形的以元素中心爲基準，即X軸和Y軸的50%處）
translate() //包括translateX() 和 translateY(); 做用：根據XOY座標來移動元素（X方向右邊爲正，Y方向下邊爲正）；
scale() //包括scaleX() 和 scaleY(); 做用：放大或者縮小元素；
rotate() // 做用：旋轉元素；
skew() // 包括 skewX() 和 skewY(); 做用：讓元素傾斜。
而3D的就多了Z軸，相關語法能夠在W3C查到，這裏重點推薦張鑫旭大神寫的一篇文章 （http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/） ，對於變形的講解通俗易懂。對於文章裏面說到的語法能夠搭配後面這個模擬器來配合食用,效果更佳~ (http://fangyexu.com/tool-CSS3Inspector.html )
我來總結幾個點：一、進行3D變形時，變形的元素外面要先包兩層標籤 一個做爲舞臺，一個做爲容器。
|
1
2
3
4
5
|
舞臺
容器
元素
元素
...
|
//我我的的理解是,若是舞臺上的元素被當作一個總體來看待的話,能夠只加一層標籤,即把舞臺看做容器
|
1
2
3
4
|
舞臺(容器)
元素
元素
...
|
二、在舞臺的CSS上，設置 perspective （視距），意思就是假設人離舞臺的距離。在容器的CSS上設置 transform-style: preserve-3d 來開啓3D視圖，讓容器的子元素在3D空間中呈現。 //若是把舞臺當作容器的話,perspective 和 transform-style 就寫在一塊兒。
那麼，是否是變形的基點只能是元素的中心呢？不是的。 transform-origin屬性能夠改變變形的基點。
transform-origin的關鍵字通常的就 top / bottom / left / right / center / top left / top right 之類的啦你們都熟，其中的某些單個關鍵字實際上是簡寫，例如 top = top center = center top ；
接着就是過渡動畫 transition。
觸發條件是 :hover / :focus / :active / :checked / JS中的事件
語法： transition: 指定過渡的CSS屬性 、 過渡所需時間 、 過渡的函數（動畫的速度控制） 、 開始的延遲時間
指定過渡的CSS屬性：all / 指定樣式 / none （若省略不寫，則爲 all ，none通常用於清空動畫）
過渡所需時間：單位s / ms （默認爲0）
過渡的函數： ease（由快到慢 默認值） / linear（勻速） / ease-in（加速） / ease-out（減速） / ease-in-out（先加速後減速）/ cubic-bezier（三次貝塞爾曲線）
具體細微差異能夠到 http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp 模擬哦~
延遲時間：單位s / ms （默認爲0）
（寫transition的時候，先寫 動畫時間 ， 再寫延遲時間）
舉個例子吧，博雅今年秋招的筆試題：
用 CSS3 實現一個半徑25px的圓 進行速度由快到慢的300px滾動。
|
1
2
|
div{
width
:
50px
;
height
:
50px
; border-radius:
25px
;
background
:
#000
; transition:
1
s ease-out;}
div:active{ transform:translateX(
300px
) rotate(
780
deg);}
|
賊簡單吧~ 這裏有幾個細節，第一個就是 transition 是放在元素上，而不是 active 上，若是放在active上，就沒有回去的動做了，你們能夠試一下。
第二個就是，transform多個屬性的時候，中間用空格來隔開，若是用逗號的話就沒反應了。
但若是我在 :active 上加上 transition，
|
1
|
div{
width
:
50px
;
height
:
50px
; border-radius:
25px
;
background
:
#000
; transition:
1
s ease-out;}<br>div:active{ transform:translateX(
300px
) rotate(
780
deg);transition:
2
s ease-in;}
|
這樣按住的時候，就會執行 active 裏面的transition，也就是去的時候用時 2s ，加速運動；而回來的時候執行 div 裏的transition ，用時1s 減速運動。
最後就到 animation 了~ animation也是作動畫的，不過功能比 transition 更增強大，由於animation能夠控制動畫的每一步，而transition只能控制開頭和結尾。
語法 animation: 關鍵幀動畫名字 、 動畫時間 、 動畫播放方式（函數） 、 延遲時間 、 循環次數 、 播放方向 、 播放狀態 、 動畫時間外的屬性 ；
關鍵幀動畫名字：就是你要執行的動畫的名字，這裏要先知道關鍵幀的語法
|
1
2
3
4
5
6
7
8
9
10
11
|
@keyframes name{
0%
{
...
}
50%
{
...
}
100%
{
...
}
}
|
這裏的關鍵幀的名字就是name ，而後百分比的就是動畫的進度，能夠根據須要設置不一樣的百分比，再設置不一樣的動畫。
動畫時間：和transition同樣~
動畫播放方式（函數）：和transition的過渡的函數同樣~
延遲時間：和transition同樣~
循環次數：動畫播放的次數，默認爲1，一般爲整數，若是爲 infinite，則無限次地播放；
播放方向：默認爲normal，就是正常地向前播放，還有一個值是 alternate ，就是先正向播放，再反向播放，不斷地交替；
播放狀態：running(默認) 、 paused // 像播音樂同樣能夠經過動做來暫停動畫;
動畫時間外的屬性: none(默認) 、 forwards 、 backwards 、both；
舉個例子吧：
|
1
2
3
4
5
6
|
@keyframes color{
0%
{
background
:yellow}
100%
{
background
:
blue
}
}
div{
background
:
black
}
|
none： 動畫開始前：黑 ； 動畫結束後：黑
forwards： 動畫開始前：黑 ； 動畫結束後：藍
backwards： 動畫開始以前：黃 ； 動畫結束後：黑
both： 動畫開始前：黃 ； 動畫結束後：藍
就是這麼簡單~
最後，說一下這三個屬性在JS中的寫法：
transform：
|
1
2
|
obj.style.transform =
"translateX(100px) scale(2)"
;
obj.style.webkitTransform =
"translateX(100px) scale(2)"
;
//帶瀏覽器前綴
|
transition：
|
1
2
|
obj.style.transition =
"1s"
;
obj.style.webKitTransition =
"1s"
;
//帶瀏覽器前綴
|
animation：
|
1
|
obj.style.animation =
"name 1s "
;
//一、關鍵幀先在css寫好；二、兼容寫法在關鍵幀裏面寫；
|
Array.from轉類數據組爲數組
`能夠定義變量不須要 鏈接符和引號，也保存了縮進功能`
模塊和打包的使用 數據類型 Symbal，表示惟一，遍歷經過Object.getOwnxxxSymbol
viewControl:distance 距離縮放 echarts 的功能transform 0.225stransition xxx--save-dev 保存在package.json中，加了 -dev表示加的依賴放在了 devDependencies裏面babel是轉換爲es6爲es5的工具，由於有 的瀏覽器不支持
- 1. 前端-HTML總結
- 2. 前端——HTML總結
- 3. HTML前端總結
- 4. 前端總結--vue
- 5. Vue前端總結
- 6. 前端JAVASCRIPT和HTML總結
- 7. 前端頁面HTML總結
- 8. web前端總結HTML篇
- 9. HTML前端：webdriver總結
- 10. 前端—html基礎總結
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • WSDL 端口 - WSDL 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 算法總結-雙指針
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端-HTML總結
- 2. 前端——HTML總結
- 3. HTML前端總結
- 4. 前端總結--vue
- 5. Vue前端總結
- 6. 前端JAVASCRIPT和HTML總結
- 7. 前端頁面HTML總結
- 8. web前端總結HTML篇
- 9. HTML前端：webdriver總結
- 10. 前端—html基礎總結