Vue 2 | PART 2 双向绑定和vue-devtools

Richard_Gao 发布于2019-08-20 13:35 / 933人阅读

摘要：双向数据绑定这将是全宇宙最简单的双向数据绑定示例。这是一个专门针对表单的指令。也就是说，上面谈到的这几处地方，它们指向的数据源是同一个。所以，当其中一处对数据源进行了修改，其它地方也会马上得到体现。

双向数据绑定

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

上一期我们已经成功地通过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...

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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