双向数据绑定
这将是全宇宙最简朴的双向数据绑定示例。
上一期我们已成功地经由过程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…
视频攻略:小的鄙人,为求一赞,克己 本期视频攻略 在此。