vue2.0框架认识
虛擬dom和聲明式渲染:
Vue的編譯器在編譯模板之后,會把這些模板編譯成一個渲染函數 。而函數被調用的時候就會渲染并且返回一個 虛擬DOM的樹 。
這個樹非常輕量,它的職責就是描述當前界面所應處的狀態。當我們 有了這個虛擬的樹之后,再交給一個patch函數,負責把這些虛擬DOM真正施加到真實的DOM上 。
在這個過程中,Vue有自身的響應式系統來偵測在渲染過程中所依賴到的數據來源。在渲染過程中,偵測到的數據來源之后,之后就可以精確感知數據源的變動。
到時候就可以根據需要重新進行渲染。當重新進行渲染之后,會生成一個新的樹,將新樹與舊樹進行對比,就可以最終得出應施加到真實DOM上的改動。
Vue是一個數據驅動頁面的一個框架,基于MVVM模式,M指的是數據,V指得是視圖,VM是視圖模型,將數據綁定視圖上。
這個框架著重于VM部分,它以DOM元素為模版,提供數據綁定的功能。一個web app可能會含有多個vue組件。Vuex是基于vue的web app框架。
核心思想都是一樣,把UI結構映射到恰當的組件樹 ↓↓↓↓↓↓↓↓↓↓↓↓↓
父子通訊:
在Vue中,父子組件之間的通信是通過 props 傳遞。
.vue文件??
Vue的組件引入構建工具之后有一個 單文件組件概念 ,如
在同一個Vue文件里,可以同時寫 template, script 和 style,三個東西放在一個里面。
同時,Vue的單文件組件和 Web Components 有一個本質不同,它是基于構建工具實現。
這樣的好處是有了一個構建的機會,可以對這些單文件組件做更多的分析處,在每一個語言塊里可以單獨使用不同的處理器
這三個東西是一個單向數據流,State 驅動 View 的渲染,而用戶對 View 進行操作產生 Action,會使State產生變化,從而導致 View 重新渲染。
state--->view---->Action(再回到state去)
css引入時:scoped
優勢:不同的頁面即使相同的層級、相同的class或者id都不會互相影響。
2、css使用 style的動態樣式表
使用vue的過程中,發現使用的不是平時開發用的 style后綴的文件,而是類似于less/sass 的動態樣式。
優勢:動態的樣式表,層級更加精確、減少了幾乎所有的層級冗余代碼、可以設置樣式變量這樣會減少很多的樣式不統一的錯誤,以及減少代碼量等,這樣大大加快了樣式的開發速度。
vuc-cli
npm run dev
npm run dev:熱重載,在項目腳手架搭建完成之后,運行這個命令行,會開啟代碼做了修改之后,一旦ctrl+s,或者焦點離開IDE,就會局部刷新頁面。
但是美中不足的是,當動態的數據發生變化后,頁面DOM是沒有刷新的,只有手動刷新頁面DOM數據才會發生變化。當然,在vue已經提供了強大的方便的前提下,這點小瑕疵是我完全可以接受的。
嚴格模式
語法檢查可要可不要(建議開啟代碼規范前期初學者可關閉)
作用域:
通過el定義一個Vue視圖的容器元素,可以傳遞css選擇器,id選擇,類選擇器,元素名稱選擇器等等
頁面中有多個符合條件選擇器,vue只會捕獲第一個符合條件的選擇器對應的元素選擇器
data:數據綁定實現了將模型到視圖模型的綁定
總結起來:(1) 簡潔 (2) 輕量 (3)快速 (4) 數據驅動 (5) 模塊化 (6) 組件化Vue
項目骨架:static靜態文件 src下 static這個文件夾下的文件(夾)會按照原本的結構放在網站根目錄下,這樣按默認打包后,就不會圖片路徑錯誤而無法顯示
轉載于:https://www.cnblogs.com/lhl66/p/7860127.html
總結
以上是生活随笔為你收集整理的vue2.0框架认识的全部內容,希望文章能夠幫你解決所遇到的問題。