脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h4>双向数据绑定</h4> <p>这将是全宇宙最简单的双向数据绑定示例。</p> <p>上一期我们已经成功地通过<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>给html绑定了数据,也在console里面看到了数据是可以实时进行更改的。想要实现在网页上根据用户的输入呈现出实时的更新,我们需要用到Vue的一个指令:<code>v-model</code>。这是一个专门针对表单的指令。</p> <p>我们可以简单地把Vue指令理解为一些Vue封装好的方法,方便我们更快地在html里面绑定数据,以及操作与数据相关的html部分。它们全部都会以<code>v-</code>开头。</p> <p>所以我们的js代码不需要变,html稍微改一下,在页面就可以马上看到效果。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="</p> <div id=&quot;app&quot;> <input type=&quot;text&quot; v-model=&quot;info&quot;> </div> <p> <!-- ... ... --> <script type=&quot;text/javascript&quot;> <a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a> app = <a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a> Vue({ el: '#app', data: { <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>fo: 'hello hacker cafe' } }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"info"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-comment">&lt;!-- ... ... --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/<a href="http://www.js-code.com/tag/java" title="浏览关于“java”的文章" target="_blank" class="tag_link">java</a>script"</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data: { info: <span class="hljs-string">'hello hacker cafe'</span> } }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>但是即使这样,我们修改input里面的内容,什么事情都没有发生啊?</p> <p>我们在html里面多加一行,就ok了:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <input class=&quot;text-input&quot; type=&quot;text&quot; v-model=&quot;info&quot;> </p> <div class=&quot;alert alert-info&quot;>{{ info }}</div> </p></div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"info"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/alert" title="浏览关于“alert”的文章" target="_blank" class="tag_link">alert</a> alert-info"</span>&gt;</span>{{ info }}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p>效果如图:<br /><span class="img-wrap"><img data-src="/img/bVGJ3a?w=583&amp;h=167" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="双向数据绑定1" title="双向数据绑定1" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVGJ3b?w=584&amp;h=164" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="双向数据绑定2" title="双向数据绑定2" style="cursor: pointer;"></span></p> <h4>vue-devtools</h4> <p>初次安装好vue-devtools以后,需要关闭chrome devtool再开,才能看见vue的标签(通常在最后)。如果你正在使用我提供的html,或者同样也是在浏览器访问自己本机写的html,需要在vue-devtools的设置里面勾选“允许访问文件URL”(如图)。</p> <p><span class="img-wrap"><img data-src="/img/bVGJ3g?w=742&amp;h=135" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="vue-devtools设置" title="vue-devtools设置" style="cursor: pointer;"></span></p> <p>打开vue-devtools以后,点击<code>&lt;Root&gt; == $vm0</code>这一行,会看到新开的右侧栏,并且已经读取到我们往vue里面绑定的数据(如图)。</p> <p><span class="img-wrap"><img data-src="/img/bVGJ3i?w=1120&amp;h=197" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="vue-devtools设置" title="vue-devtools设置" style="cursor: pointer;"></span></p> <p>在input里面进行一些修改,可以看到三处同时更新:</p> <p><span class="img-wrap"><img data-src="/img/bVGT24?w=1317&amp;h=389" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="single-source-of-truth" title="single-source-of-truth" style="cursor: pointer;"></span></p> <p>回想一下jq的年代,需要很繁复的步骤:在<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>m里面find一下目标元素,拿到它的text值,然后进行修改。如果你说这还是能接受的,那么痛点是:你在其它地方再需要修改这个值,你就要每次都把这些步骤重复一回,而且,这些改动都只能修改到自身。</p> <p>这里vue的做法,涉及到一个很重要的概念:Single Source of Truth(我的翻译:数据源唯一)。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>也就是说,上面谈到的这几处地方,它们指向的数据源是同一个。所以,当其中一处对<code>info</code>(数据源)进行了修改,其它地方也会马上得到体现。</p> <p>本期就到这里,敬请期待下一期:常用指令合集</p> <h4>写在最后</h4> <p>源码地址:<a href="https://github.com/levblanc/vue-2-basics" rel="nofollow noreferrer" target="_blank">https://github.com/levblanc/v...</a></p> <p>视频攻略:小的不才,为求一赞,自制 <a href="http://www.bilibili.com/video/av7517416/" rel="nofollow noreferrer" target="_blank">本期视频攻略</a> 在此。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过