原创 爲什麼Vue組件中的data是一個函數原理(詳細易懂)

文章目錄組件中的data實例data是函數----原理function知識data是函數的原理案例總結舉一反三 組件中的data 組件是一個具有單獨自身功能模塊的封裝,這個模塊有屬於自己的HTML模板,也應該有屬於自己的數據dat

原创 自學Vue必看的v-for知識總結

文章目錄基礎v-for遍歷數組v-for遍歷對象 基礎 v-for 類似於JS中的for循環 語法格式: item in arr v-for遍歷數組 <body> <div id="app"> //<!-- for遍歷

原创 勻速動畫VS緩動動畫(超詳細)

文章目錄勻速動畫勻速動畫案例描述勻速動畫案例圖示HTML+CSS勻速動畫JS代碼勻速動畫JS代碼改進----函數封裝緩動動畫緩動動畫案例描述緩動動畫案例圖示HTML+CSS緩動動畫JS代碼緩動動畫JS代碼改進----函數封裝 勻速

原创 JS事件對象

文章目錄事件對象概念event常見屬性clientX和clientY、screenX和screenY、pageX和pageY的區別圖示示例示例一示例二 事件對象概念 比如onclick、onfocus、onmousedown、on

原创 scroll家族

文章目錄scroll家族屬性scroll兼容性問題CSS樣式怪異模式下的兼容嚴格模式下的兼容所有版本兼容高版本瀏覽器兼容兼容綜合寫法示例圖 scroll家族屬性 document.body.scrollWidth:網頁正文全文寬

原创 五十行代碼實現簡易點名神器

文章目錄案例描述案例展示HTML + CSSJS代碼JS詳解-----封裝函數JS詳解----核心代碼JS全部代碼展示 案例描述 點擊開始按鈕,名字開始在瀏覽器上滾動。點擊結束按鈕,名字滾動停止,瀏覽器上出現某一個人的名字,完成點

原创 用JS實現長圖上下滾動(超詳細)

文章目錄案例描述案例圖示HTMLCSSJS核心代碼JS詳解----監聽鼠標進入事件(以盒子上半部分爲例)JS詳解----監聽鼠標移出事件(以盒子上半部分爲例)JS全部代碼展示 案例描述 將一張長圖放在某一固定長寬的盒子裏,當鼠標置

原创 防止定時器重疊問題

文章目錄描述圖示定時器重疊問題HTML+CSSJS-----定時器重疊代碼JS-----解決定時器重疊代碼 描述 在瀏覽器中設置一個正方體盒子,當鼠標進入該盒子時,啓動定時器。定時器完成在控制檯一秒打印出一個數字的功能 圖示 定

原创 寫給大忙人看的MVC、MVP和MVVM

文章目錄MVC總體概念細分概念MVC各個部分之間的通信關係圖示MVC優點MVC不適用於前端MVP概念圖示特點MVP存在的問題MVVM概念圖示MVVM的特點總結 MVC 總體概念 M是指業務模型,V是指用戶界面,C是控制器 細分概念

原创 你想要的Date都在這裏了

文章目錄概念定時器定時器的循環執行Date常用方法一Date常用方法二Date格式轉化的實現表白神器案例描述效果展示HTML+CSSJS核心代碼 概念 Date對象基於1970年1月1日(世界標準時間)起的毫秒數 定時器 需求:

原创 案例 | 既涉及到閉包又涉及到let和var區別

文章目錄案例描述HTML代碼css樣式JS代碼常用方法改進方法一改進方法二 案例描述 鼠標移動到任何一張小圖上,將在大圖位置展現此小圖,展示如下。 很明顯這個案例要用到JS中的onmouseover 但這個案例有幾個方法可以實現,

原创 JS中淺克隆與深克隆

文章目錄淺克隆淺克隆代碼淺克隆圖示深克隆深克隆代碼深克隆圖示 淺克隆 淺克隆是隻克隆當前元素本身,裏面子元素不克隆 淺克隆代碼 <div id="box"> <p class="child1">11</p> <b

原创 JS中節點增減CD操作

文章目錄增加節點操作代碼一代碼一圖示代碼二代碼二圖示刪除節點操作代碼三代碼三圖示 增加節點操作 代碼一 <div id="box"> <p class="child1">11</p> <button class="

原创 雙飛翼佈局

文章目錄什麼是雙飛翼佈局雙飛翼佈局的特點怎麼實現雙飛翼佈局完整代碼展示雙飛翼佈局與聖盃佈局的不同聖盃佈局參考 什麼是雙飛翼佈局 聖盃佈局是一個兩側寬度固定,中間寬度自適應的三欄佈局 雙飛翼佈局的特點 中間部分在DOM結構上優先,

原创 聖盃佈局

文章目錄什麼是聖盃佈局聖盃佈局的特點怎麼實現聖盃佈局完整代碼展示雙飛翼佈局 什麼是聖盃佈局 聖盃佈局是一個兩側寬度固定,中間寬度自適應的三欄佈局 聖盃佈局的特點 中間部分在DOM結構上優先,以便先行渲染 允許三列中的任意一列成爲