整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
將數(shù)據(jù)寫入到哪里去
寫入和修改的操作實(shí)際上都是對(duì)存儲(chǔ)數(shù)據(jù)的數(shù)據(jù)表進(jìn)行操作，所以在寫入和修改之前，你得先已經(jīng)創(chuàng)建好了對(duì)應(yīng)的數(shù)據(jù)表。
寫入的數(shù)據(jù)從哪里來
從輸入框輸入的內(nèi)容，從相冊(cè)選擇上傳的圖片、視頻，從桌面上傳的文件（音頻、pdf、word等），這些輸入或者上傳的內(nèi)容，都可以寫入到數(shù)據(jù)庫中去。
如何在 Zion 中獲取需要寫入的數(shù)據(jù)
通過輸入類/選擇類組件來獲取需要寫入的數(shù)據(jù)：
如下圖所示，通過以下組件輸入、選擇、上傳來獲取需要寫入的數(shù)據(jù)。
在哪里找到輸入、選擇、上傳來的數(shù)據(jù)：
進(jìn)行寫入操作時(shí)，點(diǎn)擊【+】選擇【輸入框】/【選擇器】就能夠找到這些數(shù)據(jù)。
Tips：
組件重命名（十分重要！）
通常頁面中可能會(huì)有多個(gè)輸入/選擇組件，所以在選擇需要寫入數(shù)據(jù)時(shí)會(huì)出現(xiàn)多個(gè)可選的組件名。
例如上圖所示有客戶姓名的輸入框組件、聯(lián)系電話的輸入框組件，而這些組件在沒有重命名之前會(huì)叫“文字輸入1”、“文字輸入2”，我們難以準(zhǔn)確快速的知道哪一個(gè)才是獲取客戶姓名的組件，所以需要對(duì)組件進(jìn)行重命名。
常用命名規(guī)范：內(nèi)容_組件類型
例如【文字輸入】組件的默認(rèn)名稱為“文字輸入”，如果這個(gè)組件是用來獲取用戶輸入的姓名的，那么建議將組件名稱修改為“客戶姓名_文字輸入”，那么如上所示的視頻中在選擇需要寫入的輸入框數(shù)據(jù)時(shí)，就能夠正確獲取對(duì)應(yīng)的數(shù)據(jù)。
組件重命名方法：
選中需要重命名的組件，在其右邊欄中找到“組件名稱”，在“組件名稱”下方的輸入框中輸入新的命名即可。
定義：所謂的寫入操作，實(shí)際上就是往數(shù)據(jù)庫中添加了一條或者多條數(shù)據(jù)。
如下常見操作，都屬于是寫入內(nèi)容的操作：
發(fā)布一條內(nèi)容：發(fā)文字朋友圈、發(fā)微博、向朋友發(fā)送一條微信消息、在待辦事項(xiàng)app中記錄一條待辦、發(fā)布一個(gè)活動(dòng)、預(yù)約了一個(gè)活動(dòng)、實(shí)際上都屬于向某個(gè)數(shù)據(jù)庫中寫入了一條數(shù)據(jù)。
購買商品：向購物車中添加了商品、成功購買了商品、下單了一份外賣、添加了一個(gè)新的收貨地址也都數(shù)據(jù)寫入操作
收藏、點(diǎn)贊、評(píng)論、回復(fù)這些常見的互動(dòng)操作，也屬于寫入操作
Zion 的寫入操作方式
在 Zion 中一般是通過點(diǎn)擊方式或者在其它行為執(zhí)行成功時(shí)觸發(fā)寫入操作的，所以寫入操作是通過給組件配置【請(qǐng)求｜修改表數(shù)據(jù)】的行為來實(shí)現(xiàn)的。
如圖所示，為確定按鈕在點(diǎn)擊時(shí)配置了『修改表數(shù)據(jù) - 添加』行為，在該行為中為對(duì)應(yīng)的數(shù)據(jù)列綁定從【輸入框】、【選擇器】、【當(dāng)前用戶數(shù)據(jù)】等中獲取的內(nèi)容。當(dāng)點(diǎn)擊確定按鈕時(shí)，就會(huì)觸發(fā)寫入的操作，將獲取過來的這些數(shù)據(jù)寫入道數(shù)據(jù)庫中保存起來。
能夠?qū)懭氲膬?nèi)容如下圖所示：
Tips：
鏈接數(shù)據(jù)：只有在頁面添加了鏈接數(shù)據(jù)之后，才會(huì)在寫入內(nèi)容的時(shí)可以選擇使用
頁面數(shù)據(jù)：只有在頁面添加了頁面數(shù)據(jù)之后，才會(huì)在寫入內(nèi)容的時(shí)可以選擇使用
輸入框/選擇器：只有在頁面添加了輸入類/選擇類組件之后，才會(huì)在寫入內(nèi)容時(shí)可以選擇使用
結(jié)果數(shù)據(jù)：只有在執(zhí)行了寫入/更新行為成功時(shí)，才會(huì)在寫入內(nèi)容時(shí)可以選擇使用
以上數(shù)據(jù)的具體解釋與應(yīng)用，可以到【數(shù)據(jù)專講】模塊下查看
更新和刪除操作可以被統(tǒng)稱為修改操作。
更新
定義：將數(shù)據(jù)表中本身就存在的數(shù)據(jù)進(jìn)行的變更的行為，我們稱之為更新。
如下常見操作都屬于是更新操作：
更新個(gè)人信息：更換新的頭像、用戶名、手機(jī)號(hào)、收貨地址、密碼等等，將原來數(shù)據(jù)表中就存在的數(shù)據(jù)變更為新的數(shù)據(jù)，這樣的操作叫做更新
更新消費(fèi)記錄：使用信用卡消費(fèi)后，會(huì)增加信用卡積分，積分的增加、減少，也是在原有的積分?jǐn)?shù)據(jù)上進(jìn)行變更，也屬于更新行為
刪除
【真】刪除
定義：將數(shù)據(jù)表中原本就存在的數(shù)據(jù)刪除的行為，執(zhí)行了【真】刪除操作后，該條數(shù)據(jù)就消失了。
【假】刪除
定義：只是修改了數(shù)據(jù)的『狀態(tài)』，讓其不再顯示或者發(fā)揮作用，但數(shù)據(jù)本身仍然存在于數(shù)據(jù)表中（實(shí)際上是更新）。
舉個(gè)例子：
場(chǎng)景：商品首頁展示的是全部已上線的商品，未上線或者已下線的商品不在商品首頁進(jìn)行展示
為了實(shí)現(xiàn)這樣的效果，我們不需要將未上線的或者已下線的商品刪除，而是只需要給商品的數(shù)據(jù)增加一個(gè)『狀態(tài)』，已上線、未上線以及已下線就叫做商品的『狀態(tài)』。在首頁展示商品時(shí)，滿足“已上線”這個(gè)狀態(tài)的的商品才會(huì)被展示出來。
如下的常見操作都屬于是刪除操作：
刪除訂單記錄
刪除購物車中的商品
取消關(guān)注、點(diǎn)贊
取消某個(gè)活動(dòng)的預(yù)約
Tips：
在數(shù)據(jù)操作時(shí)，為了防止數(shù)據(jù)不小心被【真】刪除，造成不可挽回的后果，所以一般建議通過【假】刪除來對(duì)數(shù)據(jù)進(jìn)行“刪除”操作，實(shí)現(xiàn)刪除數(shù)據(jù)的效果。
Zion 的修改操作方式
在 Zion 中一般也是通過點(diǎn)擊來觸發(fā)修改操作的。
更新數(shù)據(jù)
如圖所示，為更新按鈕在點(diǎn)擊時(shí)配置了『修改表數(shù)據(jù) - 更新』行為，在該行為中為對(duì)應(yīng)的數(shù)據(jù)列綁定要更新的內(nèi)容，當(dāng)點(diǎn)擊確定按鈕時(shí)，就會(huì)觸發(fā)更新的操作。
Tips：
值得注意的是，更新數(shù)據(jù)時(shí)，一定要添加過濾條件，明確要更新的是哪一條數(shù)據(jù)，否則所有的數(shù)據(jù)都會(huì)被更新。
刪除數(shù)據(jù)
如圖所示，為刪除按鈕在點(diǎn)擊時(shí)配置了『修改表數(shù)據(jù) - 刪除』行為，該行為默認(rèn)需要配置過濾條件，明確要?jiǎng)h除的是哪一條數(shù)據(jù)，如果選擇無過濾條件，點(diǎn)擊刪除按鈕時(shí)，會(huì)刪除所選數(shù)據(jù)表的所有數(shù)據(jù)！！
以上內(nèi)容的具體內(nèi)容以及應(yīng)用，可以到【行為專講】模塊下找到【請(qǐng)求｜修改表數(shù)據(jù)】查看
定義：同時(shí)向一個(gè)數(shù)據(jù)表或者多個(gè)數(shù)據(jù)表進(jìn)行寫入/修改多條數(shù)據(jù)的操作。
如下常見操作，都屬于是批量修改操作：
發(fā)朋友圈時(shí)選擇了多張圖片發(fā)布
購物車結(jié)算時(shí)，選擇了多個(gè)商品進(jìn)行結(jié)算，生成了多個(gè)訂單
多選操作后，同時(shí)向數(shù)據(jù)表插入選擇的多個(gè)選項(xiàng)
Zion 的批量操作方式
向某張表寫入多條數(shù)據(jù)
Zion 一般是通過點(diǎn)擊觸發(fā)寫入操作的，如果想要寫入多條數(shù)據(jù)，在配置『修改表數(shù)據(jù) - 添加』行為之后，打開【批量修改】按鈕，選擇批量寫入的數(shù)據(jù)源，綁定需要寫入的數(shù)據(jù)內(nèi)容，即可完成向某張表寫入多條數(shù)據(jù)的操作。
具體配置操作如下：
此處為語雀視頻卡片，點(diǎn)擊鏈接查看：ScreenFlow.mp4
更新/刪除某張表的多條數(shù)據(jù)
Zion 的更新/刪除行為實(shí)際上就是一個(gè)批量操作，只要在配置『修改表數(shù)據(jù) - 更新/刪除』時(shí)，配置了過濾條件，那么符合條件的數(shù)據(jù)都會(huì)被更新/刪除。
例如下圖中，配置了更新/刪除愛好的行為，執(zhí)行該行為后，那么只要是屬于當(dāng)前用戶的愛好數(shù)據(jù)都會(huì)被更新/刪除
同時(shí)對(duì)多張表進(jìn)行寫入或者修改操作
在 Zion 中，同時(shí)對(duì)多張數(shù)據(jù)表的操作行為被稱作『批量修改』，你可以在行為中找到『批量修改』行為，在該行為中添加多個(gè)寫入或者修改行為，從而完成同時(shí)對(duì)多張表進(jìn)行寫入或者修改的操作。
以上內(nèi)容的具體內(nèi)容以及應(yīng)用，可以到【行為專講】模塊下找到【請(qǐng)求｜批量修改】查看
在寫入/更新數(shù)據(jù)時(shí)，如果想要在寫入/更新數(shù)據(jù)之前對(duì)獲取到的數(shù)據(jù)進(jìn)行校驗(yàn)，那么可以在綁定數(shù)據(jù)時(shí)配置數(shù)據(jù)驗(yàn)證的規(guī)則。
在 Zion 中配置數(shù)據(jù)校驗(yàn)的方式：
在配置寫入/更新的行為時(shí)，點(diǎn)擊數(shù)據(jù)旁的【三個(gè)點(diǎn)】按鈕，會(huì)出現(xiàn)【添加驗(yàn)證】的按鈕，即可配置數(shù)據(jù)校驗(yàn)規(guī)則。
常見的數(shù)據(jù)校驗(yàn)規(guī)則有：
判斷輸入的內(nèi)容是否為空或者非空
當(dāng)你配置了輸入姓名的輸入框，要求必須填入姓名時(shí)，可以配置輸入框非空校驗(yàn)來驗(yàn)證用戶已經(jīng)輸入了姓名
判斷輸入的內(nèi)容是否符合郵箱的規(guī)則
當(dāng)你配置了輸入郵箱的輸入框，可以配置郵箱校驗(yàn)來驗(yàn)證郵箱是否符合規(guī)則
判斷輸入的內(nèi)容是否符合電話號(hào)碼的規(guī)則
當(dāng)你配置了輸入電話的輸入框，可以配置電話號(hào)碼校驗(yàn)來驗(yàn)證電話號(hào)碼是否符合規(guī)則
判斷輸入的內(nèi)容是否符合內(nèi)容審核標(biāo)準(zhǔn)（無非法內(nèi)容）
當(dāng)你配置了輸入內(nèi)容的輸入框或者是圖片選擇器時(shí)，可以配置內(nèi)容審核校驗(yàn)來驗(yàn)證內(nèi)容是否違規(guī)
判斷輸入的內(nèi)容是否符合自定義正則表達(dá)式規(guī)則
當(dāng)你配置輸入框要求用戶輸入的內(nèi)容要符合你自定義的規(guī)則時(shí)（比如用戶名必須包含大寫字母），可以配置相應(yīng)的正則表達(dá)式進(jìn)行校驗(yàn)
數(shù)據(jù)驗(yàn)證內(nèi)容詳見行為專講【請(qǐng)求｜修改表數(shù)據(jù)】
結(jié)果數(shù)據(jù)的定義：在執(zhí)行了寫入或者更新操作之后，剛寫入的數(shù)據(jù)或者剛更新的數(shù)據(jù)被稱為“結(jié)果數(shù)據(jù)”。
應(yīng)用：在配置寫入或者更新操作時(shí)，在其成功執(zhí)行后，可以通過“結(jié)果數(shù)據(jù)”取到剛剛寫入或者更新的數(shù)據(jù)，從而來進(jìn)行其它的操作。
于Vue官方風(fēng)格指南整理
一、強(qiáng)制
1. 組件名為多個(gè)單詞
組件名應(yīng)該始終是多個(gè)單詞的，根組件 App 除外。
正例：
export default {
name: 'TodoItem',
// ...
}
復(fù)制代碼
反例：
export default {
name: 'Todo',
// ...
}
復(fù)制代碼
2. 組件數(shù)據(jù)
組件的 data 必須是一個(gè)函數(shù)。
當(dāng)在組件中使用 data 屬性的時(shí)候 (除了 new Vue 外的任何地方)，它的值必須是返回一個(gè)對(duì)象的函數(shù)。
正例：
// In a .vue file
export default {
data () {
return {
foo: 'bar'
}
}
}
// 在一個(gè) Vue 的根實(shí)例上直接使用對(duì)象是可以的，
// 因?yàn)橹淮嬖谝粋€(gè)這樣的實(shí)例。
new Vue({
data: {
foo: 'bar'
}
})
復(fù)制代碼
反例：
export default {
data: {
foo: 'bar'
}
}
復(fù)制代碼
3. Prop定義
Prop 定義應(yīng)該盡量詳細(xì)。
在你提交的代碼中，prop 的定義應(yīng)該盡量詳細(xì)，至少需要指定其類型。
正例：
props: {
status: String
}
// 更好的做法！
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !==-1
}
}
}
復(fù)制代碼
反例：
// 這樣做只有開發(fā)原型系統(tǒng)時(shí)可以接受 props: ['status'] 復(fù)制代碼
4. 為v-for設(shè)置鍵值
總是用 key 配合 v-for。
在組件上_總是_必須用 key 配合 v-for，以便維護(hù)內(nèi)部組件及其子樹的狀態(tài)。甚至在元素上維護(hù)可預(yù)測(cè)的行為，比如動(dòng)畫中的對(duì)象固化 (object constancy)，也是一種好的做法。
正例：
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
復(fù)制代碼
反例：
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
復(fù)制代碼
5.避免 v-if 和 v-for 用在一起
永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上。
一般我們?cè)趦煞N常見的情況下會(huì)傾向于這樣做：
正例：
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
復(fù)制代碼
反例：
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
復(fù)制代碼
6. 為組件樣式設(shè)置作用域
對(duì)于應(yīng)用來說，頂級(jí) App 組件和布局組件中的樣式可以是全局的，但是其它所有組件都應(yīng)該是有作用域的。
這條規(guī)則只和單文件組件有關(guān)。你不一定要使用 scoped 特性。設(shè)置作用域也可以通過 CSS Modules，那是一個(gè)基于 class 的類似 BEM 的策略，當(dāng)然你也可以使用其它的庫或約定。
不管怎樣，對(duì)于組件庫，我們應(yīng)該更傾向于選用基于 class 的策略而不是 scoped 特性。
這讓覆寫內(nèi)部樣式更容易：使用了常人可理解的 class 名稱且沒有太高的選擇器優(yōu)先級(jí)，而且不太會(huì)導(dǎo)致沖突。
正例：
<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>
復(fù)制代碼
反例：
<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>
復(fù)制代碼
二、強(qiáng)烈推薦（增強(qiáng)可讀性）
1. 組件文件
只要有能夠拼接文件的構(gòu)建系統(tǒng)，就把每個(gè)組件單獨(dú)分成文件。
當(dāng)你需要編輯一個(gè)組件或查閱一個(gè)組件的用法時(shí)，可以更快速的找到它。
正例：
components/ |- TodoList.vue |- TodoItem.vue 復(fù)制代碼
反例：
Vue.component('TodoList', {
// ...
})
Vue.component('TodoItem', {
// ...
})
復(fù)制代碼
2. 單文件組件文件的大小寫
單文件組件的文件名應(yīng)該要么始終是單詞大寫開頭 (PascalCase)
正例：
components/ |- MyComponent.vue 復(fù)制代碼
反例：
components/ |- myComponent.vue |- mycomponent.vue 復(fù)制代碼
3. 基礎(chǔ)組件名
應(yīng)用特定樣式和約定的基礎(chǔ)組件 (也就是展示類的、無邏輯的或無狀態(tài)的組件) 應(yīng)該全部以一個(gè)特定的前綴開頭，比如 Base、App 或 V。
正例：
components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue 復(fù)制代碼
反例：
components/ |- MyButton.vue |- VueTable.vue |- Icon.vue 復(fù)制代碼
4. 單例組件名
只應(yīng)該擁有單個(gè)活躍實(shí)例的組件應(yīng)該以 The 前綴命名，以示其唯一性。
這不意味著組件只可用于一個(gè)單頁面，而是每個(gè)頁面只使用一次。這些組件永遠(yuǎn)不接受任何 prop，因?yàn)樗鼈兪菫槟愕膽?yīng)用定制的，而不是它們?cè)谀愕膽?yīng)用中的上下文。如果你發(fā)現(xiàn)有必要添加 prop，那就表明這實(shí)際上是一個(gè)可復(fù)用的組件，只是目前在每個(gè)頁面里只使用一次。
正例：
components/ |- TheHeading.vue |- TheSidebar.vue 復(fù)制代碼
反例：
components/ |- Heading.vue |- MySidebar.vue 復(fù)制代碼
5. 緊密耦合的組件名
和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名。
如果一個(gè)組件只在某個(gè)父組件的場(chǎng)景下有意義，這層關(guān)系應(yīng)該體現(xiàn)在其名字上。因?yàn)榫庉嬈魍ǔ?huì)按字母順序組織文件，所以這樣做可以把相關(guān)聯(lián)的文件排在一起。
正例：
components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue 復(fù)制代碼
反例：
components/ |- SearchSidebar.vue |- NavigationForSearchSidebar.vue 復(fù)制代碼
6. 組件名中的單詞順序
組件名應(yīng)該以高級(jí)別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結(jié)尾。
正例：
components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue 復(fù)制代碼
反例：
components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue 復(fù)制代碼
7. 模板中的組件名大小寫
總是 PascalCase 的
正例：
<!-- 在單文件組件和字符串模板中 --> <MyComponent/> 復(fù)制代碼
反例：
<!-- 在單文件組件和字符串模板中 --> <mycomponent/> <!-- 在單文件組件和字符串模板中 --> <myComponent/> 復(fù)制代碼
8. 完整單詞的組件名
組件名應(yīng)該傾向于完整單詞而不是縮寫。
正例：
components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue 復(fù)制代碼
反例：
components/ |- SdSettings.vue |- UProfOpts.vue 復(fù)制代碼
9. 多個(gè)特性的元素
多個(gè)特性的元素應(yīng)該分多行撰寫，每個(gè)特性一行。
正例：
<img src="http://m.jungjaehyung.com/uploadfile/2024/1012/20241012081107515.png" alt="Vue Logo" > <MyComponent foo="a" bar="b" baz="c" /> 復(fù)制代碼
反例：
<img src="http://m.jungjaehyung.com/uploadfile/2024/1012/20241012081107515.png" alt="Vue Logo"> <MyComponent foo="a" bar="b" baz="c"/> 復(fù)制代碼
10. 模板中簡(jiǎn)單的表達(dá)式
組件模板應(yīng)該只包含簡(jiǎn)單的表達(dá)式，復(fù)雜的表達(dá)式則應(yīng)該重構(gòu)為計(jì)算屬性或方法。
復(fù)雜表達(dá)式會(huì)讓你的模板變得不那么聲明式。我們應(yīng)該盡量描述應(yīng)該出現(xiàn)的是什么，而非如何計(jì)算那個(gè)值。而且計(jì)算屬性和方法使得代碼可以重用。
正例：
<!-- 在模板中 -->
{{ normalizedFullName }}
// 復(fù)雜表達(dá)式已經(jīng)移入一個(gè)計(jì)算屬性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
復(fù)制代碼
反例：
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
復(fù)制代碼
11. 簡(jiǎn)單的計(jì)算屬性
正例：
computed: {
basePrice: function () {
return this.manufactureCost / (1 - this.profitMargin)
},
discount: function () {
return this.basePrice * (this.discountPercent || 0)
},
finalPrice: function () {
return this.basePrice - this.discount
}
}
復(fù)制代碼
反例：
computed: {
price: function () {
var basePrice=this.manufactureCost / (1 - this.profitMargin)
return (
basePrice -
basePrice * (this.discountPercent || 0)
)
}
}
復(fù)制代碼
12. 帶引號(hào)的特性值
非空 HTML 特性值應(yīng)該始終帶引號(hào) (單引號(hào)或雙引號(hào)，選你 JS 里不用的那個(gè))。
在 HTML 中不帶空格的特性值是可以沒有引號(hào)的，但這樣做常常導(dǎo)致帶空格的特征值被回避，導(dǎo)致其可讀性變差。
正例：
<AppSidebar :style="{ width: sidebarWidth + 'px' }">
復(fù)制代碼
反例：
<AppSidebar :style={width:sidebarWidth+'px'}>
復(fù)制代碼
13. 指令縮寫
都用指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:)
正例：
<input @input="onInput" @focus="onFocus" > 復(fù)制代碼
反例：
<input v-bind:value="newTodoText" :placeholder="newTodoInstructions" > 復(fù)制代碼
三、推薦
1. 單文件組件的頂級(jí)元素的順序
單文件組件應(yīng)該總是讓<script>、<template> 和 <style> 標(biāo)簽的順序保持一致。且 <style> 要放在最后，因?yàn)榱硗鈨蓚€(gè)標(biāo)簽至少要有一個(gè)。
正例：
<!-- ComponentA.vue --> <template>...</template> <script>/* ... */</script> <style>/* ... */</style> 復(fù)制代碼
四、謹(jǐn)慎使用 (有潛在危險(xiǎn)的模式)
1. 沒有在 v-if/v-if-else/v-else 中使用 key
如果一組 v-if + v-else 的元素類型相同，最好使用 key (比如兩個(gè) <div> 元素)。
正例：
<div
v-if="error"
key="search-status"
>
錯(cuò)誤：{{ error }}
</div>
<div
v-else
key="search-results"
>
{{ results }}
</div>
復(fù)制代碼
反例：
<div v-if="error">
錯(cuò)誤：{{ error }}
</div>
<div v-else>
{{ results }}
</div>
復(fù)制代碼
2. scoped 中的元素選擇器
元素選擇器應(yīng)該避免在 scoped 中出現(xiàn)。
在 scoped 樣式中，類選擇器比元素選擇器更好，因?yàn)榇罅渴褂迷剡x擇器是很慢的。
正例：
<template>
<button class="btn btn-close">X</button>
</template>
<style scoped>
.btn-close {
background-color: red;
}
</style>
復(fù)制代碼
反例：
<template>
<button>X</button>
</template>
<style scoped>
button {
background-color: red;
}
</style>
復(fù)制代碼
3. 隱性的父子組件通信
應(yīng)該優(yōu)先通過 prop 和事件進(jìn)行父子組件之間的通信，而不是 this.$parent 或改變 prop。
正例：
Vue.component('TodoItem', {
props: {
todo: {
type: Object,
required: true
}
},
template: `
<input
:value="todo.text"
@input="$emit('input', $event.target.value)"
>
`
})
復(fù)制代碼
反例：
Vue.component('TodoItem', {
props: {
todo: {
type: Object,
required: true
}
},
methods: {
removeTodo () {
var vm=this
vm.$parent.todos=vm.$parent.todos.filter(function (todo) {
return todo.id !==vm.todo.id
})
}
},
template: `
<span>
{{ todo.text }}
<button @click="removeTodo">
X
</button>
</span>
`
})
復(fù)制代碼
4. 非 Flux 的全局狀態(tài)管理
應(yīng)該優(yōu)先通過 Vuex 管理全局狀態(tài)，而不是通過 this.$root 或一個(gè)全局事件總線。
正例：
// store/modules/todos.js
export default {
state: {
list: []
},
mutations: {
REMOVE_TODO (state, todoId) {
state.list=state.list.filter(todo=> todo.id !==todoId)
}
},
actions: {
removeTodo ({ commit, state }, todo) {
commit('REMOVE_TODO', todo.id)
}
}
}
<!-- TodoItem.vue -->
<template>
<span>
{{ todo.text }}
<button @click="removeTodo(todo)">
X
</button>
</span>
</template>
<script>
import { mapActions } from 'vuex'
export default {
props: {
todo: {
type: Object,
required: true
}
},
methods: mapActions(['removeTodo'])
}
</script>
復(fù)制代碼
反例：
// main.js
new Vue({
data: {
todos: []
},
created: function () {
this.$on('remove-todo', this.removeTodo)
},
methods: {
removeTodo: function (todo) {
var todoIdToRemove=todo.id
this.todos=this.todos.filter(function (todo) {
return todo.id !==todoIdToRemove
})
}
}
})
復(fù)制代碼
附錄
1. 推薦使用vs code進(jìn)行前端編碼，規(guī)定Tab大小為2個(gè)空格
{
"editor.tabSize": 2,
"workbench.startupEditor": "newUntitledFile",
"workbench.iconTheme": "vscode-icons",
// 以下為stylus配置
"stylusSupremacy.insertColons": false, // 是否插入冒號(hào)
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個(gè)選擇器中是否換行
"vetur.format.defaultFormatter.html": "js-beautify-html",
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
"javascriptreact",
"html",
"vue"
],
"eslint.options": { "plugins": ["html"] },
"prettier.singleQuote": true,
"prettier.semi": false,
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"vetur.format.js.InsertSpaceBeforeFunctionParenthesis": false,
"vetur.format.defaultFormatter.js": "prettier",
// "prettier.eslintIntegration": true
}
復(fù)制代碼
讀本篇前，建議先熟悉《數(shù)據(jù)的讀取和顯示》
將數(shù)據(jù)寫入到哪里去
寫入和修改的操作實(shí)際上都是對(duì)存儲(chǔ)數(shù)據(jù)的數(shù)據(jù)表進(jìn)行操作，所以在寫入和修改之前，你得先已經(jīng)創(chuàng)建好了對(duì)應(yīng)的數(shù)據(jù)表。
寫入的數(shù)據(jù)從哪里來
從輸入框輸入的內(nèi)容，從相冊(cè)選擇上傳的圖片、視頻，從桌面上傳的文件（音頻、pdf、word等），這些輸入或者上傳的內(nèi)容，都可以寫入到數(shù)據(jù)庫中去。
如何在 Zion 中獲取需要寫入的數(shù)據(jù)
通過輸入類/選擇類組件來獲取需要寫入的數(shù)據(jù)：
如下圖所示，通過以下組件輸入、選擇、上傳來獲取需要寫入的數(shù)據(jù)。
在哪里找到輸入、選擇、上傳來的數(shù)據(jù)：
進(jìn)行寫入操作時(shí)，點(diǎn)擊【+】選擇【輸入框】/【選擇器】就能夠找到這些數(shù)據(jù)。
Tips：
組件重命名（十分重要！）
通常頁面中可能會(huì)有多個(gè)輸入/選擇組件，所以在選擇需要寫入數(shù)據(jù)時(shí)會(huì)出現(xiàn)多個(gè)可選的組件名。
例如上圖所示有客戶姓名的輸入框組件、聯(lián)系電話的輸入框組件，而這些組件在沒有重命名之前會(huì)叫“文字輸入1”、“文字輸入2”，我們難以準(zhǔn)確快速的知道哪一個(gè)才是獲取客戶姓名的組件，所以需要對(duì)組件進(jìn)行重命名。
常用命名規(guī)范：內(nèi)容_組件類型
例如【文字輸入】組件的默認(rèn)名稱為“文字輸入”，如果這個(gè)組件是用來獲取用戶輸入的姓名的，那么建議將組件名稱修改為“客戶姓名_文字輸入”，那么如上所示的視頻中在選擇需要寫入的輸入框數(shù)據(jù)時(shí)，就能夠正確獲取對(duì)應(yīng)的數(shù)據(jù)。
組件重命名方法：
選中需要重命名的組件，在其右邊欄中找到“組件名稱”，在“組件名稱”下方的輸入框中輸入新的命名即可。
定義：所謂的寫入操作，實(shí)際上就是往數(shù)據(jù)庫中添加了一條或者多條數(shù)據(jù)。
如下常見操作，都屬于是寫入內(nèi)容的操作：
發(fā)布一條內(nèi)容：發(fā)文字朋友圈、發(fā)微博、向朋友發(fā)送一條微信消息、在待辦事項(xiàng)app中記錄一條待辦、發(fā)布一個(gè)活動(dòng)、預(yù)約了一個(gè)活動(dòng)、實(shí)際上都屬于向某個(gè)數(shù)據(jù)庫中寫入了一條數(shù)據(jù)。
購買商品：向購物車中添加了商品、成功購買了商品、下單了一份外賣、添加了一個(gè)新的收貨地址也都數(shù)據(jù)寫入操作
收藏、點(diǎn)贊、評(píng)論、回復(fù)這些常見的互動(dòng)操作，也屬于寫入操作
Zion 的寫入操作方式
在 Zion 中一般是通過點(diǎn)擊方式或者在其它行為執(zhí)行成功時(shí)觸發(fā)寫入操作的，所以寫入操作是通過給組件配置【請(qǐng)求｜修改表數(shù)據(jù)】的行為來實(shí)現(xiàn)的。
如圖所示，為確定按鈕在點(diǎn)擊時(shí)配置了『修改表數(shù)據(jù) - 添加』行為，在該行為中為對(duì)應(yīng)的數(shù)據(jù)列綁定從【輸入框】、【選擇器】、【當(dāng)前用戶數(shù)據(jù)】等中獲取的內(nèi)容。當(dāng)點(diǎn)擊確定按鈕時(shí)，就會(huì)觸發(fā)寫入的操作，將獲取過來的這些數(shù)據(jù)寫入道數(shù)據(jù)庫中保存起來。
能夠?qū)懭氲膬?nèi)容如下圖所示：
Tips：
鏈接數(shù)據(jù)：只有在頁面添加了鏈接數(shù)據(jù)之后，才會(huì)在寫入內(nèi)容的時(shí)可以選擇使用
頁面數(shù)據(jù)：只有在頁面添加了頁面數(shù)據(jù)之后，才會(huì)在寫入內(nèi)容的時(shí)可以選擇使用
輸入框/選擇器：只有在頁面添加了輸入類/選擇類組件之后，才會(huì)在寫入內(nèi)容時(shí)可以選擇使用
結(jié)果數(shù)據(jù)：只有在執(zhí)行了寫入/更新行為成功時(shí)，才會(huì)在寫入內(nèi)容時(shí)可以選擇使用
以上數(shù)據(jù)的具體解釋與應(yīng)用，可以到【數(shù)據(jù)專講】模塊下查看
更新和刪除操作可以被統(tǒng)稱為修改操作。
更新
定義：將數(shù)據(jù)表中本身就存在的數(shù)據(jù)進(jìn)行的變更的行為，我們稱之為更新。
如下常見操作都屬于是更新操作：
更新個(gè)人信息：更換新的頭像、用戶名、手機(jī)號(hào)、收貨地址、密碼等等，將原來數(shù)據(jù)表中就存在的數(shù)據(jù)變更為新的數(shù)據(jù)，這樣的操作叫做更新
更新消費(fèi)記錄：使用信用卡消費(fèi)后，會(huì)增加信用卡積分，積分的增加、減少，也是在原有的積分?jǐn)?shù)據(jù)上進(jìn)行變更，也屬于更新行為
刪除
【真】刪除
定義：將數(shù)據(jù)表中原本就存在的數(shù)據(jù)刪除的行為，執(zhí)行了【真】刪除操作后，該條數(shù)據(jù)就消失了。
【假】刪除
定義：只是修改了數(shù)據(jù)的『狀態(tài)』，讓其不再顯示或者發(fā)揮作用，但數(shù)據(jù)本身仍然存在于數(shù)據(jù)表中（實(shí)際上是更新）。
舉個(gè)例子：
場(chǎng)景：商品首頁展示的是全部已上線的商品，未上線或者已下線的商品不在商品首頁進(jìn)行展示
為了實(shí)現(xiàn)這樣的效果，我們不需要將未上線的或者已下線的商品刪除，而是只需要給商品的數(shù)據(jù)增加一個(gè)『狀態(tài)』，已上線、未上線以及已下線就叫做商品的『狀態(tài)』。在首頁展示商品時(shí)，滿足“已上線”這個(gè)狀態(tài)的的商品才會(huì)被展示出來。
如下的常見操作都屬于是刪除操作：
刪除訂單記錄
刪除購物車中的商品
取消關(guān)注、點(diǎn)贊
取消某個(gè)活動(dòng)的預(yù)約
Tips：
在數(shù)據(jù)操作時(shí)，為了防止數(shù)據(jù)不小心被【真】刪除，造成不可挽回的后果，所以一般建議通過【假】刪除來對(duì)數(shù)據(jù)進(jìn)行“刪除”操作，實(shí)現(xiàn)刪除數(shù)據(jù)的效果。
Zion 的修改操作方式
在 Zion 中一般也是通過點(diǎn)擊來觸發(fā)修改操作的。
更新數(shù)據(jù)
如圖所示，為更新按鈕在點(diǎn)擊時(shí)配置了『修改表數(shù)據(jù) - 更新』行為，在該行為中為對(duì)應(yīng)的數(shù)據(jù)列綁定要更新的內(nèi)容，當(dāng)點(diǎn)擊確定按鈕時(shí)，就會(huì)觸發(fā)更新的操作。
Tips：
值得注意的是，更新數(shù)據(jù)時(shí)，一定要添加過濾條件，明確要更新的是哪一條數(shù)據(jù)，否則所有的數(shù)據(jù)都會(huì)被更新。
刪除數(shù)據(jù)
如圖所示，為刪除按鈕在點(diǎn)擊時(shí)配置了『修改表數(shù)據(jù) - 刪除』行為，該行為默認(rèn)需要配置過濾條件，明確要?jiǎng)h除的是哪一條數(shù)據(jù)，如果選擇無過濾條件，點(diǎn)擊刪除按鈕時(shí)，會(huì)刪除所選數(shù)據(jù)表的所有數(shù)據(jù)！！
以上內(nèi)容的具體內(nèi)容以及應(yīng)用，可以到【行為專講】模塊下找到【請(qǐng)求｜修改表數(shù)據(jù)】查看
定義：同時(shí)向一個(gè)數(shù)據(jù)表或者多個(gè)數(shù)據(jù)表進(jìn)行寫入/修改多條數(shù)據(jù)的操作。
如下常見操作，都屬于是批量修改操作：
發(fā)朋友圈時(shí)選擇了多張圖片發(fā)布
購物車結(jié)算時(shí)，選擇了多個(gè)商品進(jìn)行結(jié)算，生成了多個(gè)訂單
多選操作后，同時(shí)向數(shù)據(jù)表插入選擇的多個(gè)選項(xiàng)
Zion 的批量操作方式
向某張表寫入多條數(shù)據(jù)
Zion 一般是通過點(diǎn)擊觸發(fā)寫入操作的，如果想要寫入多條數(shù)據(jù)，在配置『修改表數(shù)據(jù) - 添加』行為之后，打開【批量修改】按鈕，選擇批量寫入的數(shù)據(jù)源，綁定需要寫入的數(shù)據(jù)內(nèi)容，即可完成向某張表寫入多條數(shù)據(jù)的操作。
具體配置操作如下：
此處為語雀視頻卡片，點(diǎn)擊鏈接查看：ScreenFlow.mp4
更新/刪除某張表的多條數(shù)據(jù)
Zion 的更新/刪除行為實(shí)際上就是一個(gè)批量操作，只要在配置『修改表數(shù)據(jù) - 更新/刪除』時(shí)，配置了過濾條件，那么符合條件的數(shù)據(jù)都會(huì)被更新/刪除。
例如下圖中，配置了更新/刪除愛好的行為，執(zhí)行該行為后，那么只要是屬于當(dāng)前用戶的愛好數(shù)據(jù)都會(huì)被更新/刪除
同時(shí)對(duì)多張表進(jìn)行寫入或者修改操作
在 Zion 中，同時(shí)對(duì)多張數(shù)據(jù)表的操作行為被稱作『批量修改』，你可以在行為中找到『批量修改』行為，在該行為中添加多個(gè)寫入或者修改行為，從而完成同時(shí)對(duì)多張表進(jìn)行寫入或者修改的操作。
以上內(nèi)容的具體內(nèi)容以及應(yīng)用，可以到【行為專講】模塊下找到【請(qǐng)求｜批量修改】查看
在寫入/更新數(shù)據(jù)時(shí)，如果想要在寫入/更新數(shù)據(jù)之前對(duì)獲取到的數(shù)據(jù)進(jìn)行校驗(yàn)，那么可以在綁定數(shù)據(jù)時(shí)配置數(shù)據(jù)驗(yàn)證的規(guī)則。
在 Zion 中配置數(shù)據(jù)校驗(yàn)的方式：
在配置寫入/更新的行為時(shí)，點(diǎn)擊數(shù)據(jù)旁的【三個(gè)點(diǎn)】按鈕，會(huì)出現(xiàn)【添加驗(yàn)證】的按鈕，即可配置數(shù)據(jù)校驗(yàn)規(guī)則。
常見的數(shù)據(jù)校驗(yàn)規(guī)則有：
判斷輸入的內(nèi)容是否為空或者非空
當(dāng)你配置了輸入姓名的輸入框，要求必須填入姓名時(shí)，可以配置輸入框非空校驗(yàn)來驗(yàn)證用戶已經(jīng)輸入了姓名
判斷輸入的內(nèi)容是否符合郵箱的規(guī)則
當(dāng)你配置了輸入郵箱的輸入框，可以配置郵箱校驗(yàn)來驗(yàn)證郵箱是否符合規(guī)則
判斷輸入的內(nèi)容是否符合電話號(hào)碼的規(guī)則
當(dāng)你配置了輸入電話的輸入框，可以配置電話號(hào)碼校驗(yàn)來驗(yàn)證電話號(hào)碼是否符合規(guī)則
判斷輸入的內(nèi)容是否符合內(nèi)容審核標(biāo)準(zhǔn)（無非法內(nèi)容）
當(dāng)你配置了輸入內(nèi)容的輸入框或者是圖片選擇器時(shí)，可以配置內(nèi)容審核校驗(yàn)來驗(yàn)證內(nèi)容是否違規(guī)
判斷輸入的內(nèi)容是否符合自定義正則表達(dá)式規(guī)則
當(dāng)你配置輸入框要求用戶輸入的內(nèi)容要符合你自定義的規(guī)則時(shí)（比如用戶名必須包含大寫字母），可以配置相應(yīng)的正則表達(dá)式進(jìn)行校驗(yàn)
數(shù)據(jù)驗(yàn)證內(nèi)容詳見行為專講【請(qǐng)求｜修改表數(shù)據(jù)】
結(jié)果數(shù)據(jù)的定義：在執(zhí)行了寫入或者更新操作之后，剛寫入的數(shù)據(jù)或者剛更新的數(shù)據(jù)被稱為“結(jié)果數(shù)據(jù)”。
應(yīng)用：在配置寫入或者更新操作時(shí)，在其成功執(zhí)行后，可以通過“結(jié)果數(shù)據(jù)”取到剛剛寫入或者更新的數(shù)據(jù)，從而來進(jìn)行其它的操作。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
