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

雙向數據綁定

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

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

咱們能夠簡單地把Vue指令理解爲一些Vue封裝好的方法，方便咱們更快地在html裏面綁定數據，以及操做與數據相關的html部分。它們所有都會以v-開頭。

因此咱們的js代碼不須要變，html稍微改一下，在頁面就能夠立刻看到效果。

<div id="app">
    <input type="text" v-model="info">
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            info: 'hello hacker cafe'
        }
    });
</script>

可是即便這樣，咱們修改input裏面的內容，什麼事情都沒有發生啊？

咱們在html裏面多加一行，就ok了：

<div id="app">
    <input class="text-input" type="text" v-model="info">
    <div class="alert alert-info">{{ info }}</div>
</div>

效果如圖：

vue-devtools

初次安裝好vue-devtools之後，須要關閉chrome devtool再開，才能看見vue的標籤（一般在最後）。若是你正在使用我提供的html，或者一樣也是在瀏覽器訪問本身本機寫的html，須要在vue-devtools的設置裏面勾選「容許訪問文件URL」（如圖）。

打開vue-devtools之後，點擊<Root> == $vm0這一行，會看到新開的右側欄，而且已經讀取到咱們往vue裏面綁定的數據（如圖）。

在input裏面進行一些修改，能夠看到三處同時更新：

回想一下jq的年代，須要很繁複的步驟：在dom裏面find一下目標元素，拿到它的text值，而後進行修改。若是你說這仍是能接受的，那麼痛點是：你在其它地方再須要修改這個值，你就要每次都把這些步驟重複一回，並且，這些改動都只能修改到自身。

這裏vue的作法，涉及到一個很重要的概念：Single Source of Truth（個人翻譯：數據源惟一）。

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

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

寫在最後

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

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