Vue 프론트엔드 개발 사양은 어떻게 되나요?
이번에는 Vue 프론트엔드 개발 스펙과 Vue 프론트엔드 개발 스펙 Notes에 대해 알려드리겠습니다. 다음은 실제 사례입니다.
Vue 공식 스타일 가이드 기준
1. 필수
1 루트 구성 요소 앱을 제외하고 구성 요소 이름은 항상 여러 단어로 구성되어야 합니다.
긍정적 예:export default {
name: 'TodoItem',
// ...
}
反例：
export default {
name: 'Todo',
// ...
}2. 구성요소 데이터
구성요소의 데이터는 함수여야 합니다.
컴포넌트(new Vue를 제외한 모든 곳)에서 데이터 속성을 사용할 때 해당 값은 객체를 반환하는 함수여야 합니다. 긍정적 예:// In a .vue file
export default {
data () {
return {
foo: 'bar'
}
}
}
// 在一个 Vue 的根实例上直接使用对象是可以的，
// 因为只存在一个这样的实例。
new Vue({
data: {
foo: 'bar'
}
})export default {
data: {
foo: 'bar'
}
}props: {
status: String
}
// 更好的做法！
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}// 这样做只有开发原型系统时可以接受 props: ['status']
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul><ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>v-for="user in users" v-if="user.isActive") . 이 경우 사용자를 필터링된 목록을 반환하는 계산된 속성(예: activeUsers)으로 바꿉니다. <p style="text-align: left;"></p>숨겨야 하는 목록(예: <code> v-for="user in users" v-if="shouldShowUsers") 렌더링을 방지합니다. 이 경우 v-if를 컨테이너 요소(예: ul, ol)로 이동하세요. v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers긍정적인 예:
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>카운터 예:
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>6. 구성 요소 스타일의 범위 설정
애플리케이션의 경우 최상위 앱 구성 요소 및 레이아웃 구성 요소의 스타일은 전역적일 수 있지만 다른 모든 구성 요소에는 범위가 있어야 합니다.
이 규칙은 단일 파일 구성 요소에만 적용됩니다. 범위가 지정된 속성을 사용할 필요는 없습니다. 범위 설정은 BEM과 유사한 클래스 기반 전략인 CSS 모듈을 통해 수행할 수도 있습니다. 물론 다른 라이브러리나 규칙을 사용할 수도 있습니다.
어쨌든 구성 요소 라이브러리의 경우 범위가 지정된 기능 대신 클래스 기반 전략을 사용하는 것을 선호해야 합니다.
이렇게 하면 내부 스타일을 더 쉽게 재정의할 수 있습니다. 높은 선택기 우선 순위 없이 사람이 읽을 수 있는 클래스 이름을 사용하고 충돌을 일으킬 가능성이 줄어듭니다.
긍정적 예시:
<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>카운터 예시:
<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. 적극 권장(가독성 향상) 1. 컴포넌트 파일
파일을 스플라이싱할 수 있는 빌드 시스템이 있는 한, 각 컴포넌트를 분리하세요. 파일로.
컴포넌트를 편집해야 하거나 컴포넌트의 사용량을 확인해야 할 때 더 빠르게 찾을 수 있습니다.
긍정적인 예:
components/ |- TodoList.vue |- TodoItem.vue
카운터 예:
V
ue.component('TodoList', {
// ...
})
Vue.component('TodoItem', {
// ...
})2. 단일 파일 구성 요소 파일의 경우
단일 파일 구성 요소의 파일 이름은 항상 대문자로 시작해야 합니다(PascalCase)
긍정적인 예:
components/ |- MyComponent.vue
카운터 예:
components/ |- myComponent.vue |- mycomponent.vue
3. 기본 구성 요소 이름
특정 스타일과 규칙을 적용하는 기본 구성 요소(즉, 표현형, 비논리적 또는 상태 비저장 구성 요소)는 모두 Base, App 또는 다섯.
긍정적인 예:
components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue
카운터 예:
components/ |- MyButton.vue |- VueTable.vue |- Icon.vue
4. 싱글톤 구성 요소 이름
단일 활성 인스턴스만 있어야 하는 구성 요소에는 고유성을 표시하기 위해 접두사 The를 붙여 이름을 지정해야 합니다.
这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 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. 单文件组件的顶级元素的顺序
单文件组件应该总是让
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
권장되는 AI 지원 프로그래밍 도구 4가지
Apr 22, 2024 pm 05:34 PM
이 AI 지원 프로그래밍 도구는 급속한 AI 개발 단계에서 유용한 AI 지원 프로그래밍 도구를 많이 발굴했습니다. AI 지원 프로그래밍 도구는 개발 효율성을 높이고, 코드 품질을 향상시키며, 버그 발생률을 줄일 수 있습니다. 이는 현대 소프트웨어 개발 프로세스에서 중요한 보조자입니다. 오늘 Dayao는 4가지 AI 지원 프로그래밍 도구(모두 C# 언어 지원)를 공유하겠습니다. 이 도구가 모든 사람에게 도움이 되기를 바랍니다. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot은 더 빠르고 적은 노력으로 코드를 작성하는 데 도움이 되는 AI 코딩 도우미이므로 문제 해결과 협업에 더 집중할 수 있습니다. 힘내
최고의 AI 프로그래머는 누구일까요? Devin, Tongyi Lingma 및 SWE 에이전트의 잠재력을 살펴보세요.
Apr 07, 2024 am 09:10 AM
세계 최초의 AI 프로그래머 데빈(Devin)이 태어난 지 한 달도 채 안 된 2022년 3월 3일, 프린스턴 대학의 NLP팀은 오픈소스 AI 프로그래머 SWE-에이전트를 개발했습니다. GPT-4 모델을 활용하여 GitHub 리포지토리의 문제를 자동으로 해결합니다. SWE-bench 테스트 세트에서 SWE-agent의 성능은 Devin과 유사하며 평균 93초가 걸리고 문제의 12.29%를 해결합니다. SWE-agent는 전용 터미널과 상호 작용하여 파일 내용을 열고 검색하고, 자동 구문 검사를 사용하고, 특정 줄을 편집하고, 테스트를 작성 및 실행할 수 있습니다. (참고: 위 내용은 원문 내용을 약간 조정한 것이지만 원문의 핵심 정보는 그대로 유지되며 지정된 단어 수 제한을 초과하지 않습니다.) SWE-A
Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 알아보세요.
Mar 28, 2024 pm 10:00 PM
Go 언어 개발 모바일 애플리케이션 튜토리얼 모바일 애플리케이션 시장이 지속적으로 성장함에 따라 점점 더 많은 개발자가 Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 모색하기 시작했습니다. 간단하고 효율적인 프로그래밍 언어인 Go 언어는 모바일 애플리케이션 개발에서도 강력한 잠재력을 보여주었습니다. 이 기사에서는 Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 자세히 소개하고 독자가 빠르게 시작하고 자신의 모바일 애플리케이션 개발을 시작할 수 있도록 특정 코드 예제를 첨부합니다. 1. 준비 시작하기 전에 개발 환경과 도구를 준비해야 합니다. 머리
가장 인기 있는 다섯 가지 Go 언어 라이브러리 요약: 개발을 위한 필수 도구
Feb 22, 2024 pm 02:33 PM
가장 인기 있는 다섯 가지 Go 언어 라이브러리 요약: Go 언어는 탄생 이후 광범위한 관심과 적용을 받아왔습니다. 새롭게 떠오르는 효율적이고 간결한 프로그래밍 언어인 Go의 급속한 발전은 풍부한 오픈 소스 라이브러리의 지원과 불가분의 관계입니다. 이 기사에서는 인기 있는 Go 언어 라이브러리 5개를 소개합니다. 이러한 라이브러리는 Go 개발에서 중요한 역할을 하며 개발자에게 강력한 기능과 편리한 개발 경험을 제공합니다. 동시에 이러한 라이브러리의 용도와 기능을 더 잘 이해하기 위해 구체적인 코드 예제를 통해 설명하겠습니다.
Go 언어 프런트엔드 기술 탐색: 프런트엔드 개발을 위한 새로운 비전
Mar 28, 2024 pm 01:06 PM
빠르고 효율적인 프로그래밍 언어인 Go 언어는 백엔드 개발 분야에서 널리 사용됩니다. 그러나 Go 언어를 프런트엔드 개발과 연관시키는 사람은 거의 없습니다. 실제로 프런트엔드 개발에 Go 언어를 사용하면 효율성이 향상될 뿐만 아니라 개발자에게 새로운 지평을 열어줄 수도 있습니다. 이 기사에서는 프런트엔드 개발에 Go 언어를 사용할 수 있는 가능성을 살펴보고 독자가 이 영역을 더 잘 이해할 수 있도록 구체적인 코드 예제를 제공합니다. 전통적인 프런트엔드 개발에서는 사용자 인터페이스를 구축하기 위해 JavaScript, HTML, CSS를 사용하는 경우가 많습니다.
Android 개발에 가장 적합한 Linux 배포판은 무엇입니까?
Mar 14, 2024 pm 12:30 PM
Android 개발은 바쁘고 흥미로운 작업이며, 개발에 적합한 Linux 배포판을 선택하는 것이 특히 중요합니다. 많은 Linux 배포판 중에서 Android 개발에 가장 적합한 배포판은 무엇입니까? 이 기사에서는 이 문제를 여러 측면에서 살펴보고 구체적인 코드 예제를 제공합니다. 먼저 현재 인기 있는 여러 Linux 배포판(Ubuntu, Fedora, Debian, CentOS 등)을 살펴보겠습니다. 이들은 모두 고유한 장점과 특징을 가지고 있습니다.
Git이 꼭 알아야 할 비밀: 놀라운 Java 개발
Mar 06, 2024 am 08:25 AM
1. 분기 및 병합 분기를 사용하면 기본 분기에 영향을 주지 않고 코드 변경을 실험할 수 있습니다. gitcheckout을 사용하여 새 브랜치를 생성하고 새로운 기능을 시도하거나 버그를 수정할 때 사용하세요. 완료되면 gitmerge를 사용하여 변경 사항을 마스터 브랜치에 다시 병합합니다. 샘플 코드: gitcheckout-bnew-feature // new-feature 브랜치를 변경합니다. gitcheckoutmain gitmergenew-feature2. 스테이징 작업 gitadd를 사용하여 스테이징 영역에 추적하려는 변경 사항을 추가합니다. 이를 통해 모든 수정 사항을 커밋하지 않고도 선택적으로 변경 사항을 커밋할 수 있습니다. 샘플 코드: gitaddMyFile.java3
VSCode 개발에 가장 적합한 프레임워크는 무엇입니까?
Mar 25, 2024 pm 02:03 PM
VSCode는 개발자들이 널리 선호하는 강력하고 유연하며 확장하기 쉬운 오픈 소스 코드 편집기입니다. 다양한 프로젝트 요구 사항을 충족하기 위해 수많은 프로그래밍 언어와 프레임워크를 지원합니다. 그러나 VSCode의 장점은 프레임워크마다 다를 수 있습니다. 이 기사에서는 다양한 프레임워크 개발에서 VSCode의 적용 가능성에 대해 논의하고 특정 코드 예제를 제공합니다. 1.ReactReact는 사용자 인터페이스를 구축하는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. React를 사용하여 프로젝트를 개발할 때,
