åºäºVueå®æ¹é£æ ¼æåæ´ç
ä¸ã强å¶
1. ç»ä»¶å为å¤ä¸ªåè¯
ç»ä»¶ååºè¯¥å§ç»æ¯å¤ä¸ªåè¯çï¼æ ¹ç»ä»¶ App é¤å¤ã
æ£ä¾ï¼
export default {
name: 'TodoItem',
// ...
}
åä¾ï¼
export default {
name: 'Todo',
// ...
}
2. ç»ä»¶æ°æ®
ç»ä»¶ç data å¿
é¡»æ¯ä¸ä¸ªå½æ°ã
å½å¨ç»ä»¶ä¸ä½¿ç¨ data å±æ§çæ¶å (é¤äº new Vue å¤çä»»ä½å°æ¹)ï¼å®çå¼å¿
é¡»æ¯è¿åä¸ä¸ªå¯¹è±¡çå½æ°ã
æ£ä¾ï¼
// In a .vue file
export default {
data () {
return {
foo: 'bar'
}
}
}
// å¨ä¸ä¸ª Vue çæ ¹å®ä¾ä¸ç´æ¥ä½¿ç¨å¯¹è±¡æ¯å¯ä»¥çï¼
// å 为åªåå¨ä¸ä¸ªè¿æ ·çå®ä¾ã
new Vue({
data: {
foo: 'bar'
}
})
åä¾ï¼
export default {
data: {
foo: 'bar'
}
}
3. Propå®ä¹
Prop å®ä¹åºè¯¥å°½é详ç»ã
å¨ä½ æ交ç代ç ä¸ï¼prop çå®ä¹åºè¯¥å°½é详ç»ï¼è³å°éè¦æå®å
¶ç±»åã
æ£ä¾ï¼
props: {
status: String
}
// æ´å¥½çåæ³ï¼
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
åä¾ï¼
// è¿æ ·ååªæå¼åååç³»ç»æ¶å¯ä»¥æ¥å
props: ['status']
4. 为v-for设置é®å¼
æ»æ¯ç¨ key é
å v-forã
å¨ç»ä»¶ä¸_æ»æ¯_å¿
é¡»ç¨ key é
å v-forï¼ä»¥ä¾¿ç»´æ¤å
é¨ç»ä»¶åå
¶åæ çç¶æãçè³å¨å
ç´ ä¸ç»´æ¤å¯é¢æµçè¡ä¸ºï¼æ¯å¦å¨ç»ä¸ç对象åºå (object constancy)ï¼ä¹æ¯ä¸ç§å¥½çåæ³ã
æ£ä¾ï¼
<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>
5.é¿å
v-if å v-for ç¨å¨ä¸èµ·
æ°¸è¿ä¸è¦æ v-if å v-for åæ¶ç¨å¨åä¸ä¸ªå
ç´ ä¸ã
ä¸è¬æ们å¨ä¸¤ç§å¸¸è§çæ
åµä¸ä¼å¾åäºè¿æ ·åï¼
为äºè¿æ»¤ä¸ä¸ªå表ä¸çé¡¹ç® (æ¯å¦ v-for="user in users" v-if="user.isActive")ãå¨è¿ç§æ
å½¢ä¸ï¼è¯·å° users æ¿æ¢ä¸ºä¸ä¸ªè®¡ç®å±æ§ (æ¯å¦ activeUsers)ï¼è®©å
¶è¿åè¿æ»¤åçå表ã
为äºé¿å
渲ææ¬åºè¯¥è¢«éèçå表 (æ¯å¦ v-for="user in users" v-if="shouldShowUsers")ãè¿ç§æ
å½¢ä¸ï¼è¯·å° v-if 移å¨è³å®¹å¨å
ç´ ä¸ (æ¯å¦ ul, ol)ã
æ£ä¾ï¼
<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. 为ç»ä»¶æ ·å¼è®¾ç½®ä½ç¨å
对äºåºç¨æ¥è¯´ï¼é¡¶çº§ App ç»ä»¶åå¸å±ç»ä»¶ä¸çæ ·å¼å¯ä»¥æ¯å
¨å±çï¼ä½æ¯å
¶å®ææç»ä»¶é½åºè¯¥æ¯æä½ç¨åçã
è¿æ¡è§ååªååæ件ç»ä»¶æå
³ãä½ ä¸ä¸å®è¦ä½¿ç¨ scoped ç¹æ§ã设置ä½ç¨åä¹å¯ä»¥éè¿ CSS Modulesï¼é£æ¯ä¸ä¸ªåºäº class ç类似 BEM ççç¥ï¼å½ç¶ä½ ä¹å¯ä»¥ä½¿ç¨å
¶å®çåºæ约å®ã
ä¸ç®¡ææ ·ï¼å¯¹äºç»ä»¶åºï¼æ们åºè¯¥æ´å¾åäºéç¨åºäº class ççç¥èä¸æ¯ scoped ç¹æ§ã
è¿è®©è¦åå
é¨æ ·å¼æ´å®¹æï¼ä½¿ç¨äºå¸¸äººå¯ç解ç class å称ä¸æ²¡æ太é«çéæ©å¨ä¼å
级ï¼èä¸ä¸å¤ªä¼å¯¼è´å²çªã
æ£ä¾ï¼
<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>
äºã强çæ¨èï¼å¢å¼ºå¯è¯»æ§ï¼
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 æ Vã
æ£ä¾ï¼
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="htorg/images/logo.png"
alt="Vue Logo"
>
<MyComponent
foo="a"
bar="b"
baz="c"
/>
åä¾ï¼
<img src="h/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>
10. 模æ¿ä¸ç®åç表达å¼
ç»ä»¶æ¨¡æ¿åºè¯¥åªå
å«ç®åç表达å¼ï¼å¤æç表达å¼ååºè¯¥éæ为计ç®å±æ§ææ¹æ³ã
å¤æ表达å¼ä¼è®©ä½ ç模æ¿åå¾ä¸é£ä¹å£°æå¼ãæ们åºè¯¥å°½éæè¿°åºè¯¥åºç°çæ¯ä»ä¹ï¼èéå¦ä½è®¡ç®é£ä¸ªå¼ãèä¸è®¡ç®å±æ§åæ¹æ³ä½¿å¾ä»£ç å¯ä»¥éç¨ã
温馨提示:答案为网友推荐,仅供参考