vue一些琐碎但重要的知识点总结：1.如何让css只作用于当前组件？<样式范围>2。什么是？保存组件的动态状态，使其状态不会因为页面更新而改变。比如最新的播放音乐软件就是它的大作3.v-for：dataloop，比如你想做一个轮播或者循环播放什么东西，你可以v-for一个对象，里面有你想要的数据循环，不管是图片还是内容4.v-bind:class：绑定一个属性或者类，可以用这个方法进行动态切换类，比如你为你的类绑定两种状态，一个一个是正??确的，另一个是错误的，那么你可以在computed中设置correct时返回this.correct;设置错误时返回this.error，也可以用它来动态绑定样式，只是关键字从class改成了styles5.v-loader？v-loader实际上只是一个vue文件的加载器。它的使用非常简单粗暴，就是你可以用它来写es6、scss、less之类的东西。官方文档说vue-loader是webpack中的一个loader，用于处理。vue文件6.key是什么？经常看到v-for写的key和items这两个关键字。要想说明key，首先得稍微了解一下diff算法。diff算法其实是vue和react框架背后的高手。它让我们在使用时无需直接操作dom元素，只要操作数据，就可以重新渲染页面，非常方便。diff的两个原则：1.两个相同的组件产生相似的DOM结构，不同的组件产生不同的DOM结构。2.同级Group节点之一，可以通过唯一id来区分如果我们不使用key，执行diff算法来添加新元素，比如我们要给b和c添加一个新元素f，那么diff算法就是把c变成f,,d变成c,后面会慢慢跟着变化，效率很低，所以我们需要一个key来为每个节点做一个唯一的标识来提高效率，所以作用的关键首先是高效的更新虚拟dom第二个用处是当vue使用同一个label想要transition时，使用key属性让vue区分它们，否则vue只会改变label不会产生transitionEffect7.v-model告诉我这是什么v-model命令是对表单元素进行双向绑定，例如、、<select>元素。其实它的本质是一个Syntacticsugar，监听用户输入事件然后更新数据比如text和textarea使用value和input属性checkbox和radio使用checked和changeselect使用valueaspropusechangeasevent8.scss使用安装第一步：先下载如果要在终端下载，npminstallnode-sass--save-devnpminstallsass-loader--save-devnpminstallstyle-loader--save-dev第二步：更改你的webpack.base.config.jstomodule改成这个模块：{ rules:[ {test:/\.vue$/, loader:'vue-loader', options:vueLoaderConfig }, '测试')] }, { 测试:/\.(png|jpe?g|gif|svg)(\?.*)?$/, loader:'url-装载机', options:{ limit:10000, name:utils.assetsPath('img/[name].[hash:7].[ext]')}}, {test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader:'url-loader',options:{limit:10000,name:utils.assetsPath('fonts/[name].[hash:7].[ext]')}}, {//从上面这一段是默认的！不要换！下面是不用手动添加的，相当于编译识别sass！test:/\.scss$/,loaders:["style","css","sass"]}]}第三步：使用添加他的<stylelang="scss">9.vue的过渡动画效果到scss脚本，可以绑定transition事件，变换形状，具体参考css3官方文档</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="vuex-persist数据持久化存储插件——解决vuex刷新后数据丢失的问题" href="/webqianduan/215677.html">vuex-persist数据持久化存储插件——解决vuex刷新后数据丢失的问题</a> </div> <div class="prev">下一篇：<a title="当el-form数据校验失败时，滚动到相应的错误位置" href="/webqianduan/215679.html">当el-form数据校验失败时，滚动到相应的错误位置</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>vue知识点总结1相关文章</code></div> <ul> <li><a href="/kejifunen/353153.html" target="_blank" title="【总结】从20年前到现在，我们有什么样的跑鞋">【总结】从20年前到现在，我们有什么样的跑鞋</a></li> <li><a href="/kejifunen/352804.html" target="_blank" title="【总结】开启“手腕革命”的可穿戴设备家族">【总结】开启“手腕革命”的可穿戴设备家族</a></li> <li><a href="/kejifunen/352536.html" target="_blank" title="老用户通知您！选择家用指纹锁的4个基本知识点">老用户通知您！选择家用指纹锁的4个基本知识点</a></li> <li><a href="/kejifunen/352419.html" target="_blank" title="亚洲消费电子展！智能新品总结VR、可穿戴设备成亮点">亚洲消费电子展！智能新品总结VR、可穿戴设备成亮点</a></li> <li><a href="/kejifunen/352241.html" target="_blank" title="图片奖励和个人测试！ HTC Vive VR设备评测体验总结">图片奖励和个人测试！ HTC Vive VR设备评测体验总结</a></li> <li><a href="/kejifunen/352197.html" target="_blank" title="可穿戴设备智能手环上的传感器总结">可穿戴设备智能手环上的传感器总结</a></li> <li><a href="/kejifunen/351800.html" target="_blank" title="【总结】智能手环原理介绍">【总结】智能手环原理介绍</a></li> <li><a href="/kejifunen/351521.html" target="_blank" title="东芝推出新款穿戴式终端Wearvue TG-1智能眼镜">东芝推出新款穿戴式终端Wearvue TG-1智能眼镜</a></li> <li><a href="/kejifunen/351037.html" target="_blank" title="2015MWC总结！智能手机普及度下降，可穿戴设备出现">2015MWC总结！智能手机普及度下降，可穿戴设备出现</a></li> <li><a href="/kejifunen/350424.html" target="_blank" title="真正球迷必备的知识点， 2018世界杯的新玩法你知道多少？ ">真正球迷必备的知识点， 2018世界杯的新玩法你知道多少？ </a></li> <li><a href="/kejifunen/349773.html" target="_blank" title="【年终总结】2015年全球最流行的VR设备">【年终总结】2015年全球最流行的VR设备</a></li> <li><a href="/kejifunen/349772.html" target="_blank" title="【总结】各种第一代手环的发展史">【总结】各种第一代手环的发展史</a></li> <li><a href="/kejifunen/348922.html" target="_blank" title="【总结】为什么小米手环比Apple Watch更有趣">【总结】为什么小米手环比Apple Watch更有趣</a></li> <li><a href="/kejifunen/347949.html" target="_blank" title="滴滴2017年终总结！完成74.3亿订单，AI拉动3000万">滴滴2017年终总结！完成74.3亿订单，AI拉动3000万</a></li> <li><a href="/kejifunen/347113.html" target="_blank" title="未来科技Vue 3D打印智能眼镜">未来科技Vue 3D打印智能眼镜</a></li> <li><a href="/kejifunen/346154.html" target="_blank" title="可穿戴设备总结！从头到脚智能">可穿戴设备总结！从头到脚智能</a></li> <li><a href="/kejifunen/343695.html" target="_blank" title="印象笔记推出“快速阅读总结”并开启全终端限时免费使用">印象笔记推出“快速阅读总结”并开启全终端限时免费使用</a></li> <li><a href="/kejifunen/343024.html" target="_blank" title="入华五年的总结：印象笔记发布《中国知识工作者研究报告》">入华五年的总结：印象笔记发布《中国知识工作者研究报告》</a></li> <li><a href="/kejifunen/341866.html" target="_blank" title="快手高德地图联合发布《2020 年五一假期出行总结报告》：十">快手高德地图联合发布《2020 年五一假期出行总结报告》：十</a></li> <li><a href="/jishuluodi/333971.html" target="_blank" title="电商运营总结和计划如何写？ ">电商运营总结和计划如何写？ </a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/370309.html" title="超级详细的总结！ 2014年可穿戴设备市场及产业链分析" target="_blank">超级详细的总结！ 2014年可穿戴设备市场及产业链分析</a></li> <li><em>2</em><a href="/kejifunen/369782.html" title="苹果WWDC2016亮点总结 iOS-macOS-watch" target="_blank">苹果WWDC2016亮点总结 iOS-macOS-watch</a></li> <li><em>3</em><a href="/kejifunen/369323.html" title="【年终总结】黑科技井喷！ 2015年十大可穿戴技术将如何改变" target="_blank">【年终总结】黑科技井喷！ 2015年十大可穿戴技术将如何改变</a></li> <li><em>4</em><a href="/kejifunen/369311.html" title="2015年度总结！耳机圈一片混乱，小米和魅族一加真的是你的菜" target="_blank">2015年度总结！耳机圈一片混乱，小米和魅族一加真的是你的菜</a></li> <li><em>5</em><a href="/kejifunen/368154.html" title="用科技武装自己 新颖时尚的智能穿戴设备总结 " target="_blank">用科技武装自己 新颖时尚的智能穿戴设备总结 </a></li> <li><em>6</em><a href="/kejifunen/367847.html" title="【E测】根据9万+条经验总结，您在购买冰箱时考虑过这些问题吗" target="_blank">【E测】根据9万+条经验总结，您在购买冰箱时考虑过这些问题吗</a></li> <li><em>7</em><a href="/kejifunen/367794.html" title="脑电波可穿戴设备总结！智能穿戴的智能化革命" target="_blank">脑电波可穿戴设备总结！智能穿戴的智能化革命</a></li> <li><em>8</em><a href="/kejifunen/367787.html" title="2018年终总结！今年人工智能让你失望了吗？ " target="_blank">2018年终总结！今年人工智能让你失望了吗？ </a></li> <li><em>9</em><a href="/kejifunen/367466.html" title="【总结】2016下半年VR融资事件" target="_blank">【总结】2016下半年VR融资事件</a></li> <li><em>10</em><a href="/kejifunen/367147.html" title="【总结盘点】看脸时代！是谁把小米手环从简约的神坛上推了下来？" target="_blank">【总结盘点】看脸时代！是谁把小米手环从简约的神坛上推了下来？</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/365560.html" title="【总结】看看2016年的微软HoloLens！布局-挑战-野" target="_blank">【总结】看看2016年的微软HoloLens！布局-挑战-野</a></li> <li><em>2</em><a href="/kejifunen/364948.html" title="【总结】十大最佳儿童可穿戴设备，让孩子更安全" target="_blank">【总结】十大最佳儿童可穿戴设备，让孩子更安全</a></li> <li><em>3</em><a href="/kejifunen/364881.html" title="清华教授总结触觉传感器研究突破与进展" target="_blank">清华教授总结触觉传感器研究突破与进展</a></li> <li><em>4</em><a href="/kejifunen/364731.html" title="外媒对Huawei Watch的评测总结，给Apple Wa" target="_blank">外媒对Huawei Watch的评测总结，给Apple Wa</a></li> <li><em>5</em><a href="/kejifunen/362859.html" title="国内为数不多的智能穿戴支付产品之一的对比总结与分析" target="_blank">国内为数不多的智能穿戴支付产品之一的对比总结与分析</a></li> <li><em>6</em><a href="/kejifunen/362106.html" title="HTC 智能手表传闻总结 设计和节能是亮点" target="_blank">HTC 智能手表传闻总结 设计和节能是亮点</a></li> <li><em>7</em><a href="/kejifunen/361741.html" title="三星智能手表评测总结 国外同行眼中的Galaxy Gear（" target="_blank">三星智能手表评测总结 国外同行眼中的Galaxy Gear（</a></li> <li><em>8</em><a href="/kejifunen/361713.html" title="索尼PS VR问答总结 戴眼镜的人可以使用PS VR吗？ " target="_blank">索尼PS VR问答总结 戴眼镜的人可以使用PS VR吗？ </a></li> <li><em>9</em><a href="/kejifunen/361614.html" title="Oculus开发者大会总结！ Rift 比 HTC Vive" target="_blank">Oculus开发者大会总结！ Rift 比 HTC Vive</a></li> <li><em>10</em><a href="/kejifunen/361198.html" title="外媒总结了 Apple Watch 发布推迟的 5 个原因" target="_blank">外媒总结了 Apple Watch 发布推迟的 5 个原因</a></li> <li><em>11</em><a href="/kejifunen/360865.html" title="总结！谈智能行业的辉煌和背后的无奈" target="_blank">总结！谈智能行业的辉煌和背后的无奈</a></li> <li><em>12</em><a href="/kejifunen/360658.html" title="京东纳信！ 10 2014年智能硬件行业总结" target="_blank">京东纳信！ 10 2014年智能硬件行业总结</a></li> <li><em>13</em><a href="/kejifunen/360196.html" title="【总结】开循环的“误区”！那些与iPhone“牵手”的“非苹" target="_blank">【总结】开循环的“误区”！那些与iPhone“牵手”的“非苹</a></li> <li><em>14</em><a href="/kejifunen/358405.html" title="全面总结康佳新电视，哪一款更好？ " target="_blank">全面总结康佳新电视，哪一款更好？ </a></li> <li><em>15</em><a href="/kejifunen/357817.html" title="《果壳》顾晓彬！ 2014年智能手表行业年度总结" target="_blank">《果壳》顾晓彬！ 2014年智能手表行业年度总结</a></li> <li><em>16</em><a href="/kejifunen/356889.html" title="【总结】2015年流行智能手环综合评测与分析" target="_blank">【总结】2015年流行智能手环综合评测与分析</a></li> <li><em>17</em><a href="/kejifunen/356462.html" title="【总结】迷雾中的虚拟现实技术将走向何方（一）" target="_blank">【总结】迷雾中的虚拟现实技术将走向何方（一）</a></li> <li><em>18</em><a href="/kejifunen/355902.html" title="【总结】二代失败者都可以使用的跑步装备" target="_blank">【总结】二代失败者都可以使用的跑步装备</a></li> <li><em>19</em><a href="/kejifunen/355294.html" title="【总结】关于 Apple Watch 2 的最新消息，传闻一" target="_blank">【总结】关于 Apple Watch 2 的最新消息，传闻一</a></li> <li><em>20</em><a href="/kejifunen/354966.html" title="全面总结！你不知道的智能穿戴设备" target="_blank">全面总结！你不知道的智能穿戴设备</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div> <!-- 应用插件标签 start --> <!-- 应用插件标签 end --> </body> </html>
