1小時學會Vue之核心語法 趁著暑假掌握一門技能 大學生前端實習畢業(yè)設計必...

一、定義:是一個漸進式的JavaScript框架
二、特點:
- 減少了大量的DOM操作編寫 ,可以更專注于邏輯操作
- 分離數(shù)據(jù)和界面的呈現(xiàn),降低了代碼耦合度
- 支持組件化開發(fā),更利于中大型項目的代碼組織
三、.vue2核心功能:
1、響應式數(shù)據(jù)與差值表達式
先實例化vue,在內(nèi)部設置el(選擇器,這個vm實例對誰生效),data 聲明響應式數(shù)據(jù),return()方法來寫,插值表達式使用{{}},method封裝方法(與data同級)

2、計算屬性 computed
當對象定義,當屬性使用。具有緩存性

3、偵聽器 watch
參與響應式的過程,響應式數(shù)據(jù)發(fā)生改變時觸發(fā)

4、指定
- 內(nèi)容指令
v-text和v-html 會覆蓋原本內(nèi)容

- 渲染指令
v-for 渲染重復或可遍歷的

遍歷數(shù)組時,key就是index--索引;
遍歷對象時,key就是屬性名,index是索引,item是屬性值

v-if="true"渲染當前標簽,="false"銷毀當前標簽;
v-show="true"渲染當前標簽,="false"會給當前標簽添加display:none來隱藏當前標簽;
v-if 和 v-show可綁定一個響應式數(shù)據(jù)做動態(tài)設置

- 屬性指令 用來做一些屬性綁定 可配合響應式數(shù)據(jù)
v-bind 簡寫 :

- 事件指令 可代替操作DOM綁定事件 可配合methods里自定義的方法使用
v-on 簡寫 @

- 表單指令 實現(xiàn)數(shù)據(jù)和視圖的雙向數(shù)據(jù)綁定
v-model 可以讓用戶通過輸入框去干預響應式的內(nèi)容

- 修飾符 實現(xiàn)與指令之間的相關操作 可簡化代碼和DOM操作 添加在指令后面
比如:.trim 去除空格 v-model.trim

(啊,視頻兩倍速十幾分鐘就能看完,寫日記卻要一個小時左右,截圖還得自己手動截,沒時間找視頻時間戳了)
標簽: