What should you pay attention to in Vue front-end development?
This time I will bring you what you need to pay attention to in Vue front-end development. What are the precautions for Vue in front-end development. Here are practical cases, let’s take a look.
Based on Vue official style guide
1. Mandatory
1. The component name must be multiple words
Component names should always be multiple words, except for the root component App.
Positive example:
export default {
name: 'TodoItem',
// ...
}
反例：
export default {
name: 'Todo',
// ...
}2. Component data
The data of the component must be a function.
When using the data attribute in a component (anywhere except new Vue), its value must be a function that returns an object.
Positive example:
// In a .vue file
export default {
data () {
return {
foo: 'bar'
}
}
}
// 在一个 Vue 的根实例上直接使用对象是可以的，
// 因为只存在一个这样的实例。
new Vue({
data: {
foo: 'bar'
}
})Counterexample:
export default {
data: {
foo: 'bar'
}
}3. Prop definition
Prop definition should be as detailed as possible.
In the code you submit, the definition of prop should be as detailed as possible, at least specifying its type.
Positive example:
props: {
status: String
}
// 更好的做法！
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}Counter example:
// 这样做只有开发原型系统时可以接受 props: ['status']
4. Set the key value for v-for
Always use key with v-for.
Key must always be used with v-for on components to maintain the state of internal components and their subtrees. Even maintaining predictable behavior on elements, such as object constancy in animations, is a good practice.
Positive example:
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>Counterexample:
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>5. Avoid using v-if and v-for together
Never use v-if and v-for are used on the same element at the same time.
Generally we tend to do this in two common situations:
In order to filter items in a list (such as v-for="user in users" v- if="user.isActive"). In this case, replace users with a computed property (such as activeUsers) that returns the filtered list.
To avoid rendering lists that should be hidden (e.g. v-for="user in users" v-if="shouldShowUsers"). In this case, move v-if to the container element (e.g. ul, ol).
Positive example:
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>Counter example:
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>6. Set scope for component style
For applications, top-level App components and layout components Styles in can be global, but all other components should be scoped.
This rule is only relevant for single-file components. You don't have to use the scoped attribute. Setting scope can also be done through CSS Modules, which is a class-based strategy similar to BEM, but of course you can also use other libraries or conventions.
In any case, for component libraries, we should prefer a class-based strategy rather than scoped features.
This makes it easier to override internal styles: human-readable class names are used without high selector precedence, and are less likely to cause conflicts.
Positive example:
<template>
<button class="c-Button c-Button--close">X</button>
</template>
<!-- 使用 BEM 约定 -->
<style>
.c-Button {
border: none;
border-radius: 2px;
}
.c-Button--close {
background-color: red;
}
</style>Counterexample:
<template>
<button class="btn btn-close">X</button>
</template>
<style>
.btn-close {
background-color: red;
}
</style>
<template>
<button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
border: none;
border-radius: 2px;
}
.button-close {
background-color: red;
}
</style>2. Strongly recommended (enhance readability)
1. Component files
As long as there is a build system that can splice files, separate each component into separate files.
When you need to edit a component or check the usage of a component, you can find it more quickly.
Positive example:
components/ |- TodoList.vue |- TodoItem.vue
Counter example:
V
ue.component('TodoList', {
// ...
})
Vue.component('TodoItem', {
// ...
})2. The case of single-file component files
The file name of a single-file component should always be either Words start with capital letters (PascalCase)
Positive example:
components/ |- MyComponent.vue
Counter example:
components/ |- myComponent.vue |- mycomponent.vue
3. Basic component name
Basic component that applies specific styles and conventions (i.e. presentational, non-logical or stateless components) should all start with a specific prefix, such as Base, App or V.
Positive example:
components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue
Counter example:
components/ |- MyButton.vue |- VueTable.vue |- Icon.vue
4. Singleton component name
Components that should only have a single active instance should be named with the prefix , to show its uniqueness.
这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。
正例：
components/ |- TheHeading.vue |- TheSidebar.vue
反例：
components/ |- Heading.vue |- MySidebar.vue
5. 紧密耦合的组件名
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。
正例：
components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue
反例：
components/ |- SearchSidebar.vue |- NavigationForSearchSidebar.vue
6. 组件名中的单词顺序
组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。
正例：
components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue
反例：
components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue
7. 模板中的组件名大小写
总是 PascalCase 的
正例：
<!-- 在单文件组件和字符串模板中 --> <MyComponent/>
反例：
<!-- 在单文件组件和字符串模板中 --> <mycomponent/> <!-- 在单文件组件和字符串模板中 --> <myComponent/>
8. 完整单词的组件名
组件名应该倾向于完整单词而不是缩写。
正例：
components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue
反例：
components/ |- SdSettings.vue |- UProfOpts.vue
9. 多个特性的元素
多个特性的元素应该分多行撰写，每个特性一行。
正例：
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo" > <MyComponent foo="a" bar="b" baz="c" />
反例：
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo"> <MyComponent foo="a" bar="b" baz="c"/>
10. 模板中简单的表达式
组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。
正例：
<!-- 在模板中 -->
{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}反例：
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}11. 简单的计算属性
正例：
computed: {
basePrice: function () {
return this.manufactureCost / (1 - this.profitMargin)
},
discount: function () {
return this.basePrice * (this.discountPercent || 0)
},
finalPrice: function () {
return this.basePrice - this.discount
}
}反例：
computed: {
price: function () {
var basePrice = this.manufactureCost / (1 - this.profitMargin)
return (
basePrice -
basePrice * (this.discountPercent || 0)
)
}
}12. 带引号的特性值
非空 HTML 特性值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。
在 HTML 中不带空格的特性值是可以没有引号的，但这样做常常导致带空格的特征值被回避，导致其可读性变差。
正例：
<AppSidebar :style="{ width: sidebarWidth + 'px' }">反例：
<AppSidebar :style={width:sidebarWidth+'px'}>13. 指令缩写
都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)
正例：
<input @input="onInput" @focus="onFocus" >
反例：
<input v-bind:value="newTodoText" :placeholder="newTodoInstructions" >
三、推荐
1. 单文件组件的顶级元素的顺序
单文件组件应该总是让
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to set up the keyboard boot function on a GIGABYTE motherboard (enable keyboard boot mode on GIGABYTE motherboard)
Dec 31, 2023 pm 05:15 PM
How to set up keyboard startup on Gigabyte's motherboard. First, if it needs to support keyboard startup, it must be a PS2 keyboard! ! The setting steps are as follows: Step 1: Press Del or F2 to enter the BIOS after booting, and go to the Advanced (Advanced) mode of the BIOS. Ordinary motherboards enter the EZ (Easy) mode of the motherboard by default. You need to press F7 to switch to the Advanced mode. ROG series motherboards enter the BIOS by default. Advanced mode (we use Simplified Chinese to demonstrate) Step 2: Select to - [Advanced] - [Advanced Power Management (APM)] Step 3: Find the option [Wake up by PS2 keyboard] Step 4: This option The default is Disabled. After pulling down, you can see three different setting options, namely press [space bar] to turn on the computer, press group
What is the best graphics card for i7 3770?
Dec 29, 2023 am 09:12 AM
What graphics card is good for Core i73770? RTX3070 is a very powerful graphics card with excellent performance and advanced technology. Whether you're playing games, rendering graphics, or performing machine learning, the RTX3070 can handle it with ease. It uses NVIDIA's Ampere architecture, has 5888 CUDA cores and 8GB of GDDR6 memory, which can provide a smooth gaming experience and high-quality graphics effects. RTX3070 also supports ray tracing technology, which can present realistic light and shadow effects. All in all, the RTX3070 is a powerful and advanced graphics card suitable for those who pursue high performance and high quality. RTX3070 is an NVIDIA series graphics card. Powered by 2nd generation NVID
Choosing the right tablet for music students
Jan 10, 2024 pm 10:09 PM
Which tablet is suitable for musicians? The 12.9-inch speaker in Huawei’s iPad is a very good product. It comes with four speakers and the sound is excellent. Moreover, it belongs to the pro series, which is slightly better than other styles. Overall, ipad pro is a very good product. The speaker of this mini4 mobile phone is small and the effect is average. It cannot be used to play music externally, you still need to rely on headphones to enjoy music. Headphones with good sound quality will have a slightly better effect, but cheap headphones worth thirty or forty yuan cannot meet the requirements. What tablet should I use for electronic piano music? If you want to buy an iPad larger than 10 inches, I recommend using two applications, namely Henle and Piascore. Provided by Henle
Detailed explanation of the role of .ibd files in MySQL and related precautions
Mar 15, 2024 am 08:00 AM
Detailed explanation of the role of .ibd files in MySQL and related precautions MySQL is a popular relational database management system, and the data in the database is stored in different files. Among them, the .ibd file is a data file in the InnoDB storage engine, used to store data and indexes in tables. This article will provide a detailed analysis of the role of the .ibd file in MySQL and provide relevant code examples to help readers better understand. 1. The role of .ibd files: storing data: .ibd files are InnoDB storage
Choose the driver version that suits your RX580
Dec 29, 2023 pm 05:34 PM
What driver is good to install on rx5808g? 20.5.1 and 20.4.2WHQL refer to the version number of the software or driver. These version numbers are typically used to identify updates or fixes to software or drivers. In the computer world, WHQL stands for Windows Hardware Quality Labs, which is an institution used by Microsoft to test and verify the compliance and stability of hardware and drivers. Therefore, 20.5.1 and 20.4.2WHQL indicate that these software or drivers have passed Microsoft's testing and verification and can be safely used in the Windows operating system. AMDrx580 graphics card relatively stable drivers 20.5.1 and 20.4.2WHQL refers to the version number of the software or driver. These version numbers are passed
Which games are suitable for playing with i34150 and 1G independent graphics (which games is suitable for i34150)
Jan 05, 2024 pm 08:24 PM
What games can be played with i34150 with 1G independent graphics? Can it play small games such as LoL? GTX750 and GTX750TI are very suitable graphics card choices. If you just play some small games or not play games, it is recommended to use the i34150 integrated graphics card. Generally speaking, the price difference between graphics cards and processors is not very big, so it is important to choose a reasonable combination. If you need 2G of video memory, it is recommended to choose GTX750TI; if you only need 1G of video memory, just choose GTX750. GTX750TI can be seen as an enhanced version of GTX750, with overclocking capabilities. Which graphics card can be paired with i34150 depends on your needs. If you plan to play stand-alone games, it is recommended that you consider changing the graphics card. you can choose
What is the function of cortana?
Jan 15, 2024 pm 10:15 PM
In the process of using the Windows 10 operating system developed by Microsoft, many users are curious and confused about the new technology called Cortana. Cortana's official name in the Chinese context is "Cortana", which is actually a built-in function of the Windows 10 system. Cortana, an artificial intelligence (AIassistant) service program. Frequently asked questions and solutions. How to open Cortana and not respond. Solution steps. Chinese solution is not supported. How to put the search box into Cortana. What software is Cortana? Answer: "Cortana" It is a cloud platform personal intelligent assistant carefully built by Microsoft. It has two usage modes: login and non-login. When you are logged in
What is Calloc in C language?
Sep 10, 2023 pm 07:45 PM
The C library memory allocation function void*calloc(size_tnitems,size_tsize) allocates the requested memory and returns a pointer to it. The difference between malloc and calloc is that malloc does not set the memory to zero, while calloc sets the allocated memory to zero. Memory Allocation Function Memory can be allocated in two ways as mentioned below - Once memory is allocated at compile time, it cannot be changed during execution. There will be problems of insufficient or wasted memory. The solution is to create memory dynamically, that is, create memory according to the user's requirements during the execution of the program. The standard library functions for dynamic memory management are as follows: -malloc()calloc()realloc()free
