Vue.js第一天学习笔记（数据的双向绑定、常用指令）

数据的双向绑定(ES6写法)

效果:

没有改变 input 框里面的值时:

将input 框里面的值清空时:

重新给  input 框输入  豆豆 后页面中  span  里绑定{{testData.name}}的值随着 input 框值的变化而变化.

在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。并且v-model指令只能用于:、、这三种标签。</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <div> <div class="form-inline mg-top"> <div class="form-group"> <label class="control-label">姓名:</label><span class="control-span">姓名变为:{{testData.name}}</span></div></div></div></pre> </div> <p>Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项，但最核心的是以下几个：</p> <p><span style="color: #000000"><strong>模板（template）：</strong>模板声明了数据和最终展现给用户的DOM之间的映射关系。<br /><strong>注册组件（components）：</strong>注册之后即可在父组件模板中以自定义元素的形式调用一个子组件。<br /><strong>初始数据（data）：</strong>一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。<br /><strong>接受的外部参数(props)：</strong>组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式地声明为双向绑定。<br /><strong>方法（methods）：</strong>对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。<br /><strong>生命周期钩子函数（lifecycle hooks）：</strong>一个组件会触发多个生命周期钩子函数，比如created，attached，destroyed等等。在这些钩子函数中，我们可以封装一 些自定义的逻辑。和传统的MVC相比，可以理解为 Controller的逻辑被分散到了这些钩子函数中。<br /><strong>私有资源（assets）：</strong>Vue.js当中</span>将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突，一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。</p> <p><strong>常用指令：</strong></p> <p>所谓 指令 ，其实本质就是在模板中出现的特殊标记，根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作。</p> <p>常用指令：</p> <ul> <li>v-if指令</li> <li>v-show指令</li> <li>v-else指令</li> <li>v-for指令</li> <li>v-bind指令</li> <li>v-on指令</li> </ul> <p><span style="color: #800000"><strong>v-if指令：</strong></span></p> <p>v-if根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ，将提出它的内容作为条件块。</p> <p>labelShowFlag是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。</p> <p style="text-align: center"> <p>html：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <label class="control-label">喵嘞个咪</label><label class="control-label">张三</label></pre> </div> <p>js：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p><span style="color: #800000"><strong>v-show指令：</strong></span></p> <p>v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，v-show 只是简单的切换元素的 CSS 属性 display。</p> <p style="text-align: center"> <p style="text-align: center"> <p>html：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <label class="control-label">喵嘞个咪</label><label class="control-label">张三</label></pre> </div> <p>js：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p><span style="color: #800000"><strong>v-else指令：</strong></span></p> <p>可以用 v-else 指令给 v-if 或 v-show 添加一个 “else 块”，并且v-else 元素必须立即跟在 v-if 或 v-show 元素的后面――否则它不能被识别。</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <label class="control-label">喵嘞个咪</label><label class="control-label">张三</label><label class="control-label">不是张三</label></pre> </div> <p><span style="color: #800000"><strong> v-for指令：</strong></span></p> <p>可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为 item in items，items 是数据数组，item 是当前数组元素的别名：</p> <p style="text-align: center"> <p>html:</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <ul> <li> {{ item.message }} </li></ul></pre> </div> <p>js:</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p><span style="color: #800000"><strong>v-bind指令：</strong></span></p> <p>v-bind 指令用于响应地更新 HTML 特性 形式如：v-bind:class</p> <p>html：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <label class="control-label">我是粉色的</label><label class="control-label">默认</label></pre> </div> <p><span style="color: #800000"><strong>v-on指令:</strong></span></p> <p>v-on 指令用于监听DOM事件 形式如：v-on:click  缩写为 @click;</p><div><div class="_t33rkthes8f"></div><script type="text/javascript">(window.slotbydup = window.slotbydup || []).push({id: "u6795179",container: "_t33rkthes8f",async: true});</script></div> <p>html：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p>js:</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p>本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。</p> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com" rel="nofollow" >gaodaima搞代码网</a>。</p> </div> <p>以上就是Vue.js第一天学习笔记（数据的双向绑定、常用指令）的详细内容，更多请关注<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com" rel="nofollow" ></p> <div>本文来源gaodai.ma#com搞##代!^码7网</div> <p>gaodaima搞代码网</a>其它相关文章！</p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com‍</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/173841.html" target="_blank" title="Vue.js第一天学习笔记（数据的双向绑定、常用指令）">Vue.js第一天学习笔记（数据的双向绑定、常用指令）</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> </p> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="173841" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> </footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/183672.html" title="Vue.js 快速入门" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/7.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Vue.js 快速入门" /><br><span class="r_title">Vue.js 快速入门</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/183666.html" title="Vue.js开发的4个基本ES2015特性" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/5.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Vue.js开发的4个基本ES2015特性" /><br><span class="r_title">Vue.js开发的4个基本ES2015特性</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/183667.html" title="2019年的Vue发展：您需要了解的内容" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/6.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="2019年的Vue发展：您需要了解的内容" /><br><span class="r_title">2019年的Vue发展：您需要了解的内容</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/183668.html" title="扩展VueJS组件" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/12.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="扩展VueJS组件" /><br><span class="r_title">扩展VueJS组件</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183672.html">Vue.js 快速入门</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183666.html">Vue.js开发的4个基本ES2015特性</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183667.html">2019年的Vue发展：您需要了解的内容</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183668.html">扩展VueJS组件</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183669.html">VueJS项目的5个很棒的样板/模板</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183670.html">使用Vuelidate进行简单的Vue.js表单验证</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183671.html">vue.js 入门基础</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/183664.html">用于VueJS和Webpack的代码分割模式</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><!-- 多条广告如下脚本只需引入一次 --><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};">