双向数据绑定

这将是全宇宙最简朴的双向数据绑定示例。

上一期我们已成功地经由过程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…

视频攻略：小的鄙人，为求一赞，克己 本期视频攻略 在此。