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