P33了解vue

vue是一款框架

P34vue兩個(gè)特性（面試）

????1.數(shù)據(jù)驅(qū)動(dòng)視圖

????????vue監(jiān)聽(tīng)頁(yè)面的變化自動(dòng)渲染到頁(yè)面結(jié)構(gòu)

????2.雙向數(shù)據(jù)綁定

????????開發(fā)者不操作DOM的前提下自動(dòng)將數(shù)據(jù)同步到數(shù)據(jù)源

P35 MVVM

viewModel也就是VUE

Model 數(shù)據(jù)源

view 頁(yè)面結(jié)構(gòu)

P36 vue初步使用

沒(méi)有l(wèi)ib資源 不要著急

輸入

https://cn.vuejs.org/v2/guide/installation.html?

下載下來(lái)為vue.js 如果你怕出現(xiàn)各種bug 可以名字改為和老師一樣

你首先建立一個(gè)day02文件夾 在文件cmd打開黑窗口輸入

npm install bootstrap@3

他會(huì)將bootstrap.css文件下載入node_modules

直接搜索bootstrap.css 復(fù)制出來(lái)?

dayjs.min.js 也是如此 在黑窗口中輸入

npm install dayjs --save

接著在node_modules搜索出dayjs.min.js?

他會(huì)多出很多保存依賴的文件夾直接全部刪除確保和老師的一模一樣

?

vue固定語(yǔ)法

P38內(nèi)容渲染指令

P38內(nèi)容渲染指令

v-text ：一般都是覆蓋標(biāo)簽中原本內(nèi)容

{{}} ： 差值表達(dá)式? 專門解決 text覆蓋問(wèn)題 只能用在元素內(nèi)容中

? ? ? ? ?在差值中可以做簡(jiǎn)單的計(jì)算

v-html：可以把標(biāo)簽渲染出來(lái)例如<p><span>

P40屬性綁定指令

?v-bind：可以動(dòng)態(tài)綁定值 可以簡(jiǎn)寫為：

P42事件綁定指令?

v-on：click=“ ”?鼠標(biāo)單擊事件

? ?methods：定義事件處理函數(shù)?

可以用vm 調(diào)用到 data里面的值? 相等于this

在綁定調(diào)用方法的時(shí)候 可以加小括號(hào)（）進(jìn)行傳參

簡(jiǎn)寫為 @?

當(dāng)點(diǎn)擊時(shí)候不傳入?yún)?shù)時(shí)候 也就是不寫小括號(hào)? 可以接收到按鈕對(duì)象? 根據(jù)他可以操作按鈕的DOM??

當(dāng)有小括號(hào)時(shí) 傳入的參數(shù)就是寫入的參數(shù)?

如果你還想?yún)㈠e(cuò)按鈕的DOM 可以傳參時(shí)候加入 $event 這是固定寫法 （不常用）

P48事件修飾符

在事件綁定指令中 用接受的默認(rèn)參數(shù).preventDefault（）?阻止需求

但是字母太長(zhǎng) 可以在點(diǎn)擊時(shí)候直接寫@click.prevent效果一樣

P50按鍵修飾符

??v-on：keyup.esc? 按ESC觸發(fā)某個(gè)方法 例如清空或者回退?

e.target.value= '' 即可清空內(nèi)容

v-on：keyup.enter按下回車出發(fā)某個(gè)方法

P51雙向綁定指令

v-model 更改v-model的值 數(shù)據(jù)源會(huì)發(fā)成變化 與v-bind不同?

v-bind數(shù)據(jù)只會(huì)隨著數(shù)據(jù)源變動(dòng)而變動(dòng)?

只有表單元素才能使用v-model 例如 1.input 2.textarea 3.select

P52雙向綁定修飾符

在輸入框中有時(shí)候輸入的值會(huì)轉(zhuǎn)換成字符串?

v-model.number 會(huì)在輸入的時(shí)候先轉(zhuǎn)換為數(shù)字

v-model.trim 自動(dòng)過(guò)濾用戶輸入的首尾空白字符

v-model.lazy 在對(duì)話框失去焦點(diǎn)后才會(huì)改變數(shù)據(jù)源? ---“ 懶”

要學(xué)習(xí)東西少 原理比較多 多看看多記