Vue 3 memo

v-bind 縮寫

<!-- 完整語法 -->
<a v-bind:href="url"> ... </a>

<!-- 縮寫 -->
<a :href="url"> ... </a>

<!-- 動態(tài)參數(shù)的縮寫 -->
<a :[key]="url"> ... </a>

v-on 縮寫

<!-- 完整語法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 縮寫 -->
<a @click="doSomething"> ... </a>

<!-- 動態(tài)參數(shù)的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

在 DOM 中使用模板時 (直接在一個 HTML 文件里撰寫模板)魏割,還需要避免使用大寫字符來命名鍵名,因為瀏覽器會把 attribute 名全部強制轉為小寫:

<!--
在 DOM 中使用模板時這段代碼會被轉換為 `v-bind:[someattr]`钢颂。
除非在實例中有一個名為“someattr”的 property钞它,否則代碼不會工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

Data Property 和方法

組件的 data 選項是一個函數(shù)殊鞭。Vue 在創(chuàng)建新組件實例的過程中調用此函數(shù)遭垛。它應該返回一個對象,然后 Vue 會通過響應性系統(tǒng)將其包裹起來操灿,并以 $data 的形式存儲在組件實例中锯仪。為方便起見,該對象的任何頂級 property 也直接通過組件實例暴露出來

Vue 使用 $ 前綴通過組件實例暴露自己的內置 API趾盐。它還為內部 property 保留 _ 前綴庶喜。你應該避免使用這兩個字符開頭的的頂級 data property 名稱

Vue 自動為 methods 綁定 this,以便于它始終指向組件實例救鲤。這將確保方法在用作事件監(jiān)聽或回調時保持正確的 this 指向溃卡。在定義 methods 時應避免使用箭頭函數(shù),因為這會阻止 Vue 綁定恰當?shù)?this 指向蜒简。

:style

:style 的對象語法十分直觀——看著非常像 CSS,但其實是一個 JavaScript 對象漩仙。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case搓茬,記得用引號括起來) 來命名

單文件組件文件的大小寫強烈推薦

單文件組件的文件名應該要么始終是單詞大寫開頭 (PascalCase),要么始終是橫線連接 (kebab-case)队他。

解析 DOM 模板

HTML attribute 名不區(qū)分大小寫卷仑,因此瀏覽器將所有大寫字符解釋為小寫。這意味著當你在 DOM 模板中使用時麸折,駝峰 prop 名稱和 event 處理器參數(shù)需要使用它們的 kebab-cased (橫線字符分隔) 等效值:

//  在JavaScript中的駝峰

app.component('blog-post', {
  props: ['postTitle'],
  template: `
    <h3>{{ postTitle }}</h3>
  `
})
<!-- 在HTML則是橫線字符分割 -->

<blog-post post-title="hello!"></blog-post>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末锡凝,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子垢啼,更是在濱河造成了極大的恐慌窜锯,老刑警劉巖张肾,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異锚扎,居然都是意外死亡吞瞪,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進店門驾孔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來芍秆,“玉大人,你說我怎么就攤上這事翠勉⊙叮” “怎么了?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵对碌,是天一觀的道長荆虱。 經常有香客問我,道長俭缓,這世上最難降的妖魔是什么克伊? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮华坦,結果婚禮上愿吹,老公的妹妹穿的比我還像新娘。我一直安慰自己惜姐,他們只是感情好犁跪,可當我...
    茶點故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著歹袁,像睡著了一般坷衍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上条舔,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天枫耳,我揣著相機與錄音,去河邊找鬼孟抗。 笑死迁杨,一個胖子當著我的面吹牛,可吹牛的內容都是我干的凄硼。 我是一名探鬼主播铅协,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼摊沉!你這毒婦竟也來了狐史?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎骏全,沒想到半個月后苍柏,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡吟温,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年序仙,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鲁豪。...
    茶點故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡潘悼,死狀恐怖,靈堂內的尸體忽然破棺而出爬橡,到底是詐尸還是另有隱情治唤,我是刑警寧澤,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布糙申,位于F島的核電站宾添,受9級特大地震影響,放射性物質發(fā)生泄漏柜裸。R本人自食惡果不足惜缕陕,卻給世界環(huán)境...
    茶點故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望疙挺。 院中可真熱鬧扛邑,春花似錦、人聲如沸铐然。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽搀暑。三九已至沥阳,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間自点,已是汗流浹背桐罕。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留桂敛,地道東北人冈绊。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像埠啃,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子伟恶,可洞房花燭夜當晚...
    茶點故事閱讀 45,500評論 2 359

推薦閱讀更多精彩內容

  • 鏈接:https://cn.vuejs.org/v2/api/#Vue-filter API TPshop中國免費...
    zz云飛揚閱讀 478評論 0 0
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容碴开,還有我對于 Vue 1.0 印象不深的內容。關于...
    云之外閱讀 5,052評論 0 29
  • 一、簡介 1潦牛、 Vue.js 是什么 參考網址:https://cn.vuejs.org/v2/guide/ind...
    滿天繁星_28c5閱讀 477評論 0 1
  • 前言 本文是閱讀vue文檔時的收獲和心得眶掌,與vue文檔大部分不符,閱讀vue文檔請移步Vue.js 創(chuàng)建一個 Vu...
    極奏閱讀 647評論 0 1
  • [優(yōu)先級 A:必要的] 這些規(guī)則會幫你規(guī)避錯誤巴碗,所以學習并接受它們帶來的全部代價吧朴爬。 [優(yōu)先級 B:強烈推薦] 這...
    Loong5閱讀 521評論 0 0