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

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

效果:

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

将input 框里面的值清空时:

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

在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。并且v-model指令只能用于:、、这三种标签。</p> <p><div class="jb51code"><br /> <pre class="brush:xhtml;"></p> <template> <div> <div class="form-inline mg-top"> <div class="form-group"> <label class="control-label">姓名:</label> <input type="text" v-model='testData.name' class="form-control"> <span class="control-span">姓名变为:{{testData.name}}</span> </div> </div> </div> </template> <script> export default { components: { },ready: function(){ },methods: { },data() { return { testData:{ id:'1',name:'张三',age:'18' } } } } </script> </pre> </div> <p>Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项，但最核心的是以下几个：</p> <p><span style="color: #000000"><h3>模板（template）：</h3>模板声明了数据和最终展现给用户的DOM之间的映射关系。 <h3>注册组件（components）：</h3>注册之后即可在父组件模板中以自定义元素的形式调用一个子组件。 <h3>初始数据（data）：</h3>一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。 <h3>接受的外部参数(props)：</h3>组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式地声明为双向绑定。 <h3>方法（methods）：</h3>对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。 <h3>生命周期钩子函数（lifecycle hooks）：</h3>一个组件会触发多个生命周期钩子函数，比如created，attached，destroyed等等。在这些钩子函数中，我们可以封装一 些自定义的逻辑。和传统的MVC相比，可以理解为 Controller的逻辑被分散到了这些钩子函数中。 <h3>私有资源（assets）：</h3>Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突，一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。 </p> <p><h3>常用指令：</h3></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"><h3>v-if指令：</h3></p> <p>v-if根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。</p> <p>labelShowFlag是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。</p> <p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.52php.cn/file_images/article/201612/2016121144527667.jpg?2016111144533" /></p></p> <p>html：</p> <div class="jb51code"> <pre class="brush:xhtml;"> <label class="control-label" v-if='labelShowFlag'>喵嘞个咪</label> <label class="control-label" v-if="testData.name=='张三'" >张三</label> </pre> </div> <p>js：</p> <div class="jb51code"> <pre class="brush:js;"> <script> export default { components: { },data() { return { labelShowFlag:true,testData:{ id:'1',age:'18' } } } } </script> </pre> </div> <p><span style="color: #800000"><h3>v-show指令：</h3></p> <p>v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，v-show 只是简单的切换元素的 CSS 属性 display。</p> <p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.52php.cn/file_images/article/201612/2016121144641071.jpg?2016111144650" /></p></p> <p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.52php.cn/file_images/article/201612/2016121144702334.jpg?2016111144710" /></p></p> <p>html：</p> <div class="jb51code"> <pre class="brush:xhtml;"> <label class="control-label" v-show='labelShowFlag'>喵嘞个咪</label> <label class="control-label" v-show="testData.name=='张三'" >张三</label> </pre> </div> <p>js：</p> <div class="jb51code"> <pre class="brush:js;"> <script> export default { components: { },age:'18' } } } } </script> </pre> </div> <p><span style="color: #800000"><h3>v-else指令：</h3></p> <p>可以用 v-else 指令给 v-if 或 v-show 添加一个 “else 块”，并且v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。</p> <div class="jb51code"> <pre class="brush:xhtml;"> <label class="control-label" v-if='labelShowFlag'>喵嘞个咪</label> <label class="control-label" v-if="testData.name=='张三'" >张三</label> <label class="control-label" v-else>不是张三</label> </pre> </div> <p><span style="color: #800000"><h3>v-for指令：</h3></p> <p>可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为 item in items，items 是数据数组，item 是当前数组元素的别名：</p> <p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.52php.cn/file_images/article/201612/2016121144805262.jpg?2016111144813" /></p></p> <p>html:</p> <div class="jb51code"> <pre class="brush:xhtml;"> <ul> <li v-for="item in items"> {{ item.message }} </li> </ul> </pre> </div> <p>js:</p> <div class="jb51code"> <pre class="brush:js;"> <script> export default { components: { },age:'18' },items: [{ message: '豆豆' },{ message: '毛毛' }],} } } </script> </pre> </div> <p><span style="color: #800000"><h3>v-bind指令：</h3></p> <p>v-bind 指令用于响应地更新 HTML 特性 形式如：v-bind:class</p> <p>html：</p> <div class="jb51code"> <pre class="brush:xhtml;"> <label class="control-label" v-bind:class="{'pink-label': labelShowFlag}" >我是粉色的</label> <label class="control-label">默认</label> </pre> </div> <p><span style="color: #800000"><h3>v-on指令:</h3></p> <p>v-on 指令用于监听DOM事件 形式如：v-on:click 缩写为 @click;</p> <p>html：</p> <div class="jb51code"> <pre class="brush:xhtml;"> <input type="button" class="form-control btn btn-primary" value="提交" @click='saveFun'> </pre> </div> <p>js:</p> <div class="jb51code"> <pre class="brush:js;"> <script> export default { components: { },methods: { saveFun:function(){ alert('提交'); } },} } } </script> </pre> </div> <p>本文已被整理到了《》，欢迎大家学习阅读。</p> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。</p> <p style="text-align:right;">（编辑：李大同）</p> <p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p> </td> </tr> </table> </div> <div class="dede_pagess"><ul class="pagelist"></ul></div> <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div> <div class="g-box10"> <div class="t-2">相关内容</div> <ul class="b-box12"></ul> <ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/538917.html" target="_blank">ruby-on-rails – 动作视图::模板::错误(意外的标记：操作符</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/322200.html" target="_blank">POCO库中文编程参考指南（11）如何使用Reactor框架？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/58965.html" target="_blank">在oracle中where 子句和having子句中的区别</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/218974.html" target="_blank">正则表达式 – 在多个文件中查找和替换正则表达式的最佳工具</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/345373.html" target="_blank">记录学习RN遇到的报错</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/425370.html" target="_blank">c# – DirectShow – 如何调试引脚连接故障</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/237399.html" target="_blank">cocos2D-X源码分析之从cocos2D-X学习OpenGL（5）---绘制基本</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/484818.html" target="_blank">C的Haskell导出函数</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/174523.html" target="_blank">Strings 在 Swift 2中字符串设计的背后思想</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/107254.html" target="_blank">PostgreSQL多种恢复实例分析</a></li><div class="cl"></div></ul> </div> </div> </div> <div class="right-1 fr"> <div class="g-box8"> <div class="t-2">推荐文章</div> <ul></ul> </div> <div class="g-box11"> <div class="t-2">站长推荐</div> <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/220621.html" target="_blank">regex – 跟踪号的正则表达式模式</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/213543.html" target="_blank">正则表达式 – 带有命名子模式的正则表达式看不到</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/480956.html" target="_blank">c – 为了执行TBB？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/561445.html" target="_blank">控件命名和setparent函数——机房遇到问题（一）</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/370215.html" target="_blank">C# 实现的 AES 加密算法</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/100762.html" target="_blank">postgreSQL高阶功能_02</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/260604.html" target="_blank">cocos 2d test-cpp 学习笔记之AppDelegate.cpp 代</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/385450.html" target="_blank">webpack4构建react脚手架</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/72401.html" target="_blank">SQLite、Berkeley DB、PostgreSQL、MySQL、Fireb</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/468189.html" target="_blank">XML初识</a></li></ul> </div> <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 }); </script> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div> <div class="g-box3 u-3"> <div class="t-1">热点阅读</div> <ul class="b-box2"></ul> </div> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div> </div> <div class="cl"></div> </div> <div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div> <div class="footer"> <p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p> <p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p> <p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p> <p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p> </div> </body> </html>