彈性布局（Flex）
隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，對(duì)于網(wǎng)頁(yè)布局來(lái)說(shuō)要求越來(lái)越高，而傳統(tǒng)的布局方案對(duì)于實(shí)現(xiàn)特殊布局非常不方便，比如垂直居中。
2009年，W3C 提出了一種新的方案----Flex 布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。
下面是一些彈性布局的基本語(yǔ)法：
兩部分：
1. 語(yǔ)法是添加到父容器上的
display : flex;（彈性盒子的標(biāo)志哦！?。。? flex-direction: row; 布局的排列方向 （主軸排列方向）
row 默認(rèn)值，顯示為行。方向?yàn)楫?dāng)前文檔水平流方向，默認(rèn)情況下是從左往右。
row-reverse 顯示為行。但方向和row屬性值是反的
column 顯示為列
column-reverse 顯示為列。但方向和column屬性值是反的
flex-wrap : nowrap; 是否進(jìn)行換行處理。
nowrap; 默認(rèn)值，不換行處理
wrap; 換行處理
wrap-reverse; 反向換行
flex-flow : flex-direction flex-wrap 復(fù)合寫法 (是有順序的)。
justify-content ; 屬性決定了主軸方向上子項(xiàng)的對(duì)齊和分布方式。
flex-start ： 子項(xiàng)都去起始位置對(duì)齊。
flex-end ： 子項(xiàng)都去結(jié)束位置對(duì)齊。
center ： 子項(xiàng)都去中心位置對(duì)齊。
space-between : 表現(xiàn)為兩端對(duì)齊。多余的空白間距在元素中間區(qū)域分配，兩邊沒(méi)寬。
space-around : 邊緣兩側(cè)的空白只有中間空白寬度一半即每個(gè)塊都有左右間距。
space-evenly :每個(gè)flex子項(xiàng)兩側(cè)空白間距完全相等。
align-items : 每一行中的子元素上下對(duì)齊方式。
stretch;默認(rèn)值，flex子項(xiàng)拉伸
flex-start;容器頂部對(duì)齊
center;容器居中對(duì)齊
flex-end;容器底部對(duì)齊
align-content : 跟justify-content相反的操作。側(cè)軸的對(duì)齊方式。(最少需要兩行才能看出效果，因?yàn)樗嵌嘈械囊粋€(gè)上下對(duì)齊方式)
默認(rèn)：多行下，有幾行就會(huì)把容器劃分為幾部分，默認(rèn)就是stretch拉伸的。
值跟justify-content取值是相同的。
2. 語(yǔ)法是添加到子容器上的？
order : 排序(值越大越后)
0：默認(rèn)值 eg:1234
1：放在后面 eg:1342
-2：放在前面 eg:2134
flex-grow : 擴(kuò)展 ( 想看到擴(kuò)展的效果，必須有空隙 )
0 : 默認(rèn)值 , 不去擴(kuò)展
0.5：占空隙的一半
1 : 去擴(kuò)展 , 會(huì)把空白區(qū)域全部沾滿
（ 注：子元素會(huì)按照設(shè)置的比例值來(lái)分配空隙，如果比例值總和小于1，那么會(huì)有空隙，如果比例值總和大于等于1，那么就沒(méi)有空隙。）
flex-shrink : 收縮
正常默認(rèn)值是1
0表示不收縮，.5收縮小一些，2收縮大一些。（大小是跟正?？s放1進(jìn)行比較的）
flex-basis : 跟flex-shrink/flex-grow很像。
flex-shrink/flex-grow是設(shè)置一個(gè)比例值，flex-basis是設(shè)置一個(gè)具體值。
flex : 一種復(fù)合寫法
flex-grow flex-shrink flex-basis
flex:1;
flex : 1 1 0
flex:0;
flex : 0 1 0
algin-self: 跟align-items操作很像，區(qū)別就是只是針對(duì)某一個(gè)子項(xiàng)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;}
img{display: block;}
.box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}
.box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}
.box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
.box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
.box2 div:nth-of-type(1){align-self: flex-start;}
.box2 div:nth-of-type(2){align-self: flex-end;}
.box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
.box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
.box3 div:nth-of-type(1){align-self: flex-start;}
.box3 div:nth-of-type(3){align-self: flex-end;}
.box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
.box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
.box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
.box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
.box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
.box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
.box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
.box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
.box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
#box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid;
perspective: 500px;perspective-origin: right top;}
#box .main{position: relative;width: 150px;height: 150px;margin: 125px;
transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}
#box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;}
#box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}
#box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}
#box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}
#box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}
#box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}
#box:hover .main{transform:rotateY(360deg);}
</style>
</head>
<body>
<div id="box">
<div class="main">
<div class="box1">
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
</div>
<div class="box3">
<div></div>
<div></div>
<div></div>
</div>
<div class="box4">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>
<div class="box5">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>
<div class="box6">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>
</div>
</div>
</body>
</html>
注：默認(rèn)情況下，在彈性盒子中的子元素的左右排列的。
注：
水平是主軸的時(shí)候：默認(rèn)情況下，當(dāng)寬高不寫的時(shí)候，寬度由內(nèi)容決定，高度由父容器決定。
垂直是主軸的時(shí)候：默認(rèn)情況下，當(dāng)寬高不寫的時(shí)候，寬度由父容器決定，高度由內(nèi)容決定。
注：當(dāng)子項(xiàng)的總寬度大于父容器的時(shí)候，會(huì)自動(dòng)收縮的（彈性的優(yōu)先級(jí)是大于自身固定大小的）
注：當(dāng)子項(xiàng)的內(nèi)容已經(jīng)達(dá)到了父容器最小寬高的時(shí)候，就會(huì)出現(xiàn)溢出的現(xiàn)象。
注：彈性布局中用的頻率比較多的語(yǔ)法：
display : flex;
flex-direction;
justify-content;
align-items;
flex;
注：彈性布局的優(yōu)勢(shì)是做一維布局，網(wǎng)格布局的優(yōu)勢(shì)是做二維布局。
下面是彈性布局骰子案例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} ul{list-style: none;} a{text-decoration: none;} img{display: block;} .box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;} .box1 div{width: 30px;height: 30px;border-radius:50%;background: black;} .box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;} .box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;} .box2 div:nth-of-type(1){align-self: flex-start;} .box2 div:nth-of-type(2){align-self: flex-end;} .box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;} .box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;} .box3 div:nth-of-type(1){align-self: flex-start;} .box3 div:nth-of-type(3){align-self: flex-end;} .box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;} .box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;} .box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;} .box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;} .box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;} .box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;} .box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;} .box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;} .box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;} #box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid; perspective: 500px;perspective-origin: right top;} #box .main{position: relative;width: 150px;height: 150px;margin: 125px; transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;} #box .main .box1{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;} #box .main .box2{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);} #box .main .box3{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);} #box .main .box4{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);} #box .main .box5{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);} #box .main .box6{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);} #box:hover .main{transform:rotateY(360deg);} </style> </head> <body> <div id="box"> <div class="main"> <div class="box1"> <div></div> </div> <div class="box2"> <div></div> <div></div> </div> <div class="box3"> <div></div> <div></div> <div></div> </div> <div class="box4"> <div> <li></li> <li></li> </div> <div> <li></li> <li></li> </div> </div> <div class="box5"> <div> <li></li> <li></li> </div> <div> <li></li> </div> <div> <li></li> <li></li> </div> </div> <div class="box6"> <div> <li></li> <li></li> </div> <div> <li></li> <li></li> </div> <div> <li></li> <li></li> </div> </div> </div> </div> </body> </html>實(shí)際效果：
————————————————
版權(quán)聲明：本文為CSDN博主「GLINLIND」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/GLINLIND/article/details/104572530
javascript中window.open()與window.location.href的區(qū)別
window.open(‘index.html’) 表示新增一個(gè)窗口打開 index.html 這個(gè)頁(yè)面，并不刷新
location.href(‘index.html’) 表示在當(dāng)前窗口重定向到新頁(yè)面，打開并刷新 index.html 這個(gè)頁(yè)面
window.location 是 window 對(duì)象的屬性，用來(lái)替換當(dāng)前頁(yè)，也就是重新定位當(dāng)前頁(yè)
而window.open 是 window 對(duì)象的方法，是用來(lái)打開一個(gè)新窗口的函數(shù)
// 打開新頁(yè)面
// 注意：有些瀏覽器的安全設(shè)置會(huì)將window.open()屏蔽，例如避免彈出廣告窗
window.open('./index.html');
// 在原窗口打開新頁(yè)面
window.location.href＝"./index.html";
window.open()詳解
window.open ('page.html', 'newwindow', 'height=100, width=400,
top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
參數(shù)解釋： 三個(gè)參數(shù)
window.open 彈出新窗口的命令；
‘page.html’ 彈出窗口的文件名；
‘newPage’ 彈出窗口的名字（不是文件名），非必須，可用空’'代替；
height=100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離屏幕上方的象素值；
left=0 窗口距離屏幕左側(cè)的象素值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar=no 是否顯示菜單欄，yes為顯示；
scrollbars=no 是否顯示滾動(dòng)欄，yes為顯示；
resizable=no 是否允許改變窗口大小，yes為允許；
location=no 是否顯示地址欄，yes為允許；
status=no 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開），yes為允許；
常用的js返回與刷新頁(yè)面
在此用a標(biāo)簽舉例
前言：
做網(wǎng)頁(yè)項(xiàng)目時(shí)想要背景是動(dòng)態(tài)的，推薦兩個(gè)我覺(jué)得比較可以的js動(dòng)態(tài)背景。
隨鼠標(biāo)的移動(dòng)而移動(dòng)的線條，具體效果看圖：
你焦點(diǎn)在哪，那么那里的線條就會(huì)匯聚到你的焦點(diǎn)處。
用法：將js聲明到body內(nèi)即可，我是放置在body底部的
<script type="text/javascript" src=";
1
可以鼠標(biāo)點(diǎn)擊產(chǎn)生字的，如圖：
用法和第一個(gè)類似，不過(guò)在這個(gè)js文件前得先引入jquery:
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script type="text/javascript">
/* 鼠標(biāo) */
var a_idx = 0;
jQuery(document)
.ready(
function($) {
$("body")
.click(
function(e) {
var a = new Array("@健身",
"@學(xué)習(xí)", "@機(jī)車",
"@攝影", "@自由",
"@考研", "@自律",
"@獨(dú)立", "@廚藝",
"@橘子", "@交友",
"@愛(ài)媳婦", "@愛(ài)家人");
var $i = $("<span></span>")
.text(a[a_idx]);
a_idx = (a_idx + 1)
% a.length;
var x = e.pageX, y = e.pageY;
$i
.css({
"z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
"top" : y - 20,
"left" : x,
"position" : "absolute",
"font-weight" : "bold",
"color" : "rgb("
+ ~~(255 * Math
.random())
+ ","
+ ~~(255 * Math
.random())
+ ","
+ ~~(255 * Math
.random())
+ ")"
});
$("body").append($i);
$i.animate({
"top" : y - 180,
"opacity" : 0
}, 1500, function() {
$i.remove();
});
});
});
</script>
這里使用的是cdn形式的jquery即不用將jq放入本地文件再引入，直接訪問(wèn)網(wǎng)絡(luò)上的jq即可，還有就是點(diǎn)擊產(chǎn)生的字可以自行修改。
————————————————
可以自定義一個(gè)file選擇文件的按鈕：
思路為：
用定位將自定義的按鈕遮住原來(lái)的選擇文件按鈕，
再讓點(diǎn)擊自定義按鈕時(shí)觸發(fā)原來(lái)的選擇文件按鈕的事件即可
（對(duì)此，label可實(shí)現(xiàn)）
eg:
html:
css樣式：
結(jié)果圖：
點(diǎn)一下，就可以彈出選擇文件的文件夾啦！
文章目錄
一、HTML的概述
標(biāo)簽的嵌套縮進(jìn)
如圖所示<html>為外層標(biāo)簽，稱為父元素，<head>和<body>為內(nèi)層標(biāo)簽，稱為子元素。其中<head>與<body>又互稱為兄弟元素
<!DOCTYPE html>
聲明不是 HTML 標(biāo)簽；它是指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。
聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。
<!DOCTYPE> 聲明沒(méi)有結(jié)束標(biāo)簽。
<!DOCTYPE> 聲明對(duì)大小寫不敏感。
在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種：<!doctype html>
我們學(xué)習(xí)的是HTML5，所以我們不過(guò)多對(duì)HTML4的聲明做過(guò)多解釋。
如果上述對(duì)<!doctype html>的概述不清楚的話，
那記住以下兩點(diǎn)即可，1. 不分大小寫，2.在HTML的網(wǎng)頁(yè)<html>標(biāo)簽之前加上<!doctype html>就可以啦。
圖示為 HTML DOM樹，DOM：Document Object Model（文檔對(duì)象模型）
2. 標(biāo)簽、屬性
一個(gè)標(biāo)簽可能有多個(gè)屬性，屬性先后與順序無(wú)關(guān)
“=” 為賦值符號(hào)
屬性與屬性之間用空格隔開
附：補(bǔ)充上一節(jié)課網(wǎng)站和網(wǎng)頁(yè)的筆記：
HTML網(wǎng)頁(yè)的編碼為 utf-8
網(wǎng)站可以理解成一個(gè)文件夾，而網(wǎng)頁(yè)就是一個(gè)個(gè)的文件
網(wǎng)頁(yè)的文件后綴常見(jiàn)的有：htm、html、jsp、php、asp
網(wǎng)站的文件結(jié)構(gòu)通常包含 images文件夾，css文件夾，js文件夾，
一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，的文件目錄通常由 images、css、js，作用顧名思義，就是存放相對(duì)應(yīng)的文件資源
附：img標(biāo)簽的詳細(xì)介紹
<img> 標(biāo)簽有兩個(gè)必需的屬性：src 和 alt。
注釋：從技術(shù)上來(lái)說(shuō)，圖像并不會(huì)插入到HTML頁(yè)面中去，而是通過(guò) src的值(URL) 鏈接到HTML頁(yè)面上的，<img>標(biāo)簽的作用是為被引用的圖像創(chuàng)建占位符。
<img>標(biāo)簽常用的屬性有src、alt、width、height、title
src和alt為 img 標(biāo)簽的必需元素。
話不多說(shuō)，看圖，為你們講解代碼。
看網(wǎng)站的演示圖和代碼圖，想必大家都很清楚了吧。
（為了更直觀的看到效果，我寫了div和div的樣式，1px粗的紅色實(shí)線邊框，這里的代碼以后再具體詳解）
title和alt 的區(qū)別別，體現(xiàn)在 第 11 行和第 14 行，想必大家就能看出來(lái)了吧
i. alt 屬性是在圖片不能正常顯示時(shí)出現(xiàn)的文本提示。
ii. title 屬性是在鼠標(biāo)在移動(dòng)到元素上的文本提示。
width和height的作用，用來(lái)規(guī)定圖像的寬度和高度，單位為 像素（px）
src路徑，由于我的文件夾結(jié)構(gòu)為 index.html文件和 images 文件夾。
所以 src 的路徑為 src="images/圖片.后綴"，即src="URL"
URL即（Uniform Resource Locator,統(tǒng)一資源定位符，在WWW上，每一信息資源都有統(tǒng)一的且在網(wǎng)上唯一的地址。
簡(jiǎn)單的理解URL，就是網(wǎng)址，地址
如果圖片路徑引用錯(cuò)誤，都會(huì)導(dǎo)致網(wǎng)頁(yè)中的圖片無(wú)法正常顯示！ 如，第 14 行和第 20 行代碼。
以上為img標(biāo)簽的常見(jiàn)用法。在我們寫網(wǎng)頁(yè)的時(shí)候，建議img寫上 src、alt、width、height這四個(gè)屬性，是否需要 title 具體看網(wǎng)站的功能。
以上就是，第二課、Web前端開發(fā)之HTML基礎(chǔ)的全部?jī)?nèi)容了，感謝閱讀
————————————————
版權(quán)聲明：本文為CSDN博主「MineChen」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/MineSu/article/details/104549536
引言
現(xiàn)在市場(chǎng)很多前端開發(fā)的招聘崗位都或多或少的要求你要掌握vue，可以說(shuō)vue在國(guó)內(nèi)是非常的火爆的，下面我給大家介紹一下vue框架吧！
vue是漸進(jìn)式框架
vue的核心是一個(gè)視圖模板引擎，但是這并不能說(shuō)明vue不是一個(gè)框架，如上圖所示在聲明式渲染（視圖模板）基礎(chǔ)上，vue可以添加組件系統(tǒng)component，vue-router客戶端路由，vuex的狀態(tài)管理，vue-cli構(gòu)建工具來(lái)構(gòu)建一個(gè)完整的框架，更重要的是這些功能相互獨(dú)立，你可以任意選用你項(xiàng)目需要的部件，不一定非要全部整合在一起（就像是vuex它是一個(gè)很好的可以管理組件之間共享狀態(tài)的部件，但非必須在你的每一個(gè)項(xiàng)目中使用它，如果說(shuō)你的項(xiàng)目相對(duì)簡(jiǎn)單，組件之間的通信相對(duì)簡(jiǎn)單你完全可以不使用它），可以看到漸進(jìn)式，其實(shí)就是vue的使用方式，同時(shí)也能看到vue的設(shè)計(jì)理念
vue是mvvm模式
為什么說(shuō)vue是mvvm模式呢？這個(gè)大家首先要知道m(xù)vvm是什么。mvvm是Model-View-ViewModel的簡(jiǎn)寫，即模型視圖視圖模型。模型是指后端傳過(guò)來(lái)的數(shù)據(jù)，視圖是指我們看到的頁(yè)面，視圖模型是mvvm框架的核心，他是連接view和model的橋梁，它有兩個(gè)方向，第一將后端傳來(lái)的數(shù)據(jù)轉(zhuǎn)換成頁(yè)面可以看到的視圖，第二，將用戶在頁(yè)面上的交互轉(zhuǎn)化成為后端數(shù)據(jù)，我們稱之為雙向綁定。
總結(jié)mvvm模式的視圖和模型是不能直接通信的，它們通過(guò)ViewModel來(lái)通信，ViewModel通常要實(shí)現(xiàn)一個(gè)observer觀察者，當(dāng)數(shù)據(jù)發(fā)生變化，ViewModel能夠監(jiān)聽到數(shù)據(jù)的這種變化，然后通知到對(duì)應(yīng)的視圖做自動(dòng)更新，而當(dāng)用戶操作視圖，ViewModel也能監(jiān)聽到視圖的變化，然后通知數(shù)據(jù)做改動(dòng)，這實(shí)際上就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解為是ViewModel，它可以實(shí)現(xiàn)dom監(jiān)聽和數(shù)據(jù)綁定
vue的數(shù)據(jù)綁定原理
當(dāng)你把JavaScript對(duì)象傳入vue實(shí)例作為data選項(xiàng)，vue會(huì)遍歷此對(duì)象的所以屬性，并使用Object.defineProperty把這些屬性轉(zhuǎn)換為getter和setter，每一個(gè)組件都有一個(gè)watcher實(shí)例，它會(huì)在組件渲染過(guò)程中，把接觸過(guò)的數(shù)據(jù)記錄為依賴，當(dāng)依賴的setter被觸發(fā)是，他會(huì)通知watcher，重而使關(guān)聯(lián)的數(shù)據(jù)重新渲染，以下是代碼展示。
<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
get () {
// obj設(shè)置了一個(gè)myname屬性，當(dāng)訪問(wèn)obj.myname屬性會(huì)執(zhí)行g(shù)et方法
},
set (data) {
// 當(dāng)修改myname屬性會(huì)執(zhí)行set方法
// data會(huì)得到你修改的值
obox.innerHTML = data
}
})
object.definePeoperty有一下缺點(diǎn)： {
1：無(wú)法監(jiān)聽es6的set，map變化
2：無(wú)法監(jiān)聽class類型的數(shù)據(jù)
3：屬性的新增和刪除也無(wú)法監(jiān)聽
4：數(shù)組元素的新整和刪除也無(wú)法監(jiān)聽
}
html5+css3實(shí)現(xiàn)2D-3D動(dòng)畫效果實(shí)例
主要實(shí)現(xiàn)的功能就是一些2D、3D的動(dòng)畫效果，如平移、縮放、旋轉(zhuǎn)等等。
文章目錄
html5+css3實(shí)現(xiàn)2D-3D動(dòng)畫效果實(shí)例
2D變換
3D變換
2D中應(yīng)用實(shí)現(xiàn)案例
3D中應(yīng)用實(shí)現(xiàn)案例
css3動(dòng)畫
2D變換
是在一個(gè)平面對(duì)元素進(jìn)行的操作。
可以對(duì)元素進(jìn)行水平或者垂直位移、旋轉(zhuǎn)或者拉伸.
1
2
*2d對(duì)下面面坐標(biāo)系簡(jiǎn)單分析如下：
（1）.默認(rèn)狀態(tài)下，x軸是水平的，向右為正。
（2）.默認(rèn)狀態(tài)下，y軸是垂直的，向下為正，這與傳統(tǒng)的數(shù)學(xué)坐標(biāo)系不同。
2d場(chǎng)景，在屏幕上水平和垂直的交叉線x軸和y軸
3d場(chǎng)景，在垂直于屏幕的方法，相對(duì)于2d多出個(gè)z軸
下面首先需要了解2D、3D中的功能函數(shù)：
位移 translate()
translateX() 方法，元素在其 X 軸以給定的數(shù)值進(jìn)行位置移動(dòng)
translateY() 方法，元素在其 Y 軸以給定的數(shù)值進(jìn)行位置移動(dòng)
縮放scale()
scaleX()：相當(dāng)于scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其默認(rèn)值是1。
scaleY()：相當(dāng)于scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其默認(rèn)值是１。
旋轉(zhuǎn)rotate()
rotateX() 方法，元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)
rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)
正數(shù)”是順時(shí)針，“負(fù)數(shù)”是逆時(shí)針，單位為“deg”。
傾斜skew()
一個(gè)參數(shù)時(shí)：表示水平方向的傾斜角度；
兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)表示水平方向的傾斜角度，
第二個(gè)參數(shù)表示垂直方向的傾斜角度
3D中多了Z軸，其他屬性值不變
2D中應(yīng)用實(shí)現(xiàn)案例
位移 translate()
效果圖：
position: absolute;
left: 20px; top: 40px;
transition: 2s;/*過(guò)渡時(shí)間*/
transform: translateY(-320px);
.box3:hover .box3_h2{
transform: translateY(0px);
}
<!-- 盒子3：實(shí)現(xiàn)位移 -->
<div class="box3 box">
<img class="img_3" src="../16/images/3.png" alt="">
<div class="box_mm"></div>
<h2 class="box3_h2">Taylor Swift</h2>
<p class="box3_p1">I'm so glad you made time to see me. How's life,
tell me how's your family? I haven't seen them in a while.
You've been good, busier then ever.
We small talk, work and the weather Your guard is up and I know why...</p>
</div>
————————————————/* 公共樣式 */ .box{ width:350px; height: 300px; position: relative; transform: 1s; margin: 20px 20px; float: left; } img{ display: block; width: 350px; height: 300px; } /* 鼠標(biāo)滑過(guò)覆蓋上方的白色部分 */ .box_mm{ width:350px; height: 300px; transform: 1s; background-color: #fff; position: absolute;/*設(shè)置定位，擋住box，*/ top: 0; opacity: 0;/*透明，0全透明*/ } h2{ font-size: 20px; } /* 盒子3 */ .box3{ overflow: hidden; } .img_3{ transition: 2s; } .box3_h2{ color: #fff; position: absolute; left: 20px; top: 40px; transition: 2s;/*過(guò)渡時(shí)間*/ transform: translateY(-320px); } .box3_p1{ font-size: 14px; width: 320px; position: absolute; left: 20px; bottom: 80px; transition: 2s; opacity: 0; } /*交互樣式*/ .box3:hover .img_3{ transform: translateY(-10px); } .box3:hover .box3_h2{ transform: translateY(0px); } .box3:hover .box3_p1{ transform: translateY(-50px); opacity: 1; }
著名的 Web 設(shè)計(jì)網(wǎng)站 CSS-tricks.com 最近組織了一次調(diào)查，請(qǐng)15名頂尖的 Web 設(shè)計(jì)師對(duì) CSS 提出自己的期望，15名設(shè)計(jì)師包括 Jon Hicks, Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。
調(diào)查結(jié)果顯示，最被期待的 CSS 功能是 CSS 圓角，其它期待的功能包括跨瀏覽器漸變與陰影，類似 Photoshop 的層融合效果，更一致的聲明簡(jiǎn)化語(yǔ)法以及對(duì)條件判斷的本地支持。這些期待中一部分已經(jīng)包含在未來(lái)的 CSS-3 中，但更多的仍然只是一些夢(mèng)想。
WebMonkey 的編輯們將這個(gè) Wishlist 發(fā)表在他們的網(wǎng)站并讓 WebMonkey 的讀者投票選出最熱門的項(xiàng)目，以下是按投票多少排列的 CSS Wishlist 部分列表（只選取最熱門的項(xiàng)目）。新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。
CSS 圓角
by Webmonkey
標(biāo)準(zhǔn)的，直接基于 CSS 的圓角是很多人的期待，這樣，就不必再費(fèi)盡心機(jī)只為了顯示一個(gè)圓角。
垂直居中
by michael lascarides
針對(duì) block 對(duì)象的更容易的垂直居中設(shè)置。（div + css 讓人既愛(ài)且恨的一個(gè)重要原因就是垂直居中，讓一個(gè)對(duì)象垂直居中顯示在 block 容器中，且兼容所有主流瀏覽器簡(jiǎn)直就是一個(gè)噩夢(mèng) - 譯者）
兼容所有主流瀏覽器的 CSS 2.1 與 CSS 3
by Erik
能兼容所有主流瀏覽器的 CSS 2.1 與 CSS 3 是 Erik 的夢(mèng)想，但其中的某些功能在某些瀏覽器中總是磕磕絆絆。
更好的嵌入字體
by Webmonkey
不要 sFIR, 不要圖片，要真正的字體。
CSS 變量
by Jeffrey Jordan Way, via css-tricks.com
能定義諸如色彩值一類的變量
更好地支持 100% height
by JLR
設(shè)置了 100% height 的容器的頂部和底部真正附著在頁(yè)首和頁(yè)尾，頁(yè)面中間部分匹配內(nèi)容并準(zhǔn)確顯示滾動(dòng)條。搜索“100% height css”能找到各種解決方法，但事情原本不該這么復(fù)雜。
可重復(fù)使用變量
by Neal Lindsay
比如:
@var mycolor = #0080FF
h1 { color: mycolor; }
div.containbox { border: 1px mycolor; }
瀏覽器一致性與定義順序
by JML
瀏覽器一致性非常重要。某些 CSS 在某些瀏覽器被忽略或部分忽略使 CSS 只有借助 JavaScript 才能正常使用。同時(shí)，對(duì)里面的 CSS 定義應(yīng)該可以覆蓋全局定義。
一句話復(fù)原
by Chris Pitzer
很多設(shè)計(jì)者要寫40多行代碼才能清除瀏覽器默認(rèn) CSS 定義，應(yīng)當(dāng)有一個(gè)簡(jiǎn)單的聲明一次性將所有 CSS 復(fù)原，比如：
body { clear-default-styles:true; }
圖形旋轉(zhuǎn)與反轉(zhuǎn)
by Stephen Bell
在設(shè)置圖形圓角效果時(shí)候，我們需要同一個(gè)圓角圖片的4個(gè)旋轉(zhuǎn)版本來(lái)實(shí)現(xiàn)。應(yīng)該有一個(gè)簡(jiǎn)單的聲明實(shí)現(xiàn)旋轉(zhuǎn)，如：
img .horiz { rotate:90; }
成組的 CSS 簡(jiǎn)化定義
by Volkan G?rgülü, via css-tricks.com
如:
改為:
漸變
by Anonymous
以避免一條線一條線地實(shí)現(xiàn)漸變。
定位計(jì)算
by Anonymous
不使用 JavaScript 而是直接在 CSS 中實(shí)現(xiàn)：
left: ID1.Left + ID1.Width + 2px;
網(wǎng)格布局
by Kurt Krumme
table 布局曾經(jīng)流行一時(shí)，因?yàn)?table 布局更接近網(wǎng)格布局的原理。CSS 的設(shè)置者們?yōu)槭裁匆瞥鲆粋€(gè)不倫不類的 box 模型？
div + css 在 Web 設(shè)計(jì)界已經(jīng)紅得發(fā)紫，盡管 div 有眾多缺陷（比如垂直居中，比如在 IE 中的眾多 BUG），如果哪個(gè)設(shè)計(jì)師膽敢使用 table，被人查出源代碼，是會(huì)被恥笑的。然而譯者從不畏懼使用 table + css，且愿意告戒那些盲目追隨 div 并被折磨得半死的人，至少在目前，table 是被各種瀏覽器支持得最完美的容器對(duì)象。
新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。
使用 image 作 border
by Anonymous
應(yīng)當(dāng)可以用 image 作為 border，如：
border-right: url('image.png')
支持多個(gè)背景圖
by Brad
這個(gè) CSS 功能非常有用，有了這個(gè)功能，完美實(shí)現(xiàn) CSS 圓角就變得十分簡(jiǎn)單了。
所有瀏覽器支持統(tǒng)一標(biāo)準(zhǔn)
by Anonymous
這里特指 IE<8 的版本。CSS 有成型的標(biāo)準(zhǔn)，但有些瀏覽器一定要搞一些自己的東西出來(lái)。
以上來(lái)自cb。大師們的期望果然很獨(dú)特，相當(dāng)多的期望也非常有用，如果實(shí)現(xiàn)了，Web開發(fā)就是多么輕松愉快的一件事情??！比如變量、清除定義和定位計(jì)算，是我認(rèn)為非常有用的。目前IE下可以用一些IE特有的表達(dá)式，但用起來(lái)太復(fù)雜。
還是期望CSS3更好更強(qiáng)大。也期望各個(gè)瀏覽器盡快支持CSS3
————————————————
版權(quán)聲明：本文為CSDN博主「前端基礎(chǔ)開發(fā)」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/html886/article/details/104582007
文章目錄
一、this
1.什么是this
2.this 代表什么
3.綁定 this 的方法
4.this的指向
5.改變指向
二、Function.prototype.bind()
三、call/apply
1.定義
2.語(yǔ)法
3.異同
一、this
1.什么是this
this 關(guān)鍵字在大部分語(yǔ)言中都是一個(gè)重要的存在，JS中自然不例外，其表達(dá)的意義豐富多樣甚至有些復(fù)雜，深刻理解this是學(xué)習(xí)JS、面向?qū)ο缶幊谭浅Ｖ匾囊画h(huán)。
2.this 代表什么
this代表函數(shù)（方法）執(zhí)行的上下文環(huán)境（上下文，類似與你要了解一篇文章，了解文章的上下文你才能清晰的了解各種關(guān)系）。
但在 JavaScript 中 this 不是固定不變的，它會(huì)隨著執(zhí)行環(huán)境的改變而改變。
1.在方法中，this 表示該方法所屬的對(duì)象。
2.如果單獨(dú)使用，this 表示全局對(duì)象。
3.在函數(shù)中，this 表示全局對(duì)象。
4.在函數(shù)中，在嚴(yán)格模式下，this 是未定義的(undefined)。
5.在事件中，this 表示接收事件的元素。
6.類似 call() 和 apply() 方法可以將 this 引用到任何對(duì)象。
3.綁定 this 的方法
this的動(dòng)態(tài)切換，固然為 JavaScript 創(chuàng)造了巨大的靈活性，但也使得編程變得困難和模糊。有時(shí)，需要把this固定下來(lái)，避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個(gè)方法，來(lái)切換/固定this的指向。
4.this的指向
1.在一般函數(shù)方法中使用 this 指代全局對(duì)象
function test(){
this.x = 1; //這里this就是window
console.log(this.x);
}
test(); // 1
JS規(guī)定，函數(shù)中的this，在函數(shù)被調(diào)用時(shí)確定，它指函數(shù)當(dāng)前運(yùn)行的環(huán)境。
2.作為對(duì)象方法調(diào)用，this 指代上級(jí)對(duì)象
var x =3;
function test(){
alert(this.x);
}
var o = {
x:1,
m:test
};
o.m(); // 1
如果函數(shù)作為對(duì)象的方法時(shí)，方法中的 this 指向該對(duì)象。
3.作為構(gòu)造函數(shù)調(diào)用，this 指代new 出的對(duì)象
function test(){
console.log(this);
}
var o = new test();
test();
//可以看出o代表的不是全局對(duì)象
new關(guān)鍵詞的作用是調(diào)用某個(gè)函數(shù)并拿到其中的返回值，只是調(diào)用過(guò)程稍特殊。在上面的代碼實(shí)例中。test函數(shù)被new關(guān)鍵詞調(diào)用時(shí)，內(nèi)部依次執(zhí)行了以下步驟:
（1）創(chuàng)建一個(gè)空對(duì)象。
（2）將這個(gè)空對(duì)象的原型，指向這個(gè)構(gòu)造函數(shù)的prototype。
（3）將空對(duì)象的值賦給函數(shù)內(nèi)部的this（this就是個(gè)空對(duì)象了）。
（4）執(zhí)行函數(shù)體代碼，為this這個(gè)對(duì)象綁定鍵值對(duì)。
（5）返回this，將其作為new關(guān)鍵詞調(diào)用oop函數(shù)的返回值。
所以構(gòu)造函數(shù)中的this，依舊是在構(gòu)造函數(shù)被new關(guān)鍵詞調(diào)用時(shí)確定其指向，指向的是當(dāng)前被實(shí)例化的那個(gè)對(duì)象。
4.箭頭函數(shù)中的this
箭頭函數(shù)是ES6的新特性，最重要的特點(diǎn)是它會(huì)捕獲其所在上下文的this作為自己的this，或者說(shuō)，箭頭函數(shù)本身并沒(méi)有this，它會(huì)沿用外部環(huán)境的this。也就是說(shuō)，箭頭函數(shù)內(nèi)部與其外部的this是保持一致的。
this.a=20
var test={
a:40，
init:()=>{
console.log(this.a)
function go(){
this.a=60
console.log(this.a)
}
go.prototype.a=50
return go
}
}
var p=test.init()
p()
new (test.init())()
//輸出 20 60 60 60
5.改變指向
this的動(dòng)態(tài)切換，固然為 JavaScript 創(chuàng)造了巨大的靈活性，但也使得編程變得困難和模糊。有時(shí)，需要把this固定下來(lái)，避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個(gè)方法，來(lái)切換/固定this的指向。
bind方法和apply、call稍有不同，bind方法返回一個(gè)新函數(shù)，以后調(diào)用了才會(huì)執(zhí)行，但apply、call會(huì)立即執(zhí)行。
二、Function.prototype.bind()
bind()方法主要就是將函數(shù)綁定到某個(gè)對(duì)象，bind()會(huì)創(chuàng)建一個(gè)函數(shù)，函數(shù)體內(nèi)的this對(duì)象的值會(huì)被綁定到傳入bind()中的第一個(gè)參數(shù)的值，例如：f.bind(obj)，實(shí)際上可以理解為obj.f()，這時(shí)f函數(shù)體內(nèi)的this自然指向的是obj；
示例：
function f(y, z){
return this.x + y + z;
}
var m = f.bind({x : 1}, 2);
console.log(m(3));
//6
這里bind方法會(huì)把它的第一個(gè)實(shí)參綁定給f函數(shù)體內(nèi)的this，所以這里的this即指向{x : 1}對(duì)象，從第二個(gè)參數(shù)起，會(huì)依次傳遞給原始函數(shù)，這里的第二個(gè)參數(shù)2，即是f函數(shù)的y參數(shù)，最后調(diào)用m(3)的時(shí)候，這里的3便是最后一個(gè)參數(shù)z了，所以執(zhí)行結(jié)果為1 + 2 + 3 = 6分步處理參數(shù)的過(guò)程其實(shí)是一個(gè)典型的函數(shù)柯里化的過(guò)程（Curry）。
三、call/apply
1.定義
每個(gè)函數(shù)都包含兩個(gè)非繼承而來(lái)的方法：call()方法和apply()方法。
call和apply可以用來(lái)重新定義函數(shù)的執(zhí)行環(huán)境，也就是this的指向；call和apply都是為了改變某個(gè)函數(shù)運(yùn)行時(shí)的context，即上下文而存在的，換句話說(shuō)，就是為了改變函數(shù)體內(nèi)部this的指向。
2.語(yǔ)法
call()
調(diào)用一個(gè)對(duì)象的方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象，可以繼承另外一個(gè)對(duì)象的屬性，它的語(yǔ)法是：
Function.call(obj[, param1[, param2[, [,...paramN]]]]);
1
obj：這個(gè)對(duì)象將代替Function類里this對(duì)象
params：一串參數(shù)列表
說(shuō)明：call方法可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法，call方法可以將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)閛bj指定的新對(duì)象，如果沒(méi)有提供obj參數(shù)，那么Global對(duì)象被用于obj。
apply()
和call()方法一樣，只是參數(shù)列表不同，語(yǔ)法：
Function.apply(obj[, argArray]);
obj：這個(gè)對(duì)象將代替Function類里this對(duì)象
argArray：這個(gè)是數(shù)組，它將作為參數(shù)傳給Function
說(shuō)明：如果argArray不是一個(gè)有效數(shù)組或不是arguments對(duì)象，那么將導(dǎo)致一個(gè)TypeError，如果沒(méi)有提供argArray和obj任何一個(gè)參數(shù)，那么Global對(duì)象將用作obj。
3.異同
相同點(diǎn)
call()和apply()方法的相同點(diǎn)就是這兩個(gè)方法的作用是一樣的。都是在特定的作用域中調(diào)用函數(shù)，等于設(shè)置函數(shù)體內(nèi)this對(duì)象的值，以擴(kuò)充函數(shù)賴以運(yùn)行的作用域。
一般來(lái)說(shuō)，this總是指向調(diào)用某個(gè)方法的對(duì)象，但是使用call()和apply()方法時(shí)，就會(huì)改變this的指向，看個(gè)例子：
function add(a, b) {
return a + b;
}
function sub(a, b) {
return a - b;
}
console.log(add.call(sub, 2, 1));//3
在學(xué)習(xí)應(yīng)用css之前我們要先了解一下什么是css。CSS是Cascading Style Sheets(層疊樣式表)的簡(jiǎn)稱.
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com