資料內(nèi)容:
2.1.2. 模板中使用簡單的表達(dá)式
組件模板應(yīng)該只包含簡單的表達(dá)式,復(fù)雜的表達(dá)式則應(yīng)該重構(gòu)為計(jì)算屬性或方法。復(fù)雜表達(dá)式會
讓你的模板變得不那么聲明式。我們應(yīng)該盡量? 述應(yīng)該出現(xiàn)的是什么,而非如何計(jì)算那個值。而
且計(jì)算屬性和方法使得代碼可以重用。
正例:
<template>
<p>{{ normalizedFullName }}</p>
</template>
// 復(fù)雜表達(dá)式已經(jīng)移入一個計(jì)算屬性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
反例:
<template>
<p>
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
</p>
</template>
2.1.3 指令都使用縮寫形式
指令推薦都使用縮寫形式,(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)
正例:
<input
@input="onInput"
@focus="onFocus"
>
反例:
<inputv-on:input="onInput"
@focus="onFocus"
>