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...

视频攻略：小的不才，为求一赞，自制 本期视频攻略 在此。