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>