整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
lt;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>21-jquery-css樣式操作的方法</title>
<!-- <script src="../static/js/jquery-3.6.0.js"></script>
<script>
$(function(){
})
</script> -->
<script src="../static/js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 逐個設置，一次只設置一個
// $("div").css("height", '100px'); // 設置div的高度為100
// $("div").css("width", "100px"); // 設置div的寬度為100
// $("div").css("background", "red"); // 設置div的背景為紅色
// 2. 鏈式設置
// 注意：鏈式操作如果大于3布建議分開， 因為可讀性就變差了
// $("div").css("height", '200px').css("width", "150px").css("background", "blue"); // 把div設置成高200，寬150，藍色背景
// 3.批量設置
$("div").css({
width: '300px',
height: '250px',
background: 'pink',
});
// 4.獲取css樣式值
let h=$("div").css("height") // 獲取div的高度并賦值給h
$("div").text(h) // 把h的值寫到div當中
})
</script>
</head>
<body>
<div></div>
</body>
</html>
輕量級框架：只關注視圖層，是一個構建數據的視圖集合，大小只有幾十 kb；
簡單易學：國人開發，中文文檔，不存在語言障礙 ，易于理解和學習；
雙向數據綁定：保留了 angular 的特點，在數據操作方面更為簡單；
組件化：保留了 react 的優點，實現了 html 的封裝和重用，在構建單頁面應用方面有著獨特的優勢；
視圖，數據，結構分離：使數據的更改更為簡單，不需要進行邏輯代碼的修改，只需要操作數據就能完成相關操作；
虛擬 DOM：dom 操作是非常耗費性能的， 不再使用原生的 dom 操作節點，極大解放 dom操作，但具體操作的還是 dom 不過是換了另一種方式；
運行速度更快: 相比較與 react 而言，同樣是操作虛擬 dom，就性能而言，vue 存在很大的優勢。
通過 props
$emit 方法
共同點：都能控制元素的顯示和隱藏；
不同點：實現本質方法不同，v-show 本質就是通過控制 css 中的 display 設置為 none，控制隱藏，只會編譯一次；v-if 是動態的向 DOM 樹內添加或者刪除 DOM 元素，若初始值為false，就不會編譯了。而且 v-if 不停的銷毀和創建比較消耗性能。
總結：如果要頻繁切換某節點，使用 v-show(切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節點使用 v-if（初始渲染開銷較小，切換開銷比較大）。
在組件中的 style 前面加上 scoped
keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
ref="domName" 用法：this.$refs.domName
答：v-model 雙向數據綁定；
v-for 循環；
v-if v-show 顯示與隱藏；
v-on 事件；v-once: 只綁定一次。
答：vue 文件的一個加載器，將 template/js/style 轉換成 js 模塊。
用途：js 可以寫 es6、style 樣式可以 scss 或 less、template 可以加 jade 等
答：需要使用 key 來給每個節點做一個唯一標識，Diff 算法就可以正確的識別此節點。作用主要是為了高效的更新虛擬 DOM。
答：請求后臺資源的模塊。npm install axios --save 裝好，js 中使用 import 進來，然后. get 或. post。返回在. then 函數中如果成功，失敗則是在.catch 函數中。
答：v-model 用于表單數據的雙向綁定，其實它就是一個語法糖，這個背后就做了兩個操作：
v-bind 綁定一個 value 屬性；
v-on 指令給當前元素綁定 input 事件。
答：assets 文件夾是放靜態資源；components 是放組件；router 是定義路由相關的配置;app.vue 是一個應用主組件；main.js 是入口文件。
答：computed:
當一個屬性受多個屬性影響的時候就需要用到 computed最典型的栗子： 購物車商品結算的時候
watch:
當一條數據影響多條數據的時候就需要用 watch
栗子：搜索數據
答：可以
答：當你修改了 data 的值然后馬上獲取這個 dom 元素的值，是不能獲取到更新后的值，你需要使用 $nextTick 這個回調，讓修改后的 data 值渲染更新到 dom 元素之后在獲取，才能成功。
答：因為 JavaScript 的特性所導致，在 component 中，data 必須以函數的形式存在，不可以是對象。
組建中的 data 寫成一個函數，數據以函數返回值的形式定義，這樣每次復用組件的時候，都會返回一份新的 data，相當于每個組件實例都有自己私有的數據空間，它們只負責各自維護的數據，不會造成混亂。而單純的寫成對象形式，就是所有的組件實例共用了一個 data，這樣改一個全都改了。
答：主張最少；可以根據不同的需求選擇不同的層級；
答：vue 雙向數據綁定是通過 數據劫持 結合 發布訂閱模式的方式來實現的， 也就是說數據和視圖同步，數據發生變化，視圖跟著變化，視圖變化，數據也隨之發生改變；
核心：關于 VUE 雙向數據綁定，其核心是 Object.defineProperty() 方法。
答：單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，還是會分開寫（頁面片段），然后在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。多應用于 pc 端。
多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整頁刷新
單頁面的優點：
用戶體驗好，快，內容的改變不需要重新加載整個頁面，基于這一點 spa 對服務器壓力較小；前后端分離；頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）。
單頁面缺點：
不利于 seo；導航不可用，如果一定要導航需要自行實現前進、后退。（由于是單頁面不能用瀏覽器的前進后退功能，所以需要自己建立堆棧管理）；初次加載時耗時多；頁面復雜度提高很多。
答：當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級，這意味著 v-if 將分別重復運行于每個 v-for 循環中。所以，不推薦 v-if 和 v-for 同時使用。
如果 v-if 和 v-for 一起用的話，vue 中的的會自動提示 v-if 應該放到外層去。
答：相同點：assets 和 static 兩個都是存放靜態資源文件。項目中所需要的資源文件圖片，字體圖標，樣式文件等都可以放在這兩個文件下，這是相同點
不相同點：assets 中存放的靜態資源文件在項目打包時，也就是運行 npm run build 時會將assets 中放置的靜態資源文件進行打包上傳，所謂打包簡單點可以理解為壓縮體積，代碼格式化。而壓縮后的靜態資源文件最終也都會放置在 static 文件中跟著 index.html 一同上傳至服務器。static 中放置的靜態資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服務器。因為避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是 static 中的資源文件由于沒有進行壓縮等操作，所以文件的體積也就相對于 assets 中打包后的文件提交較大點。在服務器中就會占據更大的空間。
建議：將項目中 template 需要的樣式文件 js 文件等都可以放置在 assets 中，走打包這一流程。減少體積。而項目中引入的第三方的資源文件如 iconfoont.css 等文件可以放置在 static中，因為這些引入的第三方文件已經經過處理，我們不再需要處理，直接上傳。
答：.stop：等同于 JavaScript 中的 event.stopPropagation()，防止事件冒泡；
.prevent：等同于 JavaScript 中的 event.preventDefault()，防止執行預設的行為（如果事件可取消，則取消該事件，而不停止事件的進一步傳播）；.capture：與事件冒泡的方向相反，事件捕獲由外到內；
.self：只會觸發自己范圍內的事件，不包含子元素；
.once：只會觸發一次。
24.vue 的兩個核心點
答：數據驅動、組件系統
數據驅動：ViewModel，保證數據和視圖的一致性。
組件系統：應用類 UI 可以看作全部是由組件樹構成的。
答：jQuery 是使用選擇器（$）選取 DOM 對象，對其進行賦值、取值、事件綁定等操作，其實和原生的 HTML 的區別只在于可以更方便的選取和操作 DOM 對象，而數據和界面是在一起的。比如需要獲取 label 標簽的內容：$("lable").val();, 它還是依賴 DOM 元素的值。
Vue 則是通過 Vue 對象將數據和 View 完全分離開來了。對數據進行操作不再需要引用相應的DOM 對象，可以說數據和 View 是分離的，他們通過 Vue 對象這個 vm 實現相互的綁定。這就是傳說中的 MVVM。
答: 在 template 中引入組件；
在 script 的第一行用 import 引入路徑；
用 component 中寫上組件名稱。
答：delete 只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。
Vue.delete 直接刪除了數組 改變了數組的鍵值。
答：安裝動態懶加載所需插件；使用 CDN 資源。
答：使用 location.href='/url'來跳轉，簡單方便，但是刷新了頁面；
使用 history.pushState('/url')，無刷新頁面，靜態跳轉；
引進 router，然后使用 router.push('/url') 來跳轉，使用了 diff 算法，實現了按需加載，減少了 dom 的消耗。
其實使用 router 跳轉和使用 history.pushState() 沒什么差別的，因為 vue-router 就是用了history.pushState()，尤其是在 history
答：簡單來說，假如父組件需要在子組件內放一些 DOM，那么這些 DOM 是顯示、不顯示、在哪個地方顯示、如何顯示，就是 slot 分發負責的活。
答：根據 vue-cli 腳手架規范，一個 js 文件，一個 CSS 文件。
答：Vue 路由在 Android 機上有問題，babel 問題，安裝 babel polypill 插件解決。
答： 使用 @click.native。原因：router-link 會阻止 click 事件，.native 指直接監聽一個原生事件。
答: 方法一：只用 a 標簽，不適用 button 標簽；方法二：使用 button 標簽和Router.navigate 方法
答：從瀏覽器中創建 XMLHttpRequests；
node.js 創建 http 請求；
支持 Promise API；
攔截請求和響應；
轉換請求數據和響應數據；
取消請求；
自動換成 json。
axios 中的發送字段的參數是 data 跟 params 兩個，兩者的區別在于 params 是跟請求地址一起發送的，data 的作為一個請求體進行發送params 一般適用于 get 請求，data 一般適用于 post put 請求。
答：1. 建立組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。(os：思考 1 小時，碼碼 10 分鐘，程序猿的準則。)
. 準備好組件的數據輸入。即分析好邏輯，定好 props 里面的數據、類型。
. 準備好組件的數據輸出。即根據組件邏輯，做好要暴露出來的方法。
. 封裝完畢了，直接調用即可
答：用法：query 要用 path 來引入，params 要用 name 來引入，接收參數都是類似的，分別是 this.$route.query.name 和 this.$route.params.name。
url 地址顯示：query 更加類似于我們 ajax 中 get 傳參，params 則類似于 post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，后者則不顯示
注意點：query 刷新不會丟失 query 里面的數據
params 刷新 會 丟失 params 里面的數據。
答：使用 vue 開發時，在 vue 初始化之前，由于 div 是不歸 vue 管的，所以我們寫的代碼在還沒有解析的情況下會容易出現花屏現象，看到類似于 {{message}} 的字樣，雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。
首先：在 css 里加上 [v-cloak] {
display: none;
}。
如果沒有徹底解決問題，則在根元素加上 style="display: none;" :style="
{display:'block'}"
答: push()；pop()；shift()；unshift()；splice()； sort()；reverse()
答：Mint UI，element，VUX
beforeCreate 、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed（創建、掛載、更新、卸載）掛載中可以操作DOM，創建中不能操作DOM；常用掛載或者創建生命周期就行了
將DOM抽象為虛擬DOM, 然后通過新舊虛擬DOM 這兩個對象的差異(Diff算法),最終只把變化的部分重新渲染,提高渲染效率的過程;
diff 是通過JS層面的計算，返回一個patch對象，即補丁對象，在通過特定的操作解析patch對象，完成頁面的重新渲染
1. vue2和vue3雙向數據綁定原理發生了改變
vue2 的雙向數據綁定是利用ES5 的一個 API Object.definePropert()對數據進行劫持 結合 發布訂閱模式的方式來實現的。
vue3 中使用了 es6 的 ProxyAPI 對數據代理。
相比于vue2.x，使用proxy的優勢如下
defineProperty只能監聽某個屬性，不能對全對象監聽
可以省去for in、閉包等內容來提升效率（直接綁定整個對象即可）
可以監聽數組，不用再去單獨的對數組做特異性操作 vue3.x可以檢測到數組內部數據的變化
2、默認進行懶觀察（lazy observation）
在 2.x 版本里，不管數據多大，都會在一開始就為其創建觀察者。當數據很大時，這可能會在頁面載入時造成明顯的性能壓力。3.x 版本，只會對「被用于渲染初始可見部分的數據」創建觀察者，而且 3.x 的觀察者更高效。
3、更精準的變更通知
比例來說：2.x 版本中，使用 Vue.set 來給對象新增一個屬性時，這個對象的所有 watcher 都會重新運行；3.x 版本中，只有依賴那個屬性的 watcher 才會重新運行。
4、vue3新加入了TypeScript以及PWA的支持
5、vue2和vue3組件發送改變
1.beforecreate:可以在加個loading事件，在加載實例是觸發
2.created:初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用
3.mounted:掛載元素，獲取到dom節點
4.updated:如果對數據統一處理，在這里寫上相應函數
5.beforeDestroy:可以一個確認停止事件的確認框
6.nextTick:更新數據后立即操作dom
v-model:一般用在表達輸入，很輕松的實現表單控件和數據的雙向綁定
v-html：更新元素的innerHTML
v-show與v-if：條件渲染，注意二者區別
v-on:click:可以簡寫為@click,@綁定一個事件。如果事件觸發了，就可以指定事件的處理函數
v-for：基于源數據多次渲染元素或模板
v-bind:title=”msg”簡寫：title="msg"
Query選擇器:
jQuery選擇器類似于CSS選擇器，用來選取網頁中的元素;示例:
$("h3").css("background","#09F");
注釋:獲取并設置網頁中所有<h3>元素的背景
“h3”為選擇器語法，必須放在$()中
$(“h3”)返回jQuery對象
.css()是為jQuery對象設置樣式的方法
1、基本選擇器(標簽選擇器、類選擇器、ID選擇器、并集選擇器和全局選擇器)
2、層次選擇器(后代選擇器、子選擇器、相鄰元素選擇器、同輩元素選擇器)——層次選擇器通過DOM 元素之間的層次關系來獲取元素
3、屬性選擇器:屬性選擇器通過HTML元素的屬性來選擇元素
$("#news a[class]").css("background","#c9cbcb");
$("#news a[class='hot']").css("background","#c9cbcb");
$("#news a[href$='html']").css("background","#c9cbcb");
(屬性選擇器可以根據是否包含某屬性來選取元素)
4、基本過濾選擇器
:eq(index)選取索引等于index的元素（index從0開始）$("li:eq(1)" )選取索引等于1的<li>元素
:gt(index)選取索引大于index的元素（index從0開始）$(" li:gt(1)" )選取索引大于1的<li>元素（注：大于1，不包括1）
:lt(index)選取索引小于index的元素（index從0開始）$(“li:lt(1)” )選取索引小于1的<li>元素（注：小于1，不包括1）
:header選取所有標題元素，如h1~h6$(":header" )選取網頁中所有標題元素
:focus選取當前獲取焦點的元素$(":focus" )選取當前獲取焦點的元素
:animated選擇所有動畫$(":animated" )選取當前所有動畫元素
6、可見性過濾選擇器
:visible選取所有可見的元素$(":visible" )選取所有可見的元素
:hidden選取所有隱藏的元素$(":hidden" ) 選取所有隱藏的元素
$("p:hidden").show();
$("p:visible").hide();
制作示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>制作全網熱播視頻頁面</title>
</head>
<style>
* {
margin: 0;
padding: 0;
font-family: "微軟雅黑";
font-size: 14px;
}
ul,
ol,
li {
list-style: none;
}
#play {
margin: 0 auto;
width: 680px;
overflow: hidden;
}
#play h1 {
line-height: 40px;
font-size: 22px;
}
#play ul>li {
float: left;
width: 220px;
height: 308px;
overflow: hidden;
position: relative;
}
#play ol li {
height: 37px;
padding: 0px 0px 0 10px;
position: relative;
}
#play ul>li>span {
display: block;
position: absolute;
left: 0;
bottom: 0;
font-size: 25px;
color: #ffffff;
font-weight: bold;
padding: 5px 10px;
z-index: 100;
}
#play ul>li>p {
position: absolute;
left: 50px;
bottom: 10px;
color: #ffffff;
}
#play ol {
padding-top: 13px;
padding-right: 5px;
}
#play ol li span {
display: inline-block;
color: #ffffff;
margin-right: 5px;
width: 20px;
height: 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#play ol li p {
position: absolute;
right: 0;
top: 3px;
color: #ffffff;
background: #f0a30f;
padding: 0 8px;
font-size: 12px;
display: none;
}
</style>
<script src="js/jquery-2.1.4.min.js"></script>
<body>
<section id="play">
<h1>全網熱播視頻</h1>
<ul>
<li><img src="img/flv01.jpg">
<p>昊花夢</p><span>1</span>
</li>
<li><img src="img/flv02.jpg">
<p>好先生</p><span>2</span>
</li>
<li>
<ol>
<li><span>3</span>三八線<p>加入看單</p>
</li>
<li><span>4</span>吉詳天寶<p>加入看單</p>
</li>
<li><span>5</span>親愛的翻譯官<p>加入看單</p>
</li>
<li><span>6</span>仙劍云之凡<p>加入看單</p>
</li>
<li><span>7</span>權力的游戲第五季<p>加入看單</p>
</li>
<li><span>8</span>瑯琊榜<p>加入看單</p>
</li>
<li><span>9</span>那年青春我們正好<p>加入看單</p>
</li>
<li><span>10</span>鄉村受情8（上）<p>加入看單</p>
</li>
</ol>
</li>
</ul>
</section>
</body>
</html>
<script>
$(function () {
// 設置圖片與標題與文字內容邊距
$("#play ul>li:not(li:last)").css("margin-right","10px");
// 設置右側列表背景顏色
$("ul>li:last").css("background-color","#f0f0f0");
// 設置數字的背景顏色
$("ul>li>span").css("background-color","#f0a30f");
$("ul>li>ol>li>span:first").css("background-color","#f0a30f");
$("ul>li>ol>li:not(li:eq(0)) span").css("background-color","#a4a3a3");
// 設置圖標
$("ul>li>ol>li:lt(5)").css("background","url(../sixClass/img/orange.jpg) right -4px no-repeat");
$("ul>li>ol>li:eq(1)").css("background","url(../sixClass/img/green.jpg) right -4px no-repeat");
$("ul>li>ol>li:gt(4)").css("background","url(../sixClass/img/green.jpg) right -4px no-repeat");
// 設置右邊列表隱藏、顯示效果
$("ul>li>ol>li").mouseover(function(){
$(this).find(":hidden").show();
})
$("ul>li>ol>li").mouseout(function(){
$("#play ol>li p:visible").hide();
})
})
</script>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
