資訊專欄INFORMATION COLUMN
摘要：雙向數(shù)據(jù)綁定這將是全宇宙最簡(jiǎn)單的雙向數(shù)據(jù)綁定示例。這是一個(gè)專門(mén)針對(duì)表單的指令。也就是說(shuō)，上面談到的這幾處地方，它們指向的數(shù)據(jù)源是同一個(gè)。所以，當(dāng)其中一處對(duì)數(shù)據(jù)源進(jìn)行了修改，其它地方也會(huì)馬上得到體現(xiàn)。
雙向數(shù)據(jù)綁定
這將是全宇宙最簡(jiǎn)單的雙向數(shù)據(jù)綁定示例。
上一期我們已經(jīng)成功地通過(guò)Vue給html綁定了數(shù)據(jù)，也在console里面看到了數(shù)據(jù)是可以實(shí)時(shí)進(jìn)行更改的。想要實(shí)現(xiàn)在網(wǎng)頁(yè)上根據(jù)用戶的輸入呈現(xiàn)出實(shí)時(shí)的更新，我們需要用到Vue的一個(gè)指令：v-model。這是一個(gè)專門(mén)針對(duì)表單的指令。
我們可以簡(jiǎn)單地把Vue指令理解為一些Vue封裝好的方法，方便我們更快地在html里面綁定數(shù)據(jù)，以及操作與數(shù)據(jù)相關(guān)的html部分。它們?nèi)慷紩?huì)以v-開(kāi)頭。
所以我們的js代碼不需要變，html稍微改一下，在頁(yè)面就可以馬上看到效果。
但是即使這樣，我們修改input里面的內(nèi)容，什么事情都沒(méi)有發(fā)生啊？
我們?cè)趆tml里面多加一行，就ok了：
{{ info }}
效果如圖：
初次安裝好vue-devtools以后，需要關(guān)閉chrome devtool再開(kāi)，才能看見(jiàn)vue的標(biāo)簽（通常在最后）。如果你正在使用我提供的html，或者同樣也是在瀏覽器訪問(wèn)自己本機(jī)寫(xiě)的html，需要在vue-devtools的設(shè)置里面勾選“允許訪問(wèn)文件URL”（如圖）。
打開(kāi)vue-devtools以后，點(diǎn)擊
在input里面進(jìn)行一些修改，可以看到三處同時(shí)更新：
回想一下jq的年代，需要很繁復(fù)的步驟：在dom里面find一下目標(biāo)元素，拿到它的text值，然后進(jìn)行修改。如果你說(shuō)這還是能接受的，那么痛點(diǎn)是：你在其它地方再需要修改這個(gè)值，你就要每次都把這些步驟重復(fù)一回，而且，這些改動(dòng)都只能修改到自身。
這里vue的做法，涉及到一個(gè)很重要的概念：Single Source of Truth（我的翻譯：數(shù)據(jù)源唯一）。
也就是說(shuō)，上面談到的這幾處地方，它們指向的數(shù)據(jù)源是同一個(gè)。所以，當(dāng)其中一處對(duì)info（數(shù)據(jù)源）進(jìn)行了修改，其它地方也會(huì)馬上得到體現(xiàn)。
本期就到這里，敬請(qǐng)期待下一期：常用指令合集
寫(xiě)在最后源碼地址：https://github.com/levblanc/v...
視頻攻略：小的不才，為求一贊，自制 本期視頻攻略 在此。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81125.html
摘要：為了使界面稍微養(yǎng)眼一點(diǎn)，直接使用的。在里面它只接受表達(dá)式。后續(xù)的找了個(gè)免費(fèi)音頻錄制軟件，能稍微加大點(diǎn)音量。做的不好的地方大家多提意見(jiàn)和建議。 這是一個(gè)純新手向的攻略系列（不是權(quán)威 「教程」），它： √ 使用最簡(jiǎn)單的文字進(jìn)行解釋√ 每期分享一個(gè)點(diǎn)，長(zhǎng)度適中，適合碎片時(shí)間閱讀√ 圖片均壓縮在50k以下，把流量消耗降到最低（其中一期因?yàn)榻仄亮吮容^大的面積用來(lái)展示效果，所以會(huì)稍微超出這個(gè)限制）...
之前在vue里面綁定數(shù)據(jù)，都只是單個(gè)地綁定。這期我們來(lái)看一下怎樣渲染列表，然后通過(guò)事件監(jiān)聽(tīng)方法往列表里面增加item。 列表渲染 廢話不多說(shuō)，直接上代碼： {{ item }} var app = new Vue({ el: #app, data: { list: [ ...
摘要：執(zhí)行的時(shí)候，會(huì)綁定上下文對(duì)象為組件實(shí)例于是中的就能取到組件實(shí)例本身，的代碼塊頂層作用域就綁定為了組件實(shí)例于是內(nèi)部變量的訪問(wèn)，就會(huì)首先訪問(wèn)到組件實(shí)例上。其中的獲取，就會(huì)先從組件實(shí)例上獲取，相當(dāng)于。 寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺(jué)得...
摘要：記錄一些小技巧和踩過(guò)的坑由于本篇文章內(nèi)容太多，導(dǎo)致編輯器有點(diǎn)卡，所以新開(kāi)辟了一篇實(shí)踐二，后續(xù)再這里更新。組件的生命周期函數(shù)是在標(biāo)簽里的數(shù)據(jù)發(fā)生變化時(shí)候觸發(fā)數(shù)據(jù)可能更新了，但是沒(méi)有綁定到上面的話，不會(huì)調(diào)用鉤子函數(shù)。 記錄一些小技巧和踩過(guò)的坑 由于本篇文章內(nèi)容太多，導(dǎo)致SF編輯器有點(diǎn)卡，所以新開(kāi)辟了一篇 vue2實(shí)踐（二），后續(xù)再這里更新。 1. props 帶不帶冒號(hào)的區(qū)別 ...
摘要：在大家的鞭策和鼓勵(lì)下，這個(gè)基礎(chǔ)的系列終于完成了。關(guān)于更新的頻率，因?yàn)槭俏易约阂粋€(gè)人在做，文案視頻都準(zhǔn)備好了才發(fā)的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因?yàn)楣痉偶倭?。不過(guò)月份的更新速度真的不能保證，抱歉。 在大家的鞭策和鼓勵(lì)下，這個(gè)基礎(chǔ)API的系列終于完成了。所幸是沒(méi)有真的更到一百期才完結(jié)（笑）。最初是因?yàn)橛X(jué)得錄視頻好玩，才挖的這個(gè)坑。也想過(guò)中途放棄，關(guān)掉專欄，但由于...
閱讀 3000·2021-11-23 09:51
閱讀 2820·2021-11-11 16:55
閱讀 2935·2021-10-14 09:43
閱讀 1404·2021-09-23 11:22
閱讀 1045·2019-08-30 11:04
閱讀 1674·2019-08-29 11:10
閱讀 970·2019-08-27 10:56
閱讀 3125·2019-08-26 12:01
