Vue精简版风格代码分享
Vue官网的风格指南按照优先级（依次为必要、强烈推荐、推荐、谨慎使用）分类，且代码间隔较大，不易查询。本文按照类型分类，并对部分示例或解释进行缩减，是Vue风格指南的精简版，本文主要介绍了Vue精简版风格指南的相关资料，包括组件名称，指令及特征,需要的朋友可以参考下，希望能帮助到大家。
组件名称
【组件名为多个单词】（必要）
组件名应该始终是多个单词的，根组件 App 除外。 这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的
//bad
Vue.component('todo', {})
//good
Vue.component('todo-item', {})【单文件组件文件名应该要么始终是单词大写开头 (PascalCase)，要么始终横线连接 (kebab-case)】（强烈推荐）
//bad mycomponent.vue //good MyComponent.vue //good my-component.vue
【基础组件名要有一个特定前缀开头】（强烈推荐）
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V
//bad components/ |- MyButton.vue |- VueTable.vue |- Icon.vue //good components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue
【只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性】（强烈推荐）
这不意味着组件只可用于一个单页面，而是 每个页面 只使用一次，这些组件永远不接受任何 prop
//bad components/ |- Heading.vue |- MySidebar.vue //good components/ |- TheHeading.vue |- TheSidebar.vue
【和父组件紧密耦合的子组件应该以父组件名作为前缀命名】（强烈推荐）
//bad components/ |- TodoList.vue |- TodoItem.vue |- TodoButton.vue //good components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue
【组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾】（强烈推荐）
//bad components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue //good components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue
【单文件组件和字符串模板中组件名应总是PascalCase——但在DOM模板中总是kebab-case】（强烈推荐）
//bad <!-- 在单文件组件和字符串模板中 --> <mycomponent/> <myComponent/> <!-- 在 DOM 模板中 --> <MyComponent></MyComponent> //good <!-- 在单文件组件和字符串模板中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component>
【组件名应该倾向于完整单词而不是缩写】（强烈推荐）
//bad components/ |- SdSettings.vue |- UProfOpts.vue //good components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue
组件相关
【单文件组件、字符串模板和JSX中没有内容的组件应该自闭合——但在DOM模板里不要这样做】（强烈推荐）
自闭合组件表示它们不仅没有内容，而且刻意没有内容
//bad <!-- 在单文件组件、字符串模板和 JSX 中 --> <MyComponent></MyComponent> <!-- 在 DOM 模板中 --> <my-component/> //good <!-- 在单文件组件、字符串模板和 JSX 中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component>
【为组件样式设置作用域】（必要）
这条规则只和单文件组件有关。 不一定 要使用 scoped 特性。设置作用域也可以通过 CSS Modules，或者使用其它的库或约定
//bad
<template><button class="btn btn-close">X</button></template>
<style>
.btn-close {background-color: red;}
</style>
//good
<template><button class="btn btn-close">X</button></template>
<style scoped>
.btn-close {background-color: red;}
</style>
//good
<template><button :class="[$style.button, $style.buttonClose]">X</button></template>
<style module>
.btn-close {background-color: red;}
</style>【单文件组件应该总是让
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
夸克网盘怎么分享到百度网盘？
Mar 14, 2024 pm 04:40 PM
夸克网盘和百度网盘都是很便利的存储工具，不少的用户们都在询问这两款软件互通吗？夸克网盘怎么分享到百度网盘？下面就让本站来为用户们来仔细的介绍一下夸克网盘的文件怎么保存到百度网盘方法吧。 夸克网盘的文件怎么保存到百度网盘方法 1、想要知道怎么把夸克网盘的文件转到百度网盘，首先在夸克网盘上下载需要保存的文件，然后打开百度网盘客户端后，选择压缩文件要保存的文件夹，双击打开该文件夹。 2、打开该文件夹后，点击窗口左上角区域的“上传”。 3、在电脑中找到需要上传的压缩文件，点击选
网易云音乐怎么分享到微信朋友圈_网易云音乐分享到微信朋友圈教程
Mar 25, 2024 am 11:41 AM
1、首先我们进入到网易云音乐中，然后在软件首页界面中，点击进入到歌曲的播放界面中。2、然后在歌曲播放界面中，找到右上方的分享功能按钮，如下图红框所示位置，点击选择分享的渠道;在分享渠道中，点击底部的“分享至”选项，然后选择第一个“微信朋友圈”，即可将内容分享至微信朋友圈。
百度网盘怎么分享文件给好友
Mar 25, 2024 pm 06:52 PM
近期，百度网盘安卓客户端迎来了全新的8.0.0版本，这一版本不仅带来了众多变化，还增添了诸多实用功能。其中，最为引人注目的便是文件夹共享功能的增强。现在，用户可以轻松邀请好友加入，共同分享工作和生活中的重要文件，实现更加便捷的协作与共享。那么究竟该如何分享给好友自己需要分享的文件呢，下文中本站小编就将为大家带来详细内容介绍，希望能帮助到大家！1）打开百度云APP，首先点击在首页中选择相关的文件夹，然后再点击界面右上角的【...】图标；（如下图）2）随后点击“共享成员”一栏中的【+】，最后在勾选所
win7企业版激活密钥有哪些的分享
Jul 09, 2023 pm 03:01 PM
win7企业版激活密钥有没有最新的？如果你安装的是官方win7企业版，会提示用windows7企业版产品密钥来激活，否则不能正常使用。所以小编接下来跟大家分享一些win7企业版激活密码，大家一起来看看吧。Q3VMJ-TMJ3M-99RF9-CVPJ3-Q7VF3KGMPT-GQ6XF-DM3VM-HW6PR-DX9G8MT39G-9HYXX-J3V3Q-RPXJB-RQ6D79JBBV-7Q7P7-CTDB7-KYBKG-X8HHCP72QK-2Y3B8-YDHDV-29DQB-QKWWM6JQ
芒果tv会员账号分享2023
Feb 07, 2024 pm 02:27 PM
芒果TV拥有各种类型的电影、电视剧、综艺等资源，用户可以在其中自由的选择进行观看。芒果tv会员不仅能够看到全部的VIP剧而且还能够设置最高清的画质，帮助用户爽快看剧，下面小编就给大家带来一些芒果tv免费的会员账号供用户们使用，赶紧来看一看吧。芒果tv最新会员账号免费分享2023：注意：都是收集的最新会员账号，可以直接登录使用，不要随意的修改密码。账号：13842025699密码：qds373账号：15804882888密码：evr6982账号：13330925667密码：jgqae账号：1703
解决Discuz微信分享无法显示的问题
Mar 09, 2024 pm 03:39 PM
标题：解决Discuz微信分享无法显示的问题，需要具体代码示例随着移动互联网的发展，微信成为了人们日常生活中不可或缺的一部分。在网站开发中，为了提升用户体验和扩大网站的曝光度，很多站点会集成微信分享功能，让用户能够方便地分享网站的内容到朋友圈或者微信群中。然而，有时候在使用Discuz等开源论坛系统时，会遇到微信分享无法显示的问题，这给用户体验带来了一定的困
win7系统如何分享wifi热点
Jul 01, 2023 pm 01:53 PM
win7系统如何分享wifi热点？我们电脑在连接了网络之后，也是可以进行无线网络的分享的。很多用户想要将自己电脑的网络分享到手机上来使用。很多小伙伴不知道怎么详细操作，小编下面整理了win7系统如何分享wifi热点的操作方法步骤，如果你感兴趣的话，跟着小编一起往下看看吧！ win7系统如何分享wifi热点的操作方法步骤 1、要想开启wifi热点，首先得要有无线网卡，笔记本是有自带的，pc的话可以购买一个随身wifi来分享wifi，这里就不叙述了。首先按下键盘上的windows键打开开始菜
分享惠普打印机驱动的两种安装方法
Mar 13, 2024 pm 05:16 PM
惠普打印机是很多办公室内必备的打印设备，在电脑上安装打印机驱动，可以完美解决打印机无法连接等等问题。那么惠普打印机驱动怎么安装？下面小编就给大家介绍两个惠普打印机驱动程序安装方法。 第一种方法：官网下载驱动 1、在搜索引擎中搜索惠普中国官网，在支持一栏中，选择【软件与驱动程序】。 2、选择【打印机】分类，在搜索框中输入你的打印机型号，点击【提交】，即可查找到你的打印机驱动。 3、根据你电脑的系统选择对应的打印机，win10即选择win10系统的驱动。 4、下载成功后，在文件夹中找到
