Vue 2 | PART 2 雙向綁定和vue-devtools

Richard_Gao 發布于2019-08-20 13:35 / 934人閱讀

摘要：雙向數據綁定這將是全宇宙最簡單的雙向數據綁定示例。這是一個專門針對表單的指令。也就是說，上面談到的這幾處地方，它們指向的數據源是同一個。所以，當其中一處對數據源進行了修改，其它地方也會馬上得到體現。

雙向數據綁定

這將是全宇宙最簡單的雙向數據綁定示例。

上一期我們已經成功地通過Vue給html綁定了數據，也在console里面看到了數據是可以實時進行更改的。想要實現在網頁上根據用戶的輸入呈現出實時的更新，我們需要用到Vue的一個指令：v-model。這是一個專門針對表單的指令。

我們可以簡單地把Vue指令理解為一些Vue封裝好的方法，方便我們更快地在html里面綁定數據，以及操作與數據相關的html部分。它們全部都會以v-開頭。

所以我們的js代碼不需要變，html稍微改一下，在頁面就可以馬上看到效果。

但是即使這樣，我們修改input里面的內容，什么事情都沒有發生啊？

我們在html里面多加一行，就ok了：


    
    {{ info }}

效果如圖：

vue-devtools

初次安裝好vue-devtools以后，需要關閉chrome devtool再開，才能看見vue的標簽（通常在最后）。如果你正在使用我提供的html，或者同樣也是在瀏覽器訪問自己本機寫的html，需要在vue-devtools的設置里面勾選“允許訪問文件URL”（如圖）。

打開vue-devtools以后，點擊 == $vm0這一行，會看到新開的右側欄，并且已經讀取到我們往vue里面綁定的數據（如圖）。

在input里面進行一些修改，可以看到三處同時更新：

回想一下jq的年代，需要很繁復的步驟：在dom里面find一下目標元素，拿到它的text值，然后進行修改。如果你說這還是能接受的，那么痛點是：你在其它地方再需要修改這個值，你就要每次都把這些步驟重復一回，而且，這些改動都只能修改到自身。

這里vue的做法，涉及到一個很重要的概念：Single Source of Truth（我的翻譯：數據源唯一）。

也就是說，上面談到的這幾處地方，它們指向的數據源是同一個。所以，當其中一處對info（數據源）進行了修改，其它地方也會馬上得到體現。

本期就到這里，敬請期待下一期：常用指令合集

寫在最后

源碼地址：https://github.com/levblanc/v...

視頻攻略：小的不才，為求一贊，自制本期視頻攻略在此。

GPU云服務器云服務器 Part-2 vue.js 2 cdn vue.js 2.0 cdn 單向數據流和雙向綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81125.html

Vue 2 | PART 1 跟世界打個招呼吧

摘要：為了使界面稍微養眼一點，直接使用的。在里面它只接受表達式。后續的找了個免費音頻錄制軟件，能稍微加大點音量。做的不好的地方大家多提意見和建議。這是一個純新手向的攻略系列（不是權威「教程」），它： √ 使用最簡單的文字進行解釋√ 每期分享一個點，長度適中，適合碎片時間閱讀√ 圖片均壓縮在50k以下，把流量消耗降到最低（其中一期因為截屏了比較大的面積用來展示效果，所以會稍微超出這個限制）...

jerryloveemily 2019-08-21 11:22 評論0 收藏0
Vue 2 | Part 5 列表渲染和事件監聽

之前在vue里面綁定數據，都只是單個地綁定。這期我們來看一下怎樣渲染列表，然后通過事件監聽方法往列表里面增加item。列表渲染廢話不多說，直接上代碼： {{ item }} var app = new Vue({ el: #app, data: { list: [ ...

Nekron 2019-08-20 13:55 評論0 收藏0
【Vue原理】VModel - 白話版

摘要：執行的時候，會綁定上下文對象為組件實例于是中的就能取到組件實例本身，的代碼塊頂層作用域就綁定為了組件實例于是內部變量的訪問，就會首先訪問到組件實例上。其中的獲取，就會先從組件實例上獲取，相當于。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得...

keke 2019-08-23 18:25 評論0 收藏0
vue2實踐（持續更新）

摘要：記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致編輯器有點卡，所以新開辟了一篇實踐二，后續再這里更新。組件的生命周期函數是在標簽里的數據發生變化時候觸發數據可能更新了，但是沒有綁定到上面的話，不會調用鉤子函數。記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致SF編輯器有點卡，所以新開辟了一篇 vue2實踐（二），后續再這里更新。 1. props 帶不帶冒號的區別 ...

n7then 2019-08-20 15:05 評論0 收藏0
Vue 2 | 基礎API系列文章合集

摘要：在大家的鞭策和鼓勵下，這個基礎的系列終于完成了。關于更新的頻率，因為是我自己一個人在做，文案視頻都準備好了才發的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因為公司放假了。不過月份的更新速度真的不能保證，抱歉。在大家的鞭策和鼓勵下，這個基礎API的系列終于完成了。所幸是沒有真的更到一百期才完結（笑）。最初是因為覺得錄視頻好玩，才挖的這個坑。也想過中途放棄，關掉專欄，但由于...

instein 2019-08-20 14:00 評論0 收藏0