Vue上手初體驗(yàn)

Eirunye 發(fā)布于2019-08-21 11:19 / 1903人閱讀

摘要：已經(jīng)建立了和數(shù)據(jù)之間的連接，此時(shí)任何對(duì)的改動(dòng)，都會(huì)觸發(fā)的更新。是一個(gè)雙向綁定，意味著當(dāng)在當(dāng)前上所對(duì)應(yīng)的數(shù)據(jù)發(fā)生改變時(shí)，更新的值當(dāng)用戶在中修改或輸入內(nèi)容的時(shí)候，同步上對(duì)應(yīng)的數(shù)據(jù)。

Vue.js

vue.js不是一個(gè)框架，他只是一個(gè)提供MVVM風(fēng)格的雙向綁定的庫(kù)，專注于UI層面。

在 Vue.js 的定義中，View 就是用戶實(shí)際看到的 DOM 元素，而 Model 就是原生的JavaScript 對(duì)象。作為開發(fā)者，真正需要關(guān)注的只有 ViewModel，也就是 Vue.js 所提供的 Vue 構(gòu)建函數(shù):

我們來(lái)看一個(gè)Vue實(shí)例：

//這個(gè)是我們的HTM

    {{mesData}}
    

//然后我在模板里面定義v-model，這樣就可以在全局利用vm.thisiModel來(lái)操作數(shù)據(jù)了

這個(gè)時(shí)候我們?cè)趇nput里面輸入數(shù)據(jù)時(shí)  會(huì)動(dòng)態(tài)的傳輸?shù)綄?duì)應(yīng)的數(shù)據(jù)層。

Vue.js 已經(jīng)建立了 DOM 和數(shù)據(jù)之間的連接，此時(shí)任何對(duì) data.thisisModel 的改動(dòng)，都會(huì)觸發(fā) DOM 的更新。這樣我們就可以將vm.thisisModel通過ajax請(qǐng)求，封裝成param對(duì)象，栓送數(shù)據(jù)，獲取到對(duì)應(yīng)的數(shù)據(jù)，完成數(shù)據(jù)的提交和綁定，以及更改刷新。

directive

如果你沒用過 Angular，那你可能不知道 directive(指令) 是什么。v-model 就是一個(gè) directive。
 ######

簡(jiǎn)單來(lái)說(shuō)，directive就是一個(gè)特殊的HTML屬性，當(dāng)vue.js看到v-model時(shí)，就知道要對(duì)當(dāng)前的DOM元素做些什么。v-model是一個(gè)雙向綁定，意味著：
1.當(dāng) "thisisModel" 在當(dāng)前 ViewModel 上所對(duì)應(yīng)的數(shù)據(jù)發(fā)生改變時(shí)，更新的值；
2.當(dāng)用戶在中修改或輸入內(nèi)容的時(shí)候，同步 ViewModel 上 "message" 對(duì)應(yīng)的數(shù)據(jù)。