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

vue 写作风格指南及规范

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>对于vue的书写风格,vue官网上有一套完整的适合入门时所遵循的指南。在每个公司中,每个团队都有自己的风格,针对我们前端团队的风格,总结出了一套适用于我们公司的书写规范。其中大部分都是按照指南的规定来遵循的,如果不想一个一个看指南中的规则,可以遵循本文总结的规则,也能写出符合规范的vue组件。</p> <p>1.对于单文件组件,每个文件中 template/script/style 标签的顺序保持一致,且把style标签放在最后。(<a href="https://cn.vuejs.org/v2/style-guide/index.html#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E7%9A%84%E9%A1%B6%E7%BA%A7%E5%85%83%E7%B4%A0%E7%9A%84%E9%A1%BA%E5%BA%8F-%E6%8E%A8%E8%8D%90)" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/style...</a><br /><span class="img-wrap"><img data-src="/img/bV9cKD?w=996&amp;h=240" src="/img/bV9cKD?w=996&amp;h=240" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <p>2.在 data、created、methods 等中间加一个空行,便于阅读。(<a href="https://cn.vuejs.org/v2/style-guide/index.html#%E7%BB%84%E4%BB%B6-%E5%AE%9E%E4%BE%8B%E9%80%89%E9%A1%B9%E4%B8%AD%E7%9A%84%E7%A9%BA%E8%A1%8C-%E6%8E%A8%E8%8D%90" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/style...</a><br /><span class="img-wrap"><img data-src="/img/bV9cK6?w=1024&amp;h=302" src="/img/bV9cK6?w=1024&amp;h=302" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></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>3.多个特性的元素,每个特性应该单独一行。(<a href="https://cn.vuejs.org/v2/style-guide/index.html#%E5%A4%9A%E4%B8%AA%E7%89%B9%E6%80%A7%E7%9A%84%E5%85%83%E7%B4%A0-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/style...</a>)<br /><span class="img-wrap"><img data-src="/img/bV9cLl?w=828&amp;h=302" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>4.指令有缩写一律采用缩写形式(要么都缩写、要么都不缩写)。(<a href="https://cn.vuejs.org/v2/style-guide/index.html#%E6%8C%87%E4%BB%A4%E7%BC%A9%E5%86%99-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/style...</a>)<br /><span class="img-wrap"><img data-src="/img/bV9cLp?w=1354&amp;h=86" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>5.组件命名都以大写字母开头(要么都大写,要么都横线连接)。(<a href="https://cn.vuejs.org/v2/style-guide/index.html#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/style...</a>)</p> <p>6.对于公共组件,style 标签最好加上 scope 属性,防止样式被其他组件污染。(<a href="https://cn.vuejs.org/v2/style-guide/index.html#%E4%B8%BA%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE%E4%BD%9C%E7%94%A8%E5%9F%9F-%E5%BF%85%E8%A6%81" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/style...</a>)</p> <p>7.定义 props 时,应该尽量详细,不要只写参数名,最好加上类型、是否必填、默认值、校验规则等。(<a href="https://cn.vuejs.org/v2/style-guide/index.html#Prop-%E5%AE%9A%E4%B9%89-%E5%BF%85%E8%A6%81" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/style...</a>)<br /><span class="img-wrap"><img data-src="/img/bV9cMM?w=748&amp;h=350" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>8.在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case。(<a href="https://cn.vuejs.org/v2/style-guide/index.html#Prop-%E5%90%8D%E5%A4%A7%E5%B0%8F%E5%86%99-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/style...</a>)<br /><span class="img-wrap"><img data-src="/img/bV9cNk?w=1202&amp;h=58" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/bV9cMM?w=748&amp;h=350" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>9.v-for 循环必须加上 key 属性,在整个 for 循环中 key 需要唯一,在全局不需要唯一。(<a href="https://cn.vuejs.org/v2/style-guide/index.html#%E4%B8%BA-v-for-%E8%AE%BE%E7%BD%AE%E9%94%AE%E5%80%BC-%E5%BF%85%E8%A6%81" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/style...</a>)<br /><span class="img-wrap"><img data-src="/img/bV9cNE?w=1008&amp;h=220" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>10.避免v-if 和 v-for 同时用在一个元素上(性能问题)(<a href="https://cn.vuejs.org/v2/style-guide/index.html#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7-%E5%BF%85%E8%A6%81" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/style...</a>)</p> <p><span class="img-wrap"><img data-src="/img/bV9cN0?w=165&amp;h=127" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span><span class="img-wrap"><img data-src="/img/bV9cN7?w=76&amp;h=38" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span><span class="img-wrap"><img data-src="/img/bV9cN6?w=209&amp;h=126" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p></code></p>

总结

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

vue 写作风格指南及规范

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

vue 写作风格指南及规范

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

80%的人都看过