建站
咨詢
售后
建站咨詢
新聞中心
vue2.0教程？
1.vue的特點(diǎn)
采用了組件化模式，提高代碼復(fù)用率、讓代碼更好維護(hù)
聲明式編碼，讓編碼人員無(wú)需直接操作DOM，提高開發(fā)效率（命令式和聲明式的不同）
使用虛擬DOM + 優(yōu)秀的diff算法，盡量符用DOM節(jié)點(diǎn)
2.vue的數(shù)據(jù)綁定和模板語(yǔ)法
通過(guò)el屬性可以將vue模板掛載到指定的html標(biāo)簽上，而掛載使得視圖層能夠讀取來(lái)自model的數(shù)據(jù)；比如使用模板語(yǔ)法讀取data屬性中的數(shù)據(jù)；除此之外，在視圖層改變數(shù)據(jù)時(shí)也會(huì)直接影響到data屬性中的數(shù)據(jù)，從而實(shí)現(xiàn)了雙向數(shù)據(jù)流的綁定；
3.vue的事件處理
vue能通過(guò)使用v-on指令實(shí)現(xiàn)事件綁定的效果，能夠?qū)ΤＲ?jiàn)的事件，如click、keyup等；除此之外，vue-on綁定的事件還支持添加修飾符，如.once、prevent、stop等；
vue 怎么讓輸入框改變兩次？
在 Vue 中，可以通過(guò) v-model 綁定輸入框的值到組件的 data 中，然后在輸入框的 input 事件中手動(dòng)觸發(fā)一個(gè)數(shù)據(jù)更新，使得輸入框的值改變兩次。具體實(shí)現(xiàn)方式如下：
1. 在組件的 data 中定義一個(gè) inputValue 變量，并將其綁定到輸入框的 v-model 中。
2. 在輸入框的 input 事件中，先將 inputValue 更新為當(dāng)前輸入框的值，然后再將其更新為一個(gè)空字符串，這樣就能讓輸入框的值改變兩次了。
示例代碼如下：
```
```
這樣就能讓輸入框的值改變兩次了，第一次是輸入框的值更新到組件的 data 中，第二次是將 inputValue 更新為一個(gè)空字符串，使得輸入框的值變?yōu)榭铡?/p>
在 Vue 中，我們可以使用 v-model 指令來(lái)實(shí)現(xiàn)雙向綁定，在輸入框中輸入內(nèi)容時(shí)，數(shù)據(jù)會(huì)自動(dòng)更新。如果需要讓輸入框改變兩次，可以通過(guò)在 v-model 綁定的數(shù)據(jù)后面加上修飾符 .lazy 或 .trim 來(lái)實(shí)現(xiàn)。
.lazy 修飾符表示在輸入框失去焦點(diǎn)或按下回車鍵后才更新數(shù)據(jù)，這樣用戶需要先輸入兩次才能觸發(fā)數(shù)據(jù)更新。例如：
.trim 修飾符表示在輸入時(shí)自動(dòng)去除首尾空格，如果用戶在輸入時(shí)加了空格，那么輸入框中的值和數(shù)據(jù)中的值不一樣，需要再輸入一次才能觸發(fā)更新。例如：
通過(guò)使用這些修飾符，我們可以實(shí)現(xiàn)讓輸入框改變兩次的效果。
到此，以上就是小編對(duì)于vue事件修飾符和按鍵修飾符的問(wèn)題就介紹到這了，希望這2點(diǎn)解答對(duì)大家有用。
分享文章：vue2.0教程？（vue中有哪些事件修飾符）
分享路徑：http://www.5511xx.com/article/cophjco.html
